cancel
Showing results for 
Search instead for 
Did you mean: 

How to show product image for ordered items on admin panel order view

SOLVED
Highlighted

How to show product image for ordered items on admin panel order view

I have a magento store on magento version 2.1.7.

 

I want to show product image for ordered items on order view page admin panel.

 

Please help me to achieve this as I am new on magento 2.x developing..

1 ACCEPTED SOLUTION

Accepted Solutions
Highlighted

Re: How to show product image for ordered items on admin panel order view

Hello @santoshcbonline

 

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 /** @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) ?>
	<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.

 

If it will work then give kudos or mark as solution


Problem solved? Click Kudos & Accept as Solution!
Sunil Patel
Magento 2 Certified Professional Developer & Frontend Developer

View solution in original post

11 REPLIES 11
Highlighted

Re: How to show product image for ordered items on admin panel order view

Hi @santoshcbonline,

 

I didn't tried this module but it seems can be useful for you: https://marketplace.magento.com/vsourz-order-success.html

 

You can always can perform a search at the marketplace: https://marketplace.magento.com/

 

Before installing a 3rd-party module remember to backup your database to be able to restore your store in case of troubles.

Re: How to show product image for ordered items on admin panel order view

I do not want product image to show on order success page on frontend.

 

Rather I want to show product images for ordered items on admin panel when admin view the order.

 

I want product images of ordered items along with product name and sku on order view page on admin panel.

 

Currently it only shows the product name and sku.

Highlighted

Re: How to show product image for ordered items on admin panel order view

Hi @santoshcbonline

 

Some one on stack exchange already tried this kind of solution !!

 

here if the link - https://magento.stackexchange.com/questions/106556/how-to-display-product-image-in-sales-order-view-...

 

This might help you 

if issue solved,Click Kudos & Accept as Solution
Highlighted

Re: How to show product image for ordered items on admin panel order view

Hello @santoshcbonline

 

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 /** @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) ?>
	<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.

 

If it will work then give kudos or mark as solution


Problem solved? Click Kudos & Accept as Solution!
Sunil Patel
Magento 2 Certified Professional Developer & Frontend Developer

View solution in original post

Highlighted

Re: How to show product image for ordered items on admin panel order view

this solution not worked for me (magento 2.2.6) 

 

This line gives error. 

$image_url = $imageHelper->init($product, 'small_image')->setImageFile($product->getSmallImage())->resize($imagewidth, $imageheight)->getUrl(); 

 

Highlighted

Re: How to show product image for ordered items on admin panel order view

Thanks for the solution. It worked perfectly fine with my 2.2.6 version. The only thing is that the order of the titles are not correct because the new image column in the table does not have a title.

Can you please tell me how to add the title for the image in the new table?

Highlighted

Re: How to show product image for ordered items on admin panel order view

The way to do this, using Magento best practices is:

1. Create a new module and in your module.xml add 

<!-- Ensures this module runs after Magento_Sales module is loaded by Di -->
<sequence> <module name="Magento_Sales" /> </sequence>

2. create a Vendor/Module/view/adminhtml/layout/sales_order_view.xml file with the below

<?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">
<!-- This is for your new column heading in <thead> --> <item name="image" xsi:type="string" translate="true">Product Image</item> <item name="product" xsi:type="string" translate="true">Product</item> <item name="status" xsi:type="string" translate="true">Item Status</item> <item name="price-original" xsi:type="string" translate="true">Original Price</item> <item name="price" xsi:type="string" translate="true">Price</item> <item name="ordered-qty" xsi:type="string" translate="true">Qty</item> <item name="subtotal" xsi:type="string" translate="true">Subtotal</item> <item name="tax-amount" xsi:type="string" translate="true">Tax Amount</item> <item name="tax-percent" xsi:type="string" translate="true">Tax Percent</item> <item name="discont" xsi:type="string" translate="true">Discount Amount</item> <item name="total" xsi:type="string" translate="true">Row Total</item> </argument> </arguments> <referenceBlock name="default_order_items_renderer"> <arguments> <argument name="columns" xsi:type="array">
<!-- This is for your new column data in <tbody> --> <item name="image" xsi:type="string" translate="false">col-image</item> <item name="product" xsi:type="string" translate="false">col-product</item> <item name="status" xsi:type="string" translate="false">col-status</item> <item name="price-original" xsi:type="string" translate="false">col-price-original</item> <item name="price" xsi:type="string" translate="false">col-price</item> <item name="qty" xsi:type="string" translate="false">col-ordered-qty</item> <item name="subtotal" xsi:type="string" translate="false">col-subtotal</item> <item name="tax-amount" xsi:type="string" translate="false">col-tax-amount</item> <item name="tax-percent" xsi:type="string" translate="false">col-tax-percent</item> <item name="discont" xsi:type="string" translate="false">col-discont</item> <item name="total" xsi:type="string" translate="false">col-total</item> </argument> </arguments> </referenceBlock> </referenceBlock> </body> </page>

3. Create an etc/di.xml file with the following to override the DefaultRenderer block for the item columns.

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="Magento\Sales\Block\Adminhtml\Order\View\Items\Renderer\DefaultRenderer">
        <plugin name="order-view-image" type="Vendor\Module\Plugin\DefaultRendererPlugin" sortOrder="1" />
    </type>
</config>

4. Create your plugin at Vendor/Module/Plugin/DefaultRendererPlugin.php with the following contents

<?php
namespace Vendor\Module\Plugin;

use \Magento\Catalog\Helper\Image as ImageHelper;

class DefaultRendererPlugin {

	/**
	 * @var \Magento\Catalog\Helper\Image $imageHelper
	*/
	protected $imageHelper;

	/**
	 * @param ImageHelper      $imageHelper
	 */
	public function __construct
	(
		ImageHelper $imageHelper
	)
	{
		$this->imageHelper      = $imageHelper;
	}

	public function aroundGetColumnHtml(\Magento\Sales\Block\Adminhtml\Order\View\Items\Renderer\DefaultRenderer $defaultRenderer, \Closure $proceed,\Magento\Framework\DataObject $item, $column, $field=null) {
		// $column will equal the name value from sales_order_view.xml that was added
if($column === 'image') { $img = $this->imageHelper->init($item->getProduct(), 'small_image')->setImageFile($item->getProduct()->getImage())->resize(200)->getUrl(); $result = '<img src="'.$img.'" alt="'.$item->getName().'" />'; } else { if($field) { $result = $proceed($item,$column,$field); } else { $result = $proceed($item,$column); } } return $result; } }  

 5. Recompile (Showing full compilation just in case all is needed)

bin/magento module:enable vendor/module
bin/magento setup:upgrade
bin/magento s:d:c
bin/magento s:s:d -f

 N.B Please never edit core files e.g. in vendor/ always override them and never use the objectManager, always make proper use of the dependency injection system

Highlighted

Re: How to show product image for ordered items on admin panel order view

If anybody needs a plug and play extension to show product images at all the placed where order is viewed, like

 

- Admin order view

- Admin new order creation

- Storefront order view

- Order email to customer

 

Then you may use below extension

 

https://redchamps.com/product-images-in-sales-order-magento-2-extension.html

 

Also, if you like to link/hyperlink to product name at all those places then you can use below extension as well

 

https://redchamps.com/product-links-in-sales-order-magento-2-extension.html

 

Highlighted

Re: How to show product image for ordered items on admin panel order view

It's working, but the thing is that if I delete a product which was inside the order, I am getting the following error:

 

 Information Changes have been made to this section that have not been saved. This tab contains invalid data. Please resolve this before saving.