Mini Tutorial: Adding Custom Attributes to the Backend Product Grid

In most cases the default Magento Product Grid under Catalog > Manage Products will display all the required information for easily filtering and searching the products, however in some particular cases store owners might want to be able to display and filter the catalog product grid by using non default attributes.

In this mini tutorial we will over a quick method for adding custom attributes to the backend product grid and displaying the option filters correctly. For this tutorial we will use the color and manufacturer attributes as examples.

After creating our base Module structure we need to rewrite the Adminhtml Catalog Product Grid in order for properly manipulate the collection and the grid columns:


    
        
            0.1.0
        
    
    
        
            
                
                    Demac_Grid_Block_Grid
                
            
        
    

Now that our rewrites are in place let’s copy of the Product Grid Block under our Module Block folder; the 2 functions that we will need to change are _prepareCollection and _prepareColumns.

_prepareCollection is in charge of setting up our collection and by default it only loads the necessary attribute for populating each column.

    
protected function _prepareCollection()
    {
        $store = $this->_getStore();
        $collection = Mage::getModel('catalog/product')->getCollection()
            ->addAttributeToSelect('sku')
            ->addAttributeToSelect('name')
            ->addAttributeToSelect('attribute_set_id')
            ->addAttributeToSelect('type_id');

        // Add our custom attributes
        $collection->addAttributeToSelect('color')
                ->addAttributeToSelect('manufacturer');

        if (Mage::helper('catalog')->isModuleEnabled('Mage_CatalogInventory')) {
            $collection->joinField('qty',
                'cataloginventory/stock_item',
                'qty',
                'product_id=entity_id',
                '{{table}}.stock_id=1',
                'left');
        }
        if ($store->getId()) {

            $adminStore = Mage_Core_Model_App::ADMIN_STORE_ID;
            $collection->addStoreFilter($store);
            $collection->joinAttribute('name', 'catalog_product/name', 'entity_id', null, 'inner', $adminStore);
            $collection->joinAttribute('custom_name', 'catalog_product/name', 'entity_id', null, 'inner', $store->getId());
            $collection->joinAttribute('status', 'catalog_product/status', 'entity_id', null, 'inner', $store->getId());
            $collection->joinAttribute('visibility', 'catalog_product/visibility', 'entity_id', null, 'inner', $store->getId());
            $collection->joinAttribute('price', 'catalog_product/price', 'entity_id', null, 'left', $store->getId());
        }
        else {
            $collection->addAttributeToSelect('price');
            $collection->joinAttribute('status', 'catalog_product/status', 'entity_id', null, 'inner');
            $collection->joinAttribute('visibility', 'catalog_product/visibility', 'entity_id', null, 'inner');
        }
        $this->setCollection($collection);
        parent::_prepareCollection();
        $this->getCollection()->addWebsiteNamesToResult();
        return $this;
    }

Now that our custom attributes are being loaded as part of our collection data we can add the corresponding columns to the _prepareColumns function.

This can easily achieved by using the Mage_Adminhtml_Block_Widget_Grid::addColumn function:

$this->addColumn('attribute_code',
    array(
        'header'=> Mage::helper('catalog')->__('Attrib. Name'),
        'width' => '100px',
        'index' => 'attribute_code',
        'type'  => 'options',
        'options' => $attribute_options,
));

As we can see the addColumn function takes 2 parameters:

– A unique ID for the column, in this case our attribute code
– An array with the following values:

  • Header: The title for the column.
  • Width: The width value of the column in pixels
  • Type: The data type of the column(number, currency, options), this will take care of the formatting for our column values
  • Options: Allows to pre-populated the filter dropdown and is used to display correctly the values of our column
  • Index: is the matching attribute code from our collection

Now if we check our category grid in the Magento backend, we can see that the columns appear but they are empty this is because we haven’t told Magento where to get the option values for our columns yet.

So let’s go back to our Grid class and create the a new protected function:

    protected function _getAttributeOptions($attribute_code)
    {
        $attribute = Mage::getModel('eav/config')->getAttribute('catalog_product', $attribute_code);
        $options = array();
        foreach( $attribute->getSource()->getAllOptions(true, true) as $option ) {
            $options[$option['value']] = $option['label'];
        }
        return $options;
    }

And now lets update our addColumn functions to the following:

$this->addColumn('attribute_code',
    array(
        'header'=> Mage::helper('catalog')->__('Attrib. Name'),
        'width' => '100px',
        'index' => 'attribute_code',
        'type'  => 'options',
        'options' => $this->_getAttributeOptions('attribute_code'),
));