how to change image when we select dropdown value?

Question

I have created a custom dropdown attribute name "manufactures_guarantee_length", and its value like 1_year_guaranty,2_year_guaranty,3_year_guaranty, more, in the product details page, I call that attribute, now when we change the attribute value in any product that kind of image should change at the front-end product detail page,

for that, I have created a layout file catalog_product_view.xml and guaranty.phtml file, in phtml file, I code like

<?php $product = $block->getProduct(); ?>
<?php echo $product->getData('manufactures_guarantee_length'); ?>

so I get the value of dropdown, so now how to change like Image as per dropdown? please suggest me on this. Thanks in advance. .

Answer 1

For changing the image on the product view page of the gallery You first need to override gallary.phtml file in your theme or your custom module.

view/frontend/templates/product/gallary.phtml

Add the below script in gallary.phtml to change the JSON data of the gallery and load the images accordingly. You need to add your custom conditions for the images.

require([
        'jquery',
        'mage/gallery/gallery'
], function ($, gallery) {
    $(document).ready(function(){

        var allimgsobj = '<?php echo $block->getGalleryImagesJson(); ?>';
        var manufacturer = "<?php echo $block->getProduct()->getData('manufactures_guarantee_length'); ?>";

        $('.gallery-placeholder').on('gallery:loaded', function () {

            var res = [{}];
            $.each(JSON.parse(allimgsobj), function(i, obj) {
                if(obj.caption != null && obj.caption.toLowerCase() == manufacturer.toLowerCase()){
                    res[i] = obj;
                }
            });

            var gallery = $('.gallery-placeholder').data('gallery');
            gallery.fotorama.load(res); // this will reload the gallary with fresh json data
            gallery.first(); // this will select first image on load in gallary
        });
    });
});

my condition is based on caption of images, you can change it to name of the images.