Magento2 Swatches – Image Does Not Slide to First Image

configurable-swatchesmagento2swatches

I have a problem with product gallery changing swatch (f.e. color). I have a configurable product with different size and different color. each configurable product has it's own color image (I added "base, small, thumb, swatch to the image).

On product page first all images are loaded from parent product. If i click on swatch color (f. e. blue) the image for blue product is loaded and added on first position. but the product gallery is not starting/sliding to first image where color image is shown. Gallery shows same picture f.e. 5th position. Default behaviour of Magento is to slide automatically to first image, but it does not.

hope, somebody can help me to fix this issue.
enter image description here
enter image description here
Thanks!
martin

Best Answer

... I think, I found the bug. Magento removed sliding to first image in swatch-render.js:

 updateBaseImage: function (images, context, isInProductView) {
        var justAnImage = images[0],
            initialImages = this.options.mediaGalleryInitial,
            imagesToUpdate,
            gallery = context.find(this.options.mediaGallerySelector).data('gallery'),
            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);

            if (!_.isUndefined(gallery)) {
                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);
        }
    },

just add gallery.first(); in line 1253 in vendor/magento/module-swatches/view/frontend/web/js/swatch-renderer.js

Copy js file to your theme /app/design/frontend/Vendor/default/Magento_Swatches/web/js

Related Topic