Today we will add useful technique , by adding a thumbnail image to items grid inside admin order view , the seller need this feature to detect quickly which item has sold exactly .

You can download: Free Extension For OroCommerce Order Items Image (Clickable) At Admin

Inside this small course we will customize order items grid by Event Listener  , you can refer to official docs https://doc.oroinc.com/backend/entities/customize-datagrids/

Our bundle in this tutorial is OrderItemImageBundle inside src/Ibnab/Bundle , the grid name of order items inside admin side is order-line-items-grid you can find in : vendor/oro/commerce/src/Oro/Bundle/OrderBundle/Resources/config/oro/datagrids.yml , you can use browser inspector or symfony profiler to find the name too.

Let’s start by creating of Event Listener , So add services.yml inside src/Ibnab/Bundle/OrderItemImageBundle/Resources/config/services.yml and load by DI , the content of our service well:

 
services:
    ibnab_order_item_image.event_listener.order_items_datagrid.event_listener:
        class: Ibnab\Bundle\OrderItemImageBundle\EventListener\OrderItemImageEventListener
        tags:
            - { name: kernel.event_listener, event: oro_datagrid.datagrid.build.pre.order-line-items-grid, method: onPreBuild }
​

So is simple we’re tagging default symfony  kernel.event_listener , toe observe the event build.pre of our datagrid  order-line-items-grid :
​

 
event: oro_datagrid.datagrid.build.pre.order-line-items-grid
​

and the method where we well add the code is  onPreBuild inside the new class Ibnab\Bundle\OrderItemImageBundle\EventListener\OrderItemImageEventListener , the code of our class:
​

 
<?php
namespace Ibnab\Bundle\OrderItemImageBundle\EventListener;
use Oro\Bundle\DataGridBundle\Event\PreBuild;
class OrderItemImageEventListener
{
    /**
     * @param PreBuild $event
     */
    public function onPreBuild(PreBuild $event): void
    {
          $config = $event->getConfig();
          $config->offsetSetByPath('[columns][product]', ['label' => 'oro.product.entity_label','type' => 'twig','frontend_type' => 'html' ,'template' => 'IbnabOrderItemImageBundle:Order:Datagrid/product_image.html.twig']);
    }
}
​

So with  PreBuild $event instance we’re getting the configuration of datagrid on pre build step:

 
$config = $event->getConf();
​

by method  offsetSetByPath we have added a custom renderer to column product of order items datagrid :
​

 
$config->offsetSetByPath('[columns][product]', ['label' => 'oro.product.entity_label','type' => 'twig','frontend_type' => 'html' ,'template' => 'IbnabOrderItemImageBundle:Order:Datagrid/product_image.html.twig']);
​

let’s add our twig renderer inside src/Ibnab/Bundle/OrderItemImageBundle/Resources/views/Order/Datagrid/product_image.html.twig and the content is :
​

 
{% set isFreeFormProduct = record.getValue('productName') is empty and record.getValue('freeFormProduct') is not empty %}{% if isFreeFormProduct %}
    {{ record.getValue('freeFormProduct') }}
{% else %}
     {% import 'OroProductBundle::image_macros.html.twig' as Image %}
     {% set productImage = record.getValue('product').imagesByType('listing').first.image|default(null) %}
     {% set productImageUrl = Image.url(productImage, 'product_small') %}
    <a href=" {{ path('oro_product_view',{'id': record.getValue('product').id }) }}" target="_blank">
       <img src="{{ productImageUrl }}"
                                     class="image_inline"
                                     alt="{{ record.getValue('productName')  }}">
      {{ record.getValue('productName')  }}
    </a>
{% endif %}
​

easy we have got the code of default product column renderer and adding adding bit code to show image product too:
​

 
     {% import 'OroProductBundle::image_macros.html.twig' as Image %}
     {% set productImage = record.getValue('product').imagesByType('listing').first.image|default(null) %}
     {% set productImageUrl = Image.url(productImage, 'product_small') %}
    <a href=" {{ path('oro_product_view',{'id': record.getValue('product').id }) }}" target="_blank">
       <img src="{{ productImageUrl }}"
                                     class="image_inline"
                                     alt="{{ record.getValue('productName')  }}">
      {{ record.getValue('productName')  }}
    </a>
​

Is all => some part of the tutorial need to refer to some basic symfony technique.