Stop simple product images overriding main product gallery after clicking swatches

Question

I've upgraded from 2.1.9 to 2.2.3. Now on a configurable product page when a swatch is selected the product page gallery images get overridden by the simple product image for each swatch.

This didn't used to happen and I can't find a way to stop this behaviour. I only want the configurable product images to show as in the past. I actually only have thumbnails associated with simple products to show at the checkout.

Answer 1

By adding the following code to the theme's view.xml the image from the simple product is now added to the product gallery rather than replacing the one associated with the configurable product.

<vars module="Magento_ConfigurableProduct">
    <var name="gallery_switch_strategy">prepend</var>
</vars>

Answer 2

If you would like to alter the behavior of how the gallery switching happens, I think the function you are looking for is in

vendor/magento/module-swatches/view/frontend/web/js/swatch-renderer.js

called processUpdateBaseImage

This is completely untested, but you can create a mixin and change that function's behavior, something like:

Namespace/Module/view/frontend/requirejs-config.js -

var config = {
    config: {
        mixins: {
            'Magento_Swatches/js/swatch-renderer': {
                'Namespace_Module/js/swatch-renderer-mixin': true
            },
        }
    }
};

Namespace/Module/view/web/js/swatch-renderer-mixin.js -

define(['jquery'], function ($) {
    'use strict';

    var mixin = {
        /**
         * Update [gallery-placeholder] or [product-image-photo]
         * @param {Array} images
         * @param {jQuery} context
         * @param {Boolean} isInProductView
         * @param {Object} gallery
         */
        processUpdateBaseImage: function (images, context, isInProductView, gallery) {
            var justAnImage = images[0],
                initialImages = this.options.mediaGalleryInitial,
                imagesToUpdate,
                isInitial;

            if (isInProductView) {
                imagesToUpdate = images.length ? this._setImageType($.extend(true, [], images)) : [];
                isInitial = _.isEqual(imagesToUpdate, initialImages);

                if (this.options.gallerySwitchStrategy === 'prepend' && !isInitial) {
                    imagesToUpdate = imagesToUpdate.concat(initialImages);
                }

                imagesToUpdate = this._setImageIndex(imagesToUpdate);
                gallery.updateData(imagesToUpdate);

                if (isInitial) {
                    $(this.options.mediaGallerySelector).AddFotoramaVideoEvents();
                } else {
                    $(this.options.mediaGallerySelector).AddFotoramaVideoEvents({
                        selectedOption: this.getProduct(),
                        dataMergeStrategy: this.options.gallerySwitchStrategy
                    });
                }

                gallery.first();

            } else if (justAnImage && justAnImage.img) {
                context.find('.product-image-photo').attr('src', justAnImage.img);
            }
        }
    };

    return function (target) {
        return target.extend(mixin);
    }
});