How to add product image in sales order grid?

Question

How to add product image in sales order grid. Using Observer.

I have to create custom module, in this module i have to add product image that selected in place order.

i have to use observer for getting data. from the tables.

observer.php file

<?php
class Sigmasolve_Customordergrid_Model_Observer
{
 public function salesOrderGridCollectionLoadBefore($observer)
 {
 $collection = $observer->getOrderGridCollection();
 //$select = $collection->getSelect();
 $collection->getSelect()->joinLeft
 (array
 ('payment' => $collection->getTable('sales/order_payment')), 
 'payment.parent_id=main_table.entity_id', 
 array('payment_method' => 'method')
 ); 
 $collection->join
 (array
 ('soa' => 'sales/order_address'), 
 'soa.parent_id=main_table.entity_id and soa.address_type = "billing"', 
 array('full_address'=>'CONCAT(soa.firstname, " " , soa.lastname, ",<br/>", soa.street, ",<br/>", soa.city, ",<br/>", soa.region, ",<br/>", soa.postcode)' ), 
 null,'left'
 );
 $collection->join
 (array
 ('soas' => 'sales/order_address'), 'soas.parent_id=main_table.entity_id and soas.address_type = "shipping"', 
 array('full_address_ship'=>'CONCAT(soas.firstname, " " , soas.lastname, ",<br/>", soas.street, ",<br/>", soas.city, ",<br/>", soas.region, ",<br/>", soas.postcode)' ), 
 null,'left'
 );
 $customer_entity = Mage::getSingleton('core/resource')->getTableName('customer_entity'); 
 $collection->getSelect()->join(
 $customer_entity,
 'main_table.customer_id = '.$customer_entity.'.entity_id', array('customer_email' => 'email')
 ); 
 $collection->getSelect()->join(
 'sales_flat_order_item', 
 '`sales_flat_order_item`.order_id=`main_table`.entity_id', 
 array(
 'skus' => new Zend_Db_Expr('group_concat(`sales_flat_order_item`.sku SEPARATOR ", ")'),
 'names' => new Zend_Db_Expr('group_concat(`sales_flat_order_item`.name SEPARATOR ",")'),
 'productids' => new Zend_Db_Expr('group_concat(`sales_flat_order_item`.product_id SEPARATOR ",")'),
 'quantityordereds' => new Zend_Db_Expr('group_concat(`sales_flat_order_item`.qty_ordered SEPARATOR ",")'),
 'types' => new Zend_Db_Expr('group_concat(`sales_flat_order_item`.product_type SEPARATOR ",")')
 )
 );
 $collection->getSelect()->group('main_table.entity_id');
 }
}

• Rushikesh Solanki: How to add image display query?
• Jaimin Sutariya: I think you need to use renderer to get images on orders grid, add a new column to your grid and render product images to that column
• Learing_Coder: If Suppose you have order three products onces then in sale's order which image You what to show in sales order grid
• Rushikesh Solanki: all three images can display as SEPARATE

Answer 1

Add below code for images in your layout file.

<action method="addColumnAfter"> 
 <columnId>images</columnId> 
 <arguments> 
 <header>Image</header> 
 <index>productids</index> 
 <filter></filter>
 <renderer>Sigmasolve_Customordergrid_Block_Adminhtml_Widget_Grid_Column_Renderer_Images</renderer> 
 <width>70</width> 
 </arguments> 
 <after>created_at</after> 
</action>

Now create a new file app\code\local\Sigmasolve\Customordergrid\Block\Adminhtml\Widget\Grid\Column\Renderer\Images.php with below code

<?php 
class Sigmasolve_Customordergrid_Block_Adminhtml_Widget_Grid_Column_Renderer_Images extends Mage_Adminhtml_Block_Widget_Grid_Column_Renderer_Abstract
{
 public function render(Varien_Object $row)
 {
 return $this->_geProductImages($row);
 } 
 protected function _geProductImages(Varien_Object $row)
 { 
 $result = '';
 $products = explode(",",$row->getData('productids'));
 foreach($products as $productId) {
 $_product = Mage::getModel('catalog/product')->load($productId);
 if(($_product->getImage() != '') && ($_product->getImage() != "no_selection")) {
 $imageUrl = Mage::helper('catalog/image')->init($_product, 'image');
 $result .= "<img src=". $imageUrl ." width='50' height='50'/>"; 
 } 
 }
 return $result;
 }
}

It will show you images like below. You can add css to update structure as per your requirements.

enter image description here

• Rushikesh Solanki: I want to get image using observer
• Rushikesh Solanki: public function getImagesColumnParams() { return array( 'header' => 'Image', 'align' => 'left', 'index' => 'images', 'width' => '70', //'filter_condition_callback' => array('Sigmasolve_Customordergrid_Model_Observer', 'filterImages'), ); }
• Rushikesh Solanki: that type of code create for the image field
• Rushikesh Solanki: and in design->adminhtml creating layout file, that layout file has a code like.... <action method="addColumnAfter"> <columnId>images</columnId> <arguments helper="sigmasolve_customordergrid/getImagesColumnParams" /> <after>payment_method</after> </action>
• Rushikesh Solanki: I have upload completed code in above link. @Jaimin Sutariya