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
