Import button + File browse field in admin product grid in magento

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

I have two options: 1. Clicking on the Import button will popup js window with a file browse field and Submit/Cancel buttons. The js lib in magento are really old and I'm not sure what to use to achieve this. It's easy with new js libraries but I don't think mixing libs and versions is a good idea. 2. Import button will redirect to a new page with a simple import form. I think I'll have to use 2. — pablo, Nov 02 '10 at 14:53

score 1 · Accepted Answer · answered Nov 04 '10 at 15:49

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>

score 0 · Answer 2 · answered Nov 02 '10 at 16:42

0

you can use Mage_Adminhtml_Block_Widget_Container::addButton() to do this. Search magento's code for calls to this function to see how it should be used, create your own container block, replace magento's container block for the product with it by using a layout file and you're done.

answered Nov 02 '10 at 16:42

greg0ire

22,714
16
72
101

Mage_Adminhtml_Block_Widget_Container::addButton() will only let me add a button. I need to add a form. – pablo Nov 02 '10 at 17:04

score 0 · Answer 3 · answered Apr 11 '11 at 08:48

Hi thats right use Mage_Adminhtml_Block_Widget_Container::addButton() method & here is the syntax

$data = array(
                'label' =>  'Import Zipcode Data',
                'onclick'   => "setLocation('".$this->getUrl('*/*/import')."')"
                );

    $this->addButton ('import_zip_code', $data, 0, 100,  'header', 'header');

of course u can have any label & id of button that u want. setLocation allows u to set the target where u want to go when u click on this button.

Import button + File browse field in admin product grid in magento

3 Answers3