In Previous post we have learned to Display Product Image in Frontend Order Detail Page of Magento 2.
In this post we will learn to Display Product Image in Backend Order Detail Page of Magento 2.
We will do it by creating custom module.
You can find complete module on Github.
Create folder in
app/code/Magelearn/SalesadminorderAdd registration.php file in it:
<?php /** * Copyright © All rights reserved. * See COPYING.txt for license details. */ use Magento\Framework\Component\ComponentRegistrar; ComponentRegistrar::register(ComponentRegistrar::MODULE, 'Magelearn_Salesadminorder', __DIR__);Add composer.json file in it:
{
"name": "magelearn/module-salesadminorder",
"description": "Magento2 Display Product images on Sales Order View page at backend",
"type": "magento2-module",
"license": "OSL-3.0",
"authors": [
{
"email": "info@mage2gen.com",
"name": "Mage2Gen"
},
{
"email": "vijaymrami@gmail.com",
"name": "vijay rami"
}
],
"minimum-stability": "dev",
"require": {},
"autoload": {
"files": [
"registration.php"
],
"psr-4": {
"Magelearn\\Salesadminorder\\": ""
}
}
}Add etc/module.xml file:
<?xml version="1.0" ?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd"> <module name="Magelearn_Salesadminorder" setup_version="1.0.0"/> </config>Now to add product image in magento backend Sales Order view page, we will modify layout file of
sales_order_view.xml file. We will add new column to display product image.And with setTemplate method, we will call our custom template and add code to display product image.Add view/adminhtml/layout/sales_order_view.xml file:
<?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="product-img" xsi:type="string" translate="true">Product Image</item>
</argument>
</arguments>
<referenceBlock name="default_order_items_renderer">
<arguments>
<argument name="columns" xsi:type="array">
<item name="product-img" xsi:type="string" translate="true">col-product-img</item>
</argument>
</arguments>
<action method="setTemplate">
<argument name="template" translate="true" xsi:type="string">Magelearn_Salesadminorder::order/view/items/renderer/default.phtml</argument>
</action>
</referenceBlock>
</referenceBlock>
</body>
</page>Add view/adminhtml/templates/order/view/items/renderer/default.phtml file:
<?php /** @var \Magento\Sales\Block\Adminhtml\Order\View\Items\Renderer\DefaultRenderer $block */ ?>
<?php $_item = $block->getItem() ?>
<?php $block->setPriceDataObject($_item) ?>
<tr>
<?php $i = 0;
$columns = $block->getColumns();
$lastItemNumber = count($columns) ?>
<?php foreach ($columns as $columnName => $columnClass):?>
<?php $i++; ?>
<td class="<?= /* @noEscape */ $columnClass ?><?= /* @noEscape */ ($i === $lastItemNumber ? ' last' : '') ?>">
<?= /* @escapeNotVerified */ $block->getColumnHtml($_item, $columnName) ?>
<?php if($columnClass == "col-product-img"){ ?>
<?php
$product = $_item->getProduct();
$imagewidth=200;
$imageheight=200;
$imageHelper = $this->helper('Magento\Catalog\Helper\Image');
$image_url = $imageHelper->init($product, 'small_image')->setImageFile($product->getSmallImage())->resize($imagewidth, $imageheight)->getUrl();
?>
<img src="<?php echo $image_url;?>" />
<?php } ?>
</td>
<?php endforeach; ?>
</tr>
Tag :
Magento2,
Magento2 Extensions
3 Comments On "How to Display Product Image in Backend Order Detail Page of Magento 2"
Thanks for help but i have Crete configurable product then that order product image not showing in customer order details.
Can you please how we can see that image?
ok..i will check it and will let you know.
Hello Savan,
I have checked it and its working fine.
Just note that it will display product images on Backed (Admin) order detail page. Please check accordingly.