0

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

0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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