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

Question

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

Grouped Products Page Fotorama Gallary Page 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');

Answer 1

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>