Magento 2: replace images in an existing fotorama instance

Question

Magento 2.4.2:

I completely rebuilt the way magento displays configurable products. All working fine except I cannot get fotorama to display the images of another product.

The fotorama instance is generated as usual (magento core):

<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() ?>
        }
    }
}

"data" is holding the json encoded image data which looks like this:

Array
(
    [0] => stdClass Object
        (
            [thumb] => https://www.example.com/media/catalog/product/cache/90c100ed90aca17de04ff1ba4c4442ea/s/c/sc-12neu_2.jpg
            [img] => https://www.example.com/media/catalog/product/cache/6d42eae753db076e9ad0d26a0f89b2c2/s/c/sc-12neu_2.jpg
            [full] => https://www.example.com/media/catalog/product/cache/ce44fae85f650a7a849418326db3f5ae/s/c/sc-12neu_2.jpg
            [caption] => Test Product
            [position] => 1
            [isMain] => 1
            [type] => image
            [videoUrl] => 
        )

    [1] => stdClass Object
        (
            [thumb] => https://www.example.com/media/catalog/product/cache/90c100ed90aca17de04ff1ba4c4442ea/s/c/sc-32aw_4_1.jpg
            [img] => https://www.example.com/media/catalog/product/cache/6d42eae753db076e9ad0d26a0f89b2c2/s/c/sc-32aw_4_1.jpg
            [full] => https://www.example.com/media/catalog/product/cache/ce44fae85f650a7a849418326db3f5ae/s/c/sc-32aw_4_1.jpg
            [caption] => Test Product
            [position] => 2
            [isMain] => 
            [type] => image
            [videoUrl] => 
        )

    [2] => stdClass Object
        (
            [thumb] => https://www.example.com/media/catalog/product/cache/90c100ed90aca17de04ff1ba4c4442ea/s/c/sc-32aw2_4_1.jpg
            [img] => https://www.example.com/media/catalog/product/cache/6d42eae753db076e9ad0d26a0f89b2c2/s/c/sc-32aw2_4_1.jpg
            [full] => https://www.example.com/media/catalog/product/cache/ce44fae85f650a7a849418326db3f5ae/s/c/sc-32aw2_4_1.jpg
            [caption] => Test Product
            [position] => 3
            [isMain] => 
            [type] => image
            [videoUrl] => 
        )

)

For each of the child products I generated the json encoded image array in the exact same way. On click I would like to replace the existing gallery with the images of those child products:

<script>
    require([
        'jquery'
    ], function ($) {
        $(function () {
            let $placeholder = $('.gallery-placeholder');
            let gallery = null;

            $placeholder.on('gallery:loaded', function () {
                gallery = $placeholder.data('gallery');
            });

            $('.radio .item').on('click', function(){
                $('.radio .item').removeClass('selected');
                $(this).addClass('selected');

                if (gallery) {
                    let images = $(this).find('script').html();
                    if (images) {
                        // this should replace the existing images...
                        gallery.updateData(images);
                    }
                }
            });
        });
    });
</script>

But nothing happens. No images replaced and no error message. I have checked that the gallery object exists and that the images are all there and properly json encoded.

Does anybody know how to actually replace the images?

Thank you

Answer 1

Found the issue. Instead of gallery.updateData(images); it's got to be gallery.updateData(JSON.parse(images));