how to display product image in sales/order/view/ page

Question

I am trying to customize sales order view page and I want to show product image in order view page how can we achieve this. and the path of the file is

vendor\magento\module-sales\view\frontend\templates\order\items.phtml

Answer 1

We shouldn't edit vendor\magento\module-sales\view\frontend\templates\order\items.phtml because the file vendor/magento/module-sales/view/frontend/templates/order/items/renderer/default.phtml is used for order item html render.

The block Magento\Sales\Block\Order\Item\Renderer\DefaultRenderer is the block of this template. I'm going to use Dependency Injection to override this block.

Step 1: Create module xml:

#app/code/Boolfly/SalesOrder/etc/module.xml

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
           xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Boolfly_SalesOrder" setup_version="1.0.0">
    </module>
</config>

Step 2: Create Dependency Injection xml

#app/code/Boolfly/SalesOrder/etc/di.xml

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <preference for="Magento\Sales\Block\Order\Item\Renderer\DefaultRenderer"
                type="Boolfly\SalesOrder\Block\Item\Renderer"/>
</config>

We declared our new block that will override the default item render. Basically, when someone asks for an instance of Magento\Sales\Block\Order\Item\Renderer\DefaultRenderer, we will give it an instance of the Boolfly\SalesOrder\Block\Item\Renderer. We read more here: http://devdocs.magento.com/guides/v2.0/extension-dev-guide/depend-inj.html

Step 3: Create our block

#app/code/Boolfly/SalesOrder/Block/Item/Renderer.php
<?php

namespace Boolfly\SalesOrder\Block\Item;

use Magento\Sales\Block\Order\Item\Renderer\DefaultRenderer as DefaultRenderer;

class Renderer extends DefaultRenderer
{
    /**
     * Magento string lib
     *
     * @var \Magento\Framework\Stdlib\StringUtils
     */
    protected $string;

    /**
     * @var \Magento\Catalog\Model\Product\OptionFactory
     */
    protected $_productOptionFactory;

    /**
     * @var \Magento\Catalog\Block\Product\ImageBuilder
     */
    protected $imageBuilder;

    /**
     * @param \Magento\Framework\View\Element\Template\Context $context
     * @param \Magento\Framework\Stdlib\StringUtils $string
     * @param \Magento\Catalog\Model\Product\OptionFactory $productOptionFactory
     * @param array $data
     */
    public function __construct(
        \Magento\Framework\View\Element\Template\Context $context,
        \Magento\Framework\Stdlib\StringUtils $string,
        \Magento\Catalog\Model\Product\OptionFactory $productOptionFactory,
        \Magento\Catalog\Block\Product\ImageBuilder $imageBuilder,
        array $data = []
    ) {
        $this->imageBuilder = $imageBuilder;
        parent::__construct($context, $string, $productOptionFactory, $data);
    }

    /**
     * Get item product
     *
     * @return \Magento\Catalog\Model\Product
     * @codeCoverageIgnore
     */
    public function getProduct()
    {
        return $this->getItem()->getProduct();
    }

    /**
     * Identify the product from which thumbnail should be taken.
     *
     * @return \Magento\Catalog\Model\Product
     * @codeCoverageIgnore
     */
    public function getProductForThumbnail()
    {
        return $this->getProduct();
    }

    /**
     * Retrieve product image
     *
     * @param \Magento\Catalog\Model\Product $product
     * @param string $imageId
     * @param array $attributes
     * @return \Magento\Catalog\Block\Product\Image
     */
    public function getImage($product, $imageId, $attributes = [])
    {
        return $this->imageBuilder->setProduct($product)
            ->setImageId($imageId)
            ->setAttributes($attributes)
            ->create();
    }
}

Our block must be extended from Magento\Sales\Block\Order\Item\Renderer\DefaultRenderer. In the __construct method, there is an initial class: \Magento\Catalog\Block\Product\ImageBuilder, that we used it for working with image. Our getImage method will retrieve product image.In shopping cart, we have already some methods to get the image of product. We should see more here: vendor/magento/module-checkout/Block/Cart/Item/Renderer.php

Step 4: Copy the template from vendor vendor/magento/module-sales/view/frontend/templates/order/items/renderer/default.phtml to our module app/code/Boolfly/SalesOrder/view/frontend/templates/order/items/renderer/default.phtml. And then, add this line to our template:

echo $block->getImage($block->getProductForThumbnail(), 'cart_page_product_thumbnail')->toHtml();

Step 5 and 6: Register our module: create registration file and add our module to app/etc/config.php

#app/code/Boolfly/SalesOrder/registration.php

<?php

\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Boolfly_SalesOrder',
    __DIR__
);

#app/etc/config.php

<?php
return array (
  'modules' => 
  array (
    'Boolfly_SalesOrder' => 1,

Run this CLI: php bin/magento setup:upgrade

Answer 2

Try this one...

$_imagehelper = $this->helper('Magento\Catalog\Helper\Image');
if($childProd = current($_item->getChildrenItems())){
    $productImage = $_imagehelper->init($childProd->getProduct(), 'category_page_list', array('height' => 156 , 'width'=> 170))->getUrl();
}
else{
   $productImage = $_imagehelper->init($_item->getProduct(), 'category_page_list', array('height' => 156 , 'width'=> 170))->getUrl();
}


<img src="<?=$productImage?>" title="<?= $block->escapeHtml($_item->getName()) ?>" alt="<?= $block->escapeHtml($_item->getName()) ?>" />

Answer 3

Finally we got, how to get product image.

$objectManager = \Magento\Framework\App\ObjectManager::getInstance();
$product2 = $objectManager->get('Magento\Catalog\Model\ProductFactory'); 
$product = $product2->create();
$product->load('product_id');
$this->helper('Magento\Catalog\Helper\Product')->getImageUrl($product);
$helper = $this->helper('Magento\Catalog\Helper\Image')->init($product,'cart_page_product_thumbnail') ->constrainOnly(true)->keepAspectRatio(true)->keepFrame(false)->setImageFile($product->getImage())->getUrl();

Using image tag print the image out put.

Answer 4

(Magento 2 get Product Image By ID in Order) Please follow code after:

$_item = $block->getItem();

$objectManager = \Magento\Framework\App\ObjectManager::getInstance();

$_product = $objectManager->get('Magento\Catalog\Model\Product')->load($_item->getProductId());

$imageHelper  = $objectManager->get('\Magento\Catalog\Helper\Image');

$image_url = $imageHelper->init($_product, 'product_page_image_small')->setImageFile($_product->getImage())->resize(100, 100)->getUrl();

100% success :) !

Answer 5

Please will this work for Magento 2.3.1 ?

$_item = $block->getItem();

$objectManager = \Magento\Framework\App\ObjectManager::getInstance();

$_product = $objectManager->get('Magento\Catalog\Model\Product')->load($_item->getProductId());

$imageHelper  = $objectManager->get('\Magento\Catalog\Helper\Image');

$image_url = $imageHelper->init($_product, 'product_page_image_small')->setImageFile($_product->getImage())->resize(100, 100)->getUrl();

Answer 6

Without further info, there's a couple of general tips I can share.

• It looks like you've located the template, items.phtml. Toss a simple debug statement as a sanity check that your template is being used.

.

<script>alert('Actually loading this template!')</script>
<?php die; ?>

If these don't work, then there is either a configuration issue (Magento is not configured to use your theme), or you have not located the correct template.

• On the off chance you're in the wrong template, I would try the simple step of System>Configuration>Advanced>Developer, switch Current Configuration Scope to Default Store View (or your desired store view), Debug>Template Path Hints. Reload your page and you should be able to identify which template is loading.

Once you are certain you're in the correct template, I would suggest following the logic of the shopping cart view. This is a simple demonstration on how to access products and their data, including their images. Example: app/design/frontend/base/default/template/checkout/cart/item/default.phtml. You can see they're doing things like this:

<img src="<?php echo $this->getProductThumbnail()->resize(75); ?>" />

For reference this template defines a row in your shopping cart, /checkout/cart.phtml.

Remember, DO NOT edit core files directly. You may save time in the short run, but 1) you will probably have conflicts when upgrading Magento, and 2) it is a lot more maintainable to keep your visual and behavior changes in your own theme. So copy the template into your theme file, and make your changes in the copy, leaving the core template intact.

Good luck!