Question

I want to add an Import button and a file browse button next to the Add Product button in the product grid page in magento admin.

When the user choose a file and clicks the Import button
I’ll upload the file to var/import, open a new tab and run the import profile.

How can I add the form (import button + file browse field) to the top of the grid?

Thanks

Answer 1

Use XML Layouts to set your custom template for product grid container block and add your custom form block there. You need to extend adminhtml_catalog_product_index layout handle for that:

<adminhtml_catalog_product_index>
     <reference name="product_list">
         <!-- Set your custom template -->
         <action method="setTemplate"><template>path/to/your_template.phtml</template></action>
         <!-- Add your custom block -->
         <block name="import_form" as="import_form" type="your_module/form_block_name"></block>
     </reference>
</adminhtml_catalog_product_index>

Then you need to define your block and template. Your custom block should be extended from Mage_Adminhtml_Block_Widget_Form and template should be a copy of adminhtml/default/default/template/catalog/product.phtml but with modifications to display your custom block, like in the following example:

<div class="content-header">
<table cellspacing="0">
    <tr>
        <td style="width:50%;"><h3 class="icon-head head-products"><?php echo Mage::helper('catalog')->__('Manage Products') ?></h3></td>
        <td class="a-right">
            <?php echo $this->getButtonsHtml() ?>
        </td>
    </tr>
</table>
</div>
<!-- Start of Displaying of your custom import form -->
<?php echo $this->getChildHtml('import_form');?> 
<!-- End of Displaying of your custom import form -->
<?php if( !$this->isSingleStoreMode() ): ?>
<?php echo $this->getChildHtml('store_switcher');?>
<?php endif;?>
<div>
    <?php echo $this->getGridHtml() ?>
</div>