How to add product image on admin order creation page in Magento 2?

All (236)

APPs (21)

Bitrix24 (81)

CRM (20)

Events (11)

IT News (19)

Magento (13)

Odoo (1)

Projects (37)

Web 3 (21)

10 June 2024

Oleg Litvinchuk

Backend Developer

How to add product image on admin order creation page in Magento 2?

About the author: Oleg Litvinchuk, a backend developer with extensive experience working with eCommerce projects on various CMS, including Magento 2. In his opinion, it is always better to invest more in development and create perfect and effective tools than to ignore the difficulties that the company's staff will suffer from and business in general.

Images are an integral part of any website that sells goods or services. For material products, this is a must-have — because no one wants to buy a "cat in a bag" and wants to see what they should get from a deal with an online store. For intangible products, such as services, thematic images are also important, as they create an associative series for the customer, which strengthens the desire to purchase right here and now. But product images are no less important for company employees who directly place customer orders.

Ordering in Magento 2

Undoubtedly, Magento 2 is one of the best CMS in the world for the development of large eCommerce projects. It is a powerful and flexible system that can be completely customized to the needs of your business down to the smallest detail. However, among the basic functions, you will not be able to find absolutely everything that your business needs, because CMS authors cannot guess the thoughts of users from a distance. Therefore, this issue is solved by developers who supplement the functionality or customize its individual parts.

Magento 2 is best suited for the development of eCommerce projects where customer orders are the basis of the company's operations. Site administrators receive a notification about a new order in the dashboard and can view various details: buyer data, payment amount, product name and its characteristics, article number and much more. However, it is impossible to see what the user has purchased in the basic version of the CMS, since the display of attached product images is not provided. Therefore, if you need to display an image in the admin panel, you should refer to the code and create a small module — an addition to the system that extends its functions. And now I will show how it is done.

Module for displaying product images

Modules for Magento 2 can perform any functions, but for the correct operation of each of them, the prescribed rules should be followed. Let's go through the necessary steps to create a new module step by step.

Step 1

Create a file app\code\Avivi\ProductImageAdminOrder\registration.php and use the following code:

1
2
3

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
<preference for="\Magento\Sales\Block\Adminhtml\Order\Create\Search\Grid" type="Avivi\ProductImageAdminOrderCreate\Block\Adminhtml\OverrideOrder\Create\Search\Grid"/>
</config>

Step 2

Create the following file app\code\Avivi\ProductImageAdminOrder\etc\module.xml and use the following code:

<?php

namespace Avivi\ProductImageAdminOrderCreate\Block\Adminhtml\OverrideOrder\Create\Search;

use Magento\Sales\Block\Adminhtml\Order\Create\Search\Grid\DataProvider\ProductCollection;
use Magento\Framework\App\ObjectManager;

/**
 * Adminhtml sales order create search products block
 *
 */
class Grid extends \Magento\Backend\Block\Widget\Grid\Extended
{
    /**
     * Sales config
     *
     * @var \Magento\Sales\Model\Config
     */
    protected $_salesConfig;

    /**
     * Session quote
     *
     * @var \Magento\Backend\Model\Session\Quote
     */
    protected $_sessionQuote;

    /**
     * Catalog config
     *
     * @var \Magento\Catalog\Model\Config
     */
    protected $_catalogConfig;

    /**
     * Product factory
     *
     * @var \Magento\Catalog\Model\ProductFactory
     */
    protected $_productFactory;

    /**
     * @var ProductCollection $productCollectionProvider
     */
    private $productCollectionProvider;

    /**
     * @param \Magento\Backend\Block\Template\Context $context
     * @param \Magento\Backend\Helper\Data $backendHelper
     * @param \Magento\Catalog\Model\ProductFactory $productFactory
     * @param \Magento\Catalog\Model\Config $catalogConfig
     * @param \Magento\Backend\Model\Session\Quote $sessionQuote
     * @param \Magento\Sales\Model\Config $salesConfig
     * @param array $data
     * @param ProductCollection|null $productCollectionProvider
     */
    public function __construct(
        \Magento\Backend\Block\Template\Context $context,
        \Magento\Backend\Helper\Data $backendHelper,
        \Magento\Catalog\Model\ProductFactory $productFactory,
        \Magento\Catalog\Model\Config $catalogConfig,
        \Magento\Backend\Model\Session\Quote $sessionQuote,
        \Magento\Sales\Model\Config $salesConfig,
        array $data = [],
        ProductCollection $productCollectionProvider = null
    ) {
        $this->_productFactory = $productFactory;
        $this->_catalogConfig = $catalogConfig;
        $this->_sessionQuote = $sessionQuote;
        $this->_salesConfig = $salesConfig;
        $this->productCollectionProvider = $productCollectionProvider
            ?: ObjectManager::getInstance()->get(ProductCollection::class);
        parent::__construct($context, $backendHelper, $data);
    }

    /**
     * Constructor
     *
     * @return void
     */
    protected function _construct()
    {
        parent::_construct();
        $this->setId('sales_order_create_search_grid');
        $this->setRowClickCallback('order.productGridRowClick.bind(order)');
        $this->setCheckboxCheckCallback('order.productGridCheckboxCheck.bind(order)');
        $this->setRowInitCallback('order.productGridRowInit.bind(order)');
        $this->setDefaultSort('entity_id');
        $this->setFilterKeyPressCallback('order.productGridFilterKeyPress');
        $this->setUseAjax(true);
        if ($this->getRequest()->getParam('collapse')) {
            $this->setIsCollapsed(true);
        }
    }

    /**
     * Retrieve quote store object
     *
     * @return \Magento\Store\Model\Store
     */
    public function getStore()
    {
        return $this->_sessionQuote->getStore();
    }

    /**
     * Retrieve quote object
     *
     * @return \Magento\Quote\Model\Quote
     */
    public function getQuote()
    {
        return $this->_sessionQuote->getQuote();
    }

    /**
     * Add column filter to collection
     *
     * @param \Magento\Backend\Block\Widget\Grid\Column $column
     * @return $this
     */
    protected function _addColumnFilterToCollection($column)
    {
        // Set custom filter for in product flag
        if ($column->getId() == 'in_products') {
            $productIds = $this->_getSelectedProducts();
            if (empty($productIds)) {
                $productIds = 0;
            }
            if ($column->getFilter()->getValue()) {
                $this->getCollection()->addFieldToFilter('entity_id', ['in' => $productIds]);
            } else {
                if ($productIds) {
                    $this->getCollection()->addFieldToFilter('entity_id', ['nin' => $productIds]);
                }
            }
        } else {
            parent::_addColumnFilterToCollection($column);
        }
        return $this;
    }

    /**
     * Prepare collection to be displayed in the grid
     *
     * @return $this
     */
    protected function _prepareCollection()
    {

        $attributes = $this->_catalogConfig->getProductAttributes();
        $store = $this->getStore();

        /* @var $collection \Magento\Catalog\Model\ResourceModel\Product\Collection */
        $collection = $this->productCollectionProvider->getCollectionForStore($store);
        $collection->addAttributeToSelect(
            $attributes
        );
        $collection->addAttributeToFilter(
            'type_id',
            $this->_salesConfig->getAvailableProductTypes()
        );

        $this->setCollection($collection);
        return parent::_prepareCollection();
    }

    /**
     * Prepare columns
     *
     * @return $this
     */
    protected function _prepareColumns()
    {
        $this->addColumn(
            'thumbnail',
            [
                'filter' => false,
                'sortable' => false,
                'header' => __('Images'),
                'name' => 'thumbnail',
                'inline_css' => 'thumbnail',
                'index' => 'image',
                'class' => 'image',
                'renderer' => 'Avivi\ProductImageAdminOrderCreate\Block\Adminhtml\Product\Grid\Renderer\Image',
            ]
        );
        $this->addColumn(
            'entity_id',
            [
                'header' => __('ID'),
                'sortable' => true,
                'header_css_class' => 'col-id',
                'column_css_class' => 'col-id',
                'index' => 'entity_id'
            ]
        );
        $this->addColumn(
            'name',
            [
                'header' => __('Product'),
                'renderer' => \Magento\Sales\Block\Adminhtml\Order\Create\Search\Grid\Renderer\Product::class,
                'index' => 'name'
            ]
        );
        $this->addColumn('sku', ['header' => __('SKU'), 'index' => 'sku']);
        $this->addColumn(
            'price',
            [
                'header' => __('Price'),
                'column_css_class' => 'price',
                'type' => 'currency',
                'currency_code' => $this->getStore()->getCurrentCurrencyCode(),
                'rate' => $this->getStore()->getBaseCurrency()->getRate($this->getStore()->getCurrentCurrencyCode()),
                'index' => 'price',
                'renderer' => \Magento\Sales\Block\Adminhtml\Order\Create\Search\Grid\Renderer\Price::class
            ]
        );

        $this->addColumn(
            'in_products',
            [
                'header' => __('Select'),
                'type' => 'checkbox',
                'name' => 'in_products',
                'values' => $this->_getSelectedProducts(),
                'index' => 'entity_id',
                'sortable' => false,
                'header_css_class' => 'col-select',
                'column_css_class' => 'col-select'
            ]
        );

        $this->addColumn(
            'qty',
            [
                'filter' => false,
                'sortable' => false,
                'header' => __('Quantity'),
                'renderer' => \Magento\Sales\Block\Adminhtml\Order\Create\Search\Grid\Renderer\Qty::class,
                'name' => 'qty',
                'inline_css' => 'qty',
                'type' => 'input',
                'validate_class' => 'validate-number',
                'index' => 'qty'
            ]
        );

        return parent::_prepareColumns();
    }

    /**
     * Get grid url
     *
     * @return string
     */
    public function getGridUrl()
    {
        return $this->getUrl(
            'sales/*/loadBlock',
            ['block' => 'search_grid', '_current' => true, 'collapse' => null]
        );
    }

    /**
     * Get selected products
     *
     * @return mixed
     */
    protected function _getSelectedProducts()
    {
        $products = $this->getRequest()->getPost('products', []);

        return $products;
    }

    /**
     * Add custom options to product collection
     *
     * @return $this
     */
    protected function _afterLoadCollection()
    {
        $this->getCollection()->addOptionsToResult();
        return parent::_afterLoadCollection();
    }
}

Step 3

So we are almost close to our goal! Now create the following file app\code\Avivi\ProductImageAdminOrder\Block\Adminhtml\OverrideOrder\Create\Search\Grid.php using the following code:

<?php
namespace Avivi\ProductImageAdminOrderCreate\Block\Adminhtml\Product\Grid\Renderer;

use Magento\Backend\Block\Widget\Grid\Column\Renderer\AbstractRenderer;
use Magento\Framework\DataObject;
use Magento\Store\Model\StoreManagerInterface;
use Magento\Framework\View\Asset\Repository;
use Magento\Catalog\Helper\ImageFactory;
use Magento\Framework\Image\AdapterFactory;
use Magento\Store\Model\StoreManager;
use Magento\Store\Model\ScopeInterface;

class Image extends AbstractRenderer
{
    private $_storeManager;
    private $helperImageFactory;
    private $assetRepos;
    private $adapterFactory;
    private $scopeConfig;
    private $storeManager;
    /**
     * @param \Magento\Backend\Block\Context $context
     * @param array $data
     */
    public function __construct(\Magento\Backend\Block\Context $context,
                                Repository $assetRepos,
                                ImageFactory $helperImageFactory,
                                AdapterFactory $adapterFactory,
                                StoreManager $storeManager,
                                StoreManagerInterface $storemanager, array $data = [])
    {
        $this->_storeManager = $storemanager;
        $this->assetRepos = $assetRepos;
        $this->helperImageFactory = $helperImageFactory;
        $this->adapterFactory = $adapterFactory;
        $this->storeManager = $storeManager;
        $this->scopeConfig = $context->getScopeConfig();

        parent::__construct($context, $data);
        $this->_authorization = $context->getAuthorization();
    }
    /**
     * Renders grid column
     *
     * @param Object $row
     * @return  string
     */
    public function render(DataObject $row)
    {
        $mediaDirectory = $this->_storeManager->getStore()->getBaseUrl(
            \Magento\Framework\UrlInterface::URL_TYPE_MEDIA
        );

        if($this->_getValue($row)){
            $imageUrl = $mediaDirectory.'/catalog/product'.$this->_getValue($row);
        }else{
            $plUrl = $this->scopeConfig->getValue('catalog/placeholder/thumbnail_placeholder',ScopeInterface::SCOPE_STORE,0);
            $imageUrl = $mediaDirectory.'/catalog/product/placeholder/'.$plUrl;
        }
        return '<img src="'.$imageUrl.'" style="width: 5rem;border: 1px solid #d6d6d6;"/>';

    }
}

Step 4. The last one

Finally, create a file app\code\Avivi\ProductImageAdminOrder\Block\Adminhtml\Product\Grid\Renderer\Image.php and use the following code:

<?php
namespace Avivi\ProductImageAdminOrderCreate\Block\Adminhtml\Product\Grid\Renderer;

use Magento\Backend\Block\Widget\Grid\Column\Renderer\AbstractRenderer;
use Magento\Framework\DataObject;
use Magento\Store\Model\StoreManagerInterface;
use Magento\Framework\View\Asset\Repository;
use Magento\Catalog\Helper\ImageFactory;
use Magento\Framework\Image\AdapterFactory;
use Magento\Store\Model\StoreManager;
use Magento\Store\Model\ScopeInterface;

class Image extends AbstractRenderer
{
    private $_storeManager;
    private $helperImageFactory;
    private $assetRepos;
    private $adapterFactory;
    private $scopeConfig;
    private $storeManager;
    /**
     * @param \Magento\Backend\Block\Context $context
     * @param array $data
     */
    public function __construct(\Magento\Backend\Block\Context $context,
                                Repository $assetRepos,
                                ImageFactory $helperImageFactory,
                                AdapterFactory $adapterFactory,
                                StoreManager $storeManager,
                                StoreManagerInterface $storemanager, array $data = [])
    {
        $this->_storeManager = $storemanager;
        $this->assetRepos = $assetRepos;
        $this->helperImageFactory = $helperImageFactory;
        $this->adapterFactory = $adapterFactory;
        $this->storeManager = $storeManager;
        $this->scopeConfig = $context->getScopeConfig();

        parent::__construct($context, $data);
        $this->_authorization = $context->getAuthorization();
    }
    /**
     * Renders grid column
     *
     * @param Object $row
     * @return  string
     */
    public function render(DataObject $row)
    {
        $mediaDirectory = $this->_storeManager->getStore()->getBaseUrl(
            \Magento\Framework\UrlInterface::URL_TYPE_MEDIA
        );

        if($this->_getValue($row)){
            $imageUrl = $mediaDirectory.'/catalog/product'.$this->_getValue($row);
        }else{
            $plUrl = $this->scopeConfig->getValue('catalog/placeholder/thumbnail_placeholder',ScopeInterface::SCOPE_STORE,0);
            $imageUrl = $mediaDirectory.'/catalog/product/placeholder/'.$plUrl;
        }
        return '<img src="'.$imageUrl.'" style="width: 5rem;border: 1px solid #d6d6d6;"/>';

    }
}

Save all changes and check the result. Now the appearance of the list of orders in the admin panel of your Magento 2 has changed — a column with a thumbnail image of the product has been added:

555555

As you can see, solving the problem by creating a new module is not scary at all. However, it's always better to entrust development tasks to professionals: me and the Avivi team are always ready to help you develop Magento 2 projects.

Baner articles 2023 eng.png