Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save rubenRP/002d06c7b8d6c6eb44d43e102f86ec38 to your computer and use it in GitHub Desktop.
Save rubenRP/002d06c7b8d6c6eb44d43e102f86ec38 to your computer and use it in GitHub Desktop.
Magento 2 show image in sidebar compare list
<?php
namespace Vendor\Namespace\Plugin;
use Magento\Catalog\Helper\ImageFactory;
use Magento\Catalog\Helper\Product\Compare;
use Magento\Catalog\Model\ProductRepository;
class AddImageToCompareProductsPlugin
{
protected $helper;
protected $imageHelperFactory;
protected $productRepository;
public function __construct(
Compare $helper,
ImageFactory $imageHelperFactory,
ProductRepository $productRepository
)
{
$this->helper = $helper;
$this->imageHelperFactory = $imageHelperFactory;
$this->productRepository = $productRepository;
}
public function afterGetSectionData(\Magento\Catalog\CustomerData\CompareProducts $subject, $result)
{
$images = [];
foreach ($this->helper->getItemCollection() as $item) {
$imageHelper = $this->imageHelperFactory->create();
try {
$product = $this->productRepository->getById($item->getId());
$images[$item->getId()] = $imageHelper->init($product, 'recently_compared_products_grid_content_widget')->getUrl();
} catch (\Exception $ex) {
$images[$item->getId()] = $imageHelper->getDefaultPlaceholderUrl();
}
}
$items = $result['items'];
foreach ($items as &$item) {
$item['image_src'] = $images[$item['id']];
}
$result['items'] = $items;
return $result;
}
}
<?xml version="1.0"?>
<!--
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
<type name="Magento\Catalog\CustomerData\CompareProducts">
<plugin name="addImageToCompareProducts" type="Vendor\Namespace\Plugin\AddImageToCompareProductsPlugin" />
</type>
</config>
<?php
/**
* This is a copy from vendor/magento/module-catalog/view/frontend/templates/product/compare/sidebar.phtml
*/
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
// @codingStandardsIgnoreFile
/* @var $block \Magento\Framework\View\Element\Template */
?>
<div class="block block-compare" data-bind="scope: 'compareProducts'" data-role="compare-products-sidebar">
<div class="block-title">
<strong id="block-compare-heading" role="heading" aria-level="2"><?= /* @escapeNotVerified */ __('Compare Products') ?></strong>
<span class="counter qty no-display" data-bind="text: compareProducts().countCaption, css: {'no-display': !compareProducts().count}"></span>
</div>
<!-- ko if: compareProducts().count -->
<div class="block-content no-display" aria-labelledby="block-compare-heading" data-bind="css: {'no-display': !compareProducts().count}">
<ol id="compare-items" class="product-items product-items-names" data-bind="foreach: compareProducts().items">
<li class="product-item">
<input type="hidden" class="compare-item-id" data-bind="value: id"/>
<img data-bind="attr: {'src' : image_src}" alt="">
<strong class="product-item-name">
<a data-bind="attr: {href: product_url}, html: name" class="product-item-link"></a>
</strong>
<a href="#" data-bind="attr: {'data-post': remove_url}" title="<?= /* @escapeNotVerified */ __('Remove This Item') ?>" class="action delete">
<span><?= /* @escapeNotVerified */ __('Remove This Item') ?></span>
</a>
</li>
</ol>
<div class="actions-toolbar">
<div class="primary">
<a data-bind="attr: {'href': compareProducts().listUrl}" class="action compare primary"><span><?= /* @escapeNotVerified */ __('Compare') ?></span></a>
</div>
<div class="secondary">
<a id="compare-clear-all" href="#" class="action clear" data-post="<?=$block->escapeHtml(
$this->helper('Magento\Catalog\Helper\Product\Compare')->getPostDataClearList()
) ?>">
<span><?= /* @escapeNotVerified */ __('Clear All') ?></span>
</a>
</div>
</div>
</div>
<!-- /ko -->
<!-- ko ifnot: compareProducts().count -->
<div class="empty"><?= /* @escapeNotVerified */ __('You have no items to compare.') ?></div>
<!-- /ko -->
</div>
<script type="text/x-magento-init">
{"[data-role=compare-products-sidebar]": {"Magento_Ui/js/core/app": <?= /* @escapeNotVerified */ $block->getJsLayout() ?>}}
</script>
@gr1zix
Copy link

gr1zix commented Aug 17, 2022

Thanks for sharing!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment