0

How do I code grouped product's children product to open fotorama gallary page when clicking on children product picture?

Grouped Products Page enter image description here Fotorama Gallary Page enter image description here Magento_GroupedProduct\templates\product\view\type\grouped.phtml edited:

<?php $_item = get('\Magento\Catalog\Model\Product\Gallery\ReadHandler'); ?>
<?php $readHandler->execute($_item); ?>
<?php $images=$_item->getMediaGalleryImages(); ?>

<td>
            <div data-gallery-role="gallery-placeholder-<?php echo $_item->getId(); ?>">
            <img alt="main product photo" class="gallery-placeholder__image" src="<?= $block->getUrl('pub/media/catalog').'product'.$childProduct->getImage() ?>" alt width="200"/>
        </div>
            <script type="text/x-magento-init">
                {
                    "[data-gallery-role=gallery-placeholder-<?php echo $_item->getId(); ?>]": {
                        "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>
            </td>

Is this correctly added? Isn't data value in script going to be a issue with having specific urls? Is that where $images should be added? I am getting error on line 1 code $_item = get('\Magento\Catalog\Model\Product\Gallery\ReadHandler');

1 Answer 1

0

Add media images in $_item object using class Magento\Catalog\Model\Product\Gallery\ReadHandler

$readHandler->execute($_item); //$readHandler is object of above mentioned class

Get images from item object.

$images=$_item->getMediaGalleryImages();

Add and make URLs dynamic in following HTML for each item and hide/show on click of URL link.

Also make value of attribute data-gallery-role dynamic. You can use $_item->getId() in place of "1" e.g.

data-gallery-role="gallery-placeholder-<?php echo $_item->getId(); ?>"

HTML

<div class="gallery-placeholder _block-content-loading" data-gallery-role="gallery-placeholder-1">
    <img
        alt="main product photo"
        class="gallery-placeholder__image"
        src="https://localhost/media/catalog/product/cache/ab3d160fedea4cd0de2e67da8a2de7a6/l/u/luma-yoga-strap.jpg"
    />
</div>

<script type="text/x-magento-init">
    {
        "[data-gallery-role=gallery-placeholder-1]": {
            "mage/gallery/gallery": {
                "mixins":["magnifier/magnify"],
                "magnifierOpts": {"fullscreenzoom":"20","top":"","left":"","width":"","height":"","eventType":"hover","enabled":false,"mode":"outside"},
                "data": [{"thumb":"https:\/\/cert.local.com\/media\/catalog\/product\/cache\/078cff84acf01b3300b65566406c4a02\/l\/u\/luma-yoga-strap.jpg","img":"https:\/\/cert.local.com\/media\/catalog\/product\/cache\/ab3d160fedea4cd0de2e67da8a2de7a6\/l\/u\/luma-yoga-strap.jpg","full":"https:\/\/cert.local.com\/media\/catalog\/product\/cache\/77f6e83a0608844e1a4dddeb99e4ea45\/l\/u\/luma-yoga-strap.jpg","caption":"Image","position":"1","isMain":true,"type":"image","videoUrl":null},{"thumb":"https:\/\/cert.local.com\/media\/catalog\/product\/cache\/078cff84acf01b3300b65566406c4a02\/l\/u\/luma-yoga-strap_1.jpg","img":"https:\/\/cert.local.com\/media\/catalog\/product\/cache\/ab3d160fedea4cd0de2e67da8a2de7a6\/l\/u\/luma-yoga-strap_1.jpg","full":"https:\/\/cert.local.com\/media\/catalog\/product\/cache\/77f6e83a0608844e1a4dddeb99e4ea45\/l\/u\/luma-yoga-strap_1.jpg","caption":"Sprite Yoga Strap 6 foot","position":"2","isMain":false,"type":"image","videoUrl":null}],
                "options": {"nav":"thumbs","loop":true,"keyboard":true,"arrows":true,"allowfullscreen":true,"showCaption":false,"width":700,"thumbwidth":88,"thumbheight":110,"height":700,"transitionduration":500,"transition":"slide","navarrows":true,"navtype":"slides","navdir":"horizontal"},
                "fullscreen": {"nav":"thumbs","loop":true,"navdir":"horizontal","navarrows":false,"navtype":"slides","arrows":true,"showCaption":false,"transitionduration":500,"transition":"slide"},
                 "breakpoints": {"mobile":{"conditions":{"max-width":"767px"},"options":{"options":{"nav":"dots"}}}}            }
        }
    }
</script>
7
  • Hello, thank you for the advanced code. I am a beginer with coding, but do I add all this into the code file I just shared? grouped.phtml inside Magento_GroupedProduct module?
    – i37Ow
    Commented Feb 14, 2022 at 21:23
  • No, we should not edit any file under vendor directory. Override this file in a custom extension or custom theme. Commented Feb 15, 2022 at 4:53
  • I think I am misunderstanding much. I edited my post and added code. What am I doing wrong?
    – i37Ow
    Commented Feb 15, 2022 at 10:46
  • Any advice or example how this should look to work?
    – i37Ow
    Commented Feb 17, 2022 at 21:59
  • Which file(s) you added/edited? Can you share code for all? What error you are facing? Commented Feb 18, 2022 at 14:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.