I want to add custom div after image block of product view page. In that div I will add custom html like add any text, image etc.
Anyone have idea how we add custom div by plugin or observer?
3 Answers
copy the gallery.phtml file from vendor/magento/module-catalog/view/frontend/templates/product/view path to paste app/design/frontend/theme/themename/Magento_Catalog/templates/product/view path and modifie below code.
<div class="gallery-placeholder _block-content-loading" data-gallery-role="gallery-placeholder">
<div data-role="loader" class="loading-mask">
<div class="loader">
<img src="<?php /* @escapeNotVerified */ echo $block->getViewFileUrl('images/loader-1.gif'); ?>"
alt="<?php /* @escapeNotVerified */ echo __('Loading...') ?>">
</div>
</div>
</div>
<div>
Magento 2
</div>
.......
//core code
it will appear your code see pic.
-
Thanks for answer. But I don't want to override files. I want it with plugin or preference. Do you know how we do it with plugin or preference?– RahulCommented Oct 3, 2017 at 5:23
Create a new plugin for getProductDetailsHtml() to add new <div> after product
app/code/Vendor/Module/etc/di.xml
<type name="Magento\Catalog\Block\Product\ListProduct">
<plugin name="plugin_name" type="Vendor\Module\Model\Product" />
</type>
Now create Product.php
app/code/Vendor/Module/Model/Product.php
<?php
namespace Vendor\Module\Model;
class Product
{
public function afterGetProductDetailsHtml($subject, $result)
{
$result .= '<div>Your Custom HTML Here</div>';
return $result;
}
}
answered Oct 4, 2017 at 5:56
-
This will add html after product and price. But thats ok. I already do by this method. Thanks.– RahulCommented Oct 4, 2017 at 5:58
-
@Prince Patel i try with your above code it works! but not display in after image. Commented Nov 1, 2018 at 9:59
There is no plugin will work here, as the whole block is coming from Javascript.
I tried some different way to get rid of the problem.
you can check my answer here
Magento 2.2.1:- How to add text in between main image and thumbnail image
answered Feb 14, 2018 at 12:39
<div>Testing</div>