Editing products and changing their position in categories can be quite a task. This is especially true when you have a large number of products to edit or arrange, and some of them are very similar.
Sure, you could differentiate them by SKU, ID, price, or something else. But wouldn’t it be great if you had a thumbnail of each product in grid?
Adding product thumbnail in grid isn’t very complicated. There are few ways to do this, but almost every one of them uses renderers to display product image.
That’s what we’ll do as well.
In this example, we’ll register our module, rewrite a block in Magento admin grid – specifically ‘Manage Categories‘ grid and add our code for displaying one additional column – Thumbnail.
Let’s get started!
Firstly, register your module.
app/etc/modules/Inchoo_Thumbnail.xml
<?xml version="1.0"?>
<config>
<modules>
<Inchoo_Thumbnail>
<active>true</active>
<codePool>local</codePool>
</Inchoo_Thumbnail>
</modules>
</config>Now configure your module and rewrite ‘catalog_category_tab_product‘ block with your own version.
app/code/local/Inchoo/Thumbnail/etc/config.xml
<?xml version="1.0"?>
<config>
<modules>
<Inchoo_Thumbnail>
<version>1.0.0.2</version>
</Inchoo_Thumbnail>
</modules>
<global>
<blocks>
<adminhtml>
<rewrite>
<catalog_category_tab_product>Inchoo_Thumbnail_Block_Adminhtml_Catalog_Category_Tab_Product</catalog_category_tab_product>
</rewrite>
</adminhtml>
</blocks>
</global>
</config>Copy app/code/core/Mage/Adminhtml/Block/Catalog/Category/Tab/Product.php to
app/code/local/Inchoo/Thumbnail/Block/Adminhtml/Catalog/Category/Tab/Product.php
<?php
class Inchoo_Thumbnail_Block_Adminhtml_Catalog_Category_Tab_Product extends Mage_Adminhtml_Block_Widget_Grid
{
public function __construct()
{
parent::__construct();
$this->setId('catalog_category_products');
$this->setDefaultSort('entity_id');
$this->setUseAjax(true);
}
public function getCategory()
{
return Mage::registry('category');
}
protected function _addColumnFilterToCollection($column)
{
// Set custom filter for in category flag
if ($column->getId() == 'in_category') {
$productIds = $this->_getSelectedProducts();
if (empty($productIds)) {
$productIds = 0;
}
if ($column->getFilter()->getValue()) {
$this->getCollection()->addFieldToFilter('entity_id', array('in'=>$productIds));
}
elseif(!empty($productIds)) {
$this->getCollection()->addFieldToFilter('entity_id', array('nin'=>$productIds));
}
}
else {
parent::_addColumnFilterToCollection($column);
}
return $this;
}
protected function _prepareCollection()
{
if ($this->getCategory()->getId()) {
$this->setDefaultFilter(array('in_category'=>1));
}
$collection = Mage::getModel('catalog/product')->getCollection()
->addAttributeToSelect('name')
->addAttributeToSelect('sku')
->addAttributeToSelect('price')
->addAttributeToSelect('thumbnail')
->addStoreFilter($this->getRequest()->getParam('store'))
->joinField('position',
'catalog/category_product',
'position',
'product_id=entity_id',
'category_id='.(int) $this->getRequest()->getParam('id', 0),
'left');
$this->setCollection($collection);
if ($this->getCategory()->getProductsReadonly()) {
$productIds = $this->_getSelectedProducts();
if (empty($productIds)) {
$productIds = 0;
}
$this->getCollection()->addFieldToFilter('entity_id', array('in'=>$productIds));
}
return parent::_prepareCollection();
}
protected function _prepareColumns()
{
if (!$this->getCategory()->getProductsReadonly()) {
$this->addColumn('in_category', array(
'header_css_class' => 'a-center',
'type' => 'checkbox',
'name' => 'in_category',
'values' => $this->_getSelectedProducts(),
'align' => 'center',
'index' => 'entity_id'
));
}
$this->addColumn('entity_id', array(
'header' => Mage::helper('catalog')->__('ID'),
'sortable' => true,
'width' => '60',
'index' => 'entity_id'
));
$this->addColumn('name', array(
'header' => Mage::helper('catalog')->__('Name'),
'index' => 'name'
));
$this->addColumn('image', array(
'header' => Mage::helper('catalog')->__('Image'),
'align' => 'left',
'index' => 'image',
'width' => '97',
'renderer' => 'Inchoo_Thumbnail_Block_Adminhtml_Template_Grid_Renderer_Image'
));
$this->addColumn('sku', array(
'header' => Mage::helper('catalog')->__('SKU'),
'width' => '80',
'index' => 'sku'
));
$this->addColumn('price', array(
'header' => Mage::helper('catalog')->__('Price'),
'type' => 'currency',
'width' => '1',
'currency_code' => (string) Mage::getStoreConfig(Mage_Directory_Model_Currency::XML_PATH_CURRENCY_BASE),
'index' => 'price'
));
$this->addColumn('position', array(
'header' => Mage::helper('catalog')->__('Position'),
'width' => '1',
'type' => 'number',
'index' => 'position',
'editable' => !$this->getCategory()->getProductsReadonly()
//'renderer' => 'adminhtml/widget_grid_column_renderer_input'
));
return parent::_prepareColumns();
}
public function getGridUrl()
{
return $this->getUrl('*/*/grid', array('_current'=>true));
}
protected function _getSelectedProducts()
{
$products = $this->getRequest()->getPost('selected_products');
if (is_null($products)) {
$products = $this->getCategory()->getProductsPosition();
return array_keys($products);
}
return $products;
}
}Now insert the code that’s highlighted above. This will select one additional attribute of a product – ‘thumbnail‘, and create a column named ‘Image‘. Note that you can do this to any grid that contains products, you’ll just need to rewrite a different block.
Lastly, we will create our renderer we called on line 89.
'renderer' => 'Inchoo_Thumbnail_Block_Adminhtml_Template_Grid_Renderer_Image'app/code/local/Inchoo/Thumbnail/Block/Adminhtml/Template/Grid/Renderer/Image.php
<?php
class Inchoo_Thumbnail_Block_Adminhtml_Template_Grid_Renderer_Image extends Mage_Adminhtml_Block_Widget_Grid_Column_Renderer_Abstract
{
public function render(Varien_Object $row)
{
$val = Mage::helper('catalog/image')->init($row, 'thumbnail')->resize(97);
$out = "<img src=". $val ." width='97px'/>";
return $out;
}
}This renderer takes a row object as a parameter. It’s calling image helper to initialize the image with a ‘thumbnail’ size, and resizes it to 97px (you can change this value to anything you like). After that, it’s returning image tag, which appears in your grid.
We also need to cover a case when no image is assigned to a product.
The quickest way is to just copy product placeholder image. I copied the default Magento placeholder from skinadminhtmldefaultdefaultimagesplaceholderthumbnail.jpg
to
skinadminhtmldefaultdefaultimagescatalogproductplaceholderthumbnail.jpg
Download zipped source or view this module on GitHub.
