Magento_Catalog Custom Gallery customization event

Question

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.

Answer 1

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.