0

What event do I have to listen for in Javascript to detect that the user has changed the customization in a customizable product?

I am working on a custom gallery for my product page, but i am stumped by how fotorama (the default gallery) is able to change images automatically when there is a change in a customization product, it doesn't seem to auto-re-render the gallery when there is a change in customization.

0

If you look inside vendor/magento/module-configurable-product/view/frontend/web/js/configurable.js you will find some methods thats fire when a user changes option.

The method responsible for updating the gallery images when the user changes an option is _changeProductImage.

Some other methods that may prove useful to you:

  • _configure
  • _configureElement
  • _onGalleryLoaded

So to override this method add the following files:

requirejs-config.js

var config = {
    config: {
        mixins: {
            'Magento_ConfigurableProduct/js/configurable': {
                'YourVendor_ProductGallery/js/configurable-mixin': true
            }
        }
    }
} 

configurable-mixin.js

define(['jquery', 'mage/template', 'productGallery'], function($, template, productGallery){
    return function(originalWidget){
        $.widget(
            'mage.configurable', $['mage']['configurable'], {
                _changeProductImage: function () {
                    console.log('User has changed a product option!;);
                }
            }
        );

        return $['mage']['configurable'];
    };
});

You can see a real working example on this module which replaces the Fotorama gallery with a Slick slider gallery - https://github.com/Space48/ProductGallery.

| improve this answer | |

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.