3

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

  • can i get your code? – zus Dec 5 '17 at 12:30
11

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

  • What to do for backend @Khoa – Yasar Arafath Dec 19 '18 at 12:36
5

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.

  • 4
    Magento strictly discouraged the usage of Object Manager directly. We should find another way. – Khoa TruongDinh Apr 25 '16 at 11:00
  • yes khoa i know that ,but i am given hint how to solve , developer should implement using plugin concept. – Anand Ontigeri Sep 3 '16 at 6:32
  • 1
    Yeah! You should update your answer. – Khoa TruongDinh Sep 3 '16 at 6:34
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()) ?>" />
2

(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 :) !

0

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!

0

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();

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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