0

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. .

5
  • you want to change images based on product attribute manufactures_guarantee_length? – Rizwan Khan Sep 22 '20 at 4:50
  • @RizwanKhan yes, if we select attribute then the image change like I select guaranty_1 attribute value, then guaranty_1.jpg display – rakesh. sumeshara Sep 22 '20 at 4:52
  • this is product attribute you are talking about not a custom option, right? – Rizwan Khan Sep 22 '20 at 4:54
  • 1
    @RizwanKhan i have created a custom dropdown attribute and its work on product level, – rakesh. sumeshara Sep 22 '20 at 4:56
  • 1
    @RizwanKhan Yes, this is product attribute, – rakesh. sumeshara Sep 22 '20 at 4:58
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.

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.