Ajouter des images dans la liste des produits en back office de Magento

Un fonctionnalité très pratique m'a souvent été indiquée comme manquante dans le back office de Magento, la liste des produits n'affiche pas d'images, et il est vrai que sur de gros catalogues, avec des noms de produits similaires, ou des boutiques avec plusieurs administrateurs, ce petit détail peut être un véritable gain de temps et d'énergie dans la gestion des produits. Pour ajouter cette fonction, sans modifier un seul fichier du core, ce qui est très fortement conseillé dans le développement de sites sous Magento - ne serait-ce que pour pouvoir faire les mises à jour système - il suffit de créer un petit module à uploader ensuite via ftp.

Le module s'articule autour de 4 fichiers :
app --> code --> community --> Shapes --> Gridimages --> Adminhtml --> Block --> Catalog --> Product --> Grid.php
app --> code --> community --> Shapes --> Gridimages --> Block --> Adminhtml --> Template --> Grid --> Renderer --> Image.php
app --> code --> community --> Shapes --> Gridimages --> etc --> config.xml
app --> etc --> modules --> Shapes_Gridimages.xml

Dans le premier fichier, Grid.php, on vient étendre les fonctionnalités de app --> code --> core --> Mage --> Adminhtml --> Block --> Catalog --> Product --> Grid.php :

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

        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()) {
            //$collection->setStoreId($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');
        }
        
        $collection->joinAttribute('image', 'catalog_product/image', 'entity_id', null, 'left');

        $this->setCollection($collection);

        Mage_Adminhtml_Block_Widget_Grid::_prepareCollection();
        $this->getCollection()->addWebsiteNamesToResult();
        return $this;
    }
    
    protected function _prepareColumns()
    {
        $this->addColumn('image', array(
            'header' => Mage::helper('catalog')->__('Image'),
            'align' => 'left',
            'index' => 'image',
            'width'     => '70',
            'renderer' => 'Shapes_Gridimages_Block_Adminhtml_Template_Grid_Renderer_Image'
        ));
        return parent::_prepareColumns();
    }
}

Dans le deuxième fichier Image.php on vient ajouter la fonction d'appel de l'image dans la colonne des produits, en extension de app --> code --> core --> Mage --> Adminhtml --> Block--> Widget --> Grid --> Column --> Renderer --> Abstract.php

<?php 
class Shapes_Gridimages_Block_Adminhtml_Template_Grid_Renderer_Image extends Mage_Adminhtml_Block_Widget_Grid_Column_Renderer_Abstract
{
    public function render(Varien_Object $row)
    {
        return $this->_getValue($row);
    }
    protected function _getValue(Varien_Object $row)
    {       
        $val = $row->getData($this->getColumn()->getIndex());
        $val = str_replace("no_selection", "", $val);
        $url = Mage::getBaseUrl('media') . 'catalog/product' . $val;
        $out = "<img src="/. $url ." width='60px'/>";
        return $out;
    }
}

Dans les 2 derniers fichiers on vient écrire la config du module, soit dans config.xml :

<?xml version="1.0"?>
<config>
    <modules>
        <Shapes_Gridimages>
            <version>1.0</version>
        </Shapes_Gridimages>
    </modules>
    <global>
        <blocks>
            <adminhtml>
                <rewrite>
                    <catalog_product_grid>Shapes_Gridimages_Adminhtml_Block_Catalog_Product_Grid</catalog_product_grid>
                </rewrite>
            </adminhtml>
        </blocks>
    </global>
</config>

Et dans Shapes_Gridimages.xml :

<?xml version="1.0"?>
<config>
    <modules>
        <Shapes_Gridimages>
            <active>true</active>
            <codePool>community</codePool>
        </Shapes_Gridimages>
    </modules>
</config>

Une fois les fichiers écris et enregistrés avec la bonne structure de dossiers écrite ci-dessus, il suffit d'uploader le tout via ftp et d'aller voir le rendu en back office.

J'ai utilisé ce module sur plusieurs sites, de versions Magento allant de 1.7.0.2 à 1.9.1.0.

Un défaut notable est qu'il n'affichera pas les images des produits simples lorsque l'on n'en met pas dans l'administration et que l'on n'utilise que les images des produits parents, donc on a un lien brisé à la place, pas très joli. Peut-être l'occasion de se pencher sur une future mise à jour que je ne manquerai pas de venir poster ici si je viens à la faire.

BLOG COMMENTS POWERED BY DISQUS