Issue
I want to add custom code in gallery.phtml in the PDP section on my custom module. I tried this=> called default the block in catalog_product_view.xml
<referenceBlock name="product.info.media.image">
<action method="setTemplate">
<argument name="template" xsi:type="string">Ajith_Mymodule::product/view/gallery.phtml</argument>
</action>
</referenceBlock>
loaded gallery.phtml with and without default code, nothing works well for me. Am I'm trying the correct method or did anybody give me the idea to do this?
Solution
This method is working properly
<?php
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
/**
* Product media data template
*
* @var $block \Magento\Catalog\Block\Product\View\Gallery
*/
?>
<?php
$images = $block->getGalleryImages()->getItems();
$mainImage = current(array_filter($images, function ($img) use ($block) {
return $block->isMainImage($img);
}));
if (!empty($images) && empty($mainImage)) {
$mainImage = $block->getGalleryImages()->getFirstItem();
}
$helper = $block->getData('imageHelper');
$mainImageData = $mainImage ?
$mainImage->getData('medium_image_url') :
$helper->getDefaultPlaceholderUrl('image');
?>
<div class="gallery-placeholder _block-content-loading" data-gallery-role="gallery-placeholder">
<img
alt="main product photo"
class="gallery-placeholder__image"
src="<?= /* @noEscape */ $mainImageData ?>"
/>
</div>
<script type="text/x-magento-init">
{
"[data-gallery-role=gallery-placeholder]": {
"mage/gallery/gallery": {
"mixins":["magnifier/magnify"],
"magnifierOpts": <?= /* @noEscape */ $block->getMagnifier() ?>,
"data": <?= /* @noEscape */ $block->getGalleryImagesJson() ?>,
"options": <?= /* @noEscape */ $block->getGalleryOptions()->getOptionsJson() ?>,
"fullscreen": <?= /* @noEscape */ $block->getGalleryOptions()->getFSOptionsJson() ?>,
"breakpoints": <?= /* @noEscape */ $block->getBreakpoints() ?>
}
}
}
</script>
call this in our custom template
Answered By - Ajith Answer Checked By - Senaida (PHPFixing Volunteer)
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.