0

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.

0

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>
  • I would still like to find a way to stop the simple product image appearing in the configurable product gallery altogether? I don't need separate photos for each simple product. I only have thumbnails associated with the simple products but they are being shown in the gallery when the swatch image is clicked on. Even though Hide from Product Page is checked. – SilkSpin Apr 20 '18 at 22:52
0

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);
    }
});

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.