1

I want to add custom div on product listing page under class="product-image-container" <span> without override product list.phtml & catalog_category_view.xml file.

And i also want to display dynamic data in to my custom div from database is it possible? if yes then how can i achieve this thing. for more reference check below screen-shoot.

enter image description here

Any help would be Appreciated!

  • you can add the data by using only refrence is available on list page. But your requirement is to add between, then you need to overide the file. – Dhiren Vasoya Oct 31 '18 at 14:02
  • There is no any other way without override file? – Chirag Patel Nov 1 '18 at 4:50
1

Create di.xml file at /app/code/Vendor/Module/etc/frontend/di.xml :

<type name="Magento\Catalog\Block\Product\ListProduct">
    <plugin name="block-product-list" type="Vender\Module\Plugin\ProductList"/>
</type>

Create Plugin file ProductList.php at /app/code/Vendor/Module/Plugin :

<?php
namespace Vender\Module\Plugin;

class ProductList
{
    /**
     * @var \Magento\Framework\View\LayoutInterface
     */
    protected $layout;   
    public function __construct(
        ...............
        \Magento\Framework\View\LayoutInterface $layout,
        ...............
    ) {
        ...............
        $this->layout = $layout;
        ...............
    }
    public function aroundGetProductDetailsHtml(
        \Magento\Catalog\Block\Product\ListProduct $subject,
        \Closure $proceed,
        \Magento\Catalog\Model\Product $product
    ) {
        return $this->layout->createBlock('VendorName\ModuleName\Block\BlockName')->setTemplate('VendorName_ModuleName::yourphtml.phtml')->toHtml();
        /*If you want to specific product pass then you need to call phtml like 
        $this->layout->createBlock('VendorName\ModuleName\Block\BlockName')->setProduct($product)->setTemplate('VendorName_ModuleName::yourphtml.phtml')->toHtml();
        */
    }               
}

Hope, It may be helpful for you.

  • Thanks, where i call phtml file because i want to add <div> inside this class="product-image-container" div as i mentioned in my post. +1 for your help :) – Chirag Patel Nov 1 '18 at 4:47
  • You need to inject class for layout and then call phtml file. See my updated answer. – Rohan Hapani Nov 1 '18 at 5:05
  • Tnxs man it's work!, but position of my custom div is not as per my screen-shoot. can you explain how can i add this inside class="product-image-container" – Chirag Patel Nov 1 '18 at 5:59
  • please try to use aroundGetImage() function. It may be work. – Rohan Hapani Nov 1 '18 at 8:40
  • Is it working or you can get reference from here vendor/magento/module-catalog/Block/Product/ListProduct.php – Rohan Hapani Nov 1 '18 at 9:46

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.