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