how to display product image in sales/order/view/ page
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
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.
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()) ?>" />