0

I want to show images item-wise in the order detail page in the backend like this image below. enter image description here

Any idea,?

2 Answers 2

1

you can use Viewmodel for replace object manager.

file: Override sales_order_view file.

app\code{{vendor}}{{modulename}}\view\adminhtml\layout\sales_order_view.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="order_items">
            <arguments>
                <argument name="columns" xsi:type="array">
                    <item name="custom_item_column" xsi:type="string" translate="true">Product Image</item>
                </argument>
            </arguments>
            <referenceBlock name="default_order_items_renderer">

                <arguments>
                    <argument name="view_model"
                              xsi:type="object">{{vendor}}\{{modulename}}\ViewModel\Custom
                    </argument>


                    <argument name="columns" xsi:type="array">
                        <item name="product_img" xsi:type="string" translate="true">product_img</item>
                    </argument>
                </arguments>
                <action method="setTemplate">
                    <argument name="template" translate="true" xsi:type="string">Ad_Sections::order/view/items/renderer/default.phtml</argument>
                </action>
            </referenceBlock>
        </referenceBlock>
    </body>
</page>

file : app\code{{vendor}}{{modulename}}\view\adminhtml\templates\order\view\items\renderer\default.phtml

<?php
/** @var \Magento\Sales\Block\Adminhtml\Order\View\Items\Renderer\DefaultRenderer $block */
?>
<?php
/**@var Aureatelabs\ModuleName\ViewModel\Custom $viewModel */
$viewModel = $block->getData('view_model');
//$viewModel->getSomething();
$_item = $block->getItem();
?>
<?php
    $block->setPriceDataObject($_item) ?><tr>
    <?php $i = 0;
    $columns = $block->getColumns();
    $lastItemNumber = count($columns) ?>    <td>
    <?php $product =  $_item->getProduct();?>
    <?php
        $imagewidth=200;
        $imageheight=200;
        $image_url  = $viewModel->getProductImage($product ,$imagewidth, $imageheight );
    ?>
        <img src="<?php echo $image_url;?>" />
</td>
    <?php foreach ($columns as $columnName => $columnClass):?>
    <?php $i++; ?>        <td class="<?= /* @noEscape */ $columnClass ?><?= /* @noEscape */ ($i === $lastItemNumber ? ' last' : '') ?>"><?= /* @escapeNotVerified */ $block->getColumnHtml($_item, $columnName) ?></td>
    <?php endforeach; ?></tr>

File : app/code/{{vendor}}/{{module_name}}/ViewModel/Custom.php

<?php

namespace {{vendor}}\{{modulename}}\ViewModel;
use Magento\Framework\View\Element\Block\ArgumentInterface;

class Custom implements ArgumentInterface
{
    protected $_productRepositoryFactory;
    protected $productImage;
    public function __construct(

        \Magento\Catalog\Helper\Image $image
    ) {
        //$this->_productRepositoryFactory = $productRepositoryFactory;
        $this->productImage = $image;
    }
    public function getProductImage($product,$imagewidth,$imageheight)
    {
        return $url = $this->productImage->init($product, 'product_page_image_small')
            ->setImageFile($product->getSmallImage()) // image,small_image,thumbnail
            ->resize(380)
            ->getUrl();
    }
}

Ref : https://community.magento.com/t5/Magento-2-x-Programming/adding-new-column-in-admin-sales-order-view-page/td-p/489785

1

you need to edit below file

/vendor/magento/module-sales/view/adminhtml/templates/order/view/items/renderer/defult.phtml ( you need to copy into your theme or module)

replace file code with below code

    <?php $_item = $block->getItem() ?>
    <?php $block->setPriceDataObject($_item) ?>
    <tr>
        <?php $i = 0;
        $columns = $block->getColumns();
        $lastItemNumber = count($columns) ?>
        <td>
        <?php $product =  $_item->getProduct();?>
        <?php $objectManager = \Magento\Framework\App\ObjectManager::getInstance();?>
        
        <?php  $imagewidth=200;
        $imageheight=200;
        $imageHelper  = $objectManager->get('\Magento\Catalog\Helper\Image');
        $image_url = $imageHelper->init($product, 'small_image')->setImageFile($product->getSmallImage())->resize($imagewidth, $imageheight)->getUrl();
         ?>
         <img src="<?php echo $image_url;?>" />
        </td>
         <?php foreach ($columns as $columnName => $columnClass):?>
            <?php $i++; ?>
            <td class="<?= /* @noEscape */ $columnClass ?><?= /* @noEscape */ ($i === $lastItemNumber ? ' last' : '') ?>"><?= /* @escapeNotVerified */ $block->getColumnHtml($_item, $columnName) ?></td>
        <?php endforeach; ?>
    </tr>

Hope it will help you.

2
  • without using object manager Mar 10, 2023 at 13:52
  • With Viewmodel you can replace object manager.
    – S.P
    Mar 13, 2023 at 9:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.