From b316fbd51f73235fa64cd65ba3988566e903c0b1 Mon Sep 17 00:00:00 2001 From: Denys Rul Date: Thu, 20 Oct 2016 16:50:50 +0300 Subject: [PATCH] MAGETWO-58437: [Backport] [github #6195, 4101] Gallery doesn't show all images added to configurable options - for 2.1.x --- .../view/type/options/configurable.phtml | 3 +- .../view/frontend/web/js/configurable.js | 82 ++++++++++--------- .../templates/product/view/renderer.phtml | 4 +- .../view/frontend/web/js/swatch-renderer.js | 55 ++++++++----- app/design/frontend/Magento/luma/etc/view.xml | 5 +- 5 files changed, 86 insertions(+), 63 deletions(-) diff --git a/app/code/Magento/ConfigurableProduct/view/frontend/templates/product/view/type/options/configurable.phtml b/app/code/Magento/ConfigurableProduct/view/frontend/templates/product/view/type/options/configurable.phtml index e75831e28cf16..75967a670279f 100644 --- a/app/code/Magento/ConfigurableProduct/view/frontend/templates/product/view/type/options/configurable.phtml +++ b/app/code/Magento/ConfigurableProduct/view/frontend/templates/product/view/type/options/configurable.phtml @@ -35,7 +35,8 @@ $_attributes = $block->decorateArray($block->getAllowAttributes()); "#product_addtocart_form": { "configurable": { "spConfig": getJsonConfig() ?>, - "onlyMainImg": getVar('change_only_base_image', 'Magento_ConfigurableProduct') ?: 'false'; ?> + "gallerySwitchStrategy": "getVar('gallery_switch_strategy', + 'Magento_ConfigurableProduct') ?: 'replace'; ?>" } } } diff --git a/app/code/Magento/ConfigurableProduct/view/frontend/web/js/configurable.js b/app/code/Magento/ConfigurableProduct/view/frontend/web/js/configurable.js index 87b9b34be387b..59b313bcb497d 100644 --- a/app/code/Magento/ConfigurableProduct/view/frontend/web/js/configurable.js +++ b/app/code/Magento/ConfigurableProduct/view/frontend/web/js/configurable.js @@ -29,7 +29,16 @@ define([ mediaGallerySelector: '[data-gallery-role=gallery-placeholder]', mediaGalleryInitial: null, slyOldPriceSelector: '.sly-old-price', - onlyMainImg: false + + /** + * Defines the mechanism of how images of a gallery should be + * updated when user switches between configurations of a product. + * + * As for now value of this option can be either 'replace' or 'prepend'. + * + * @type {String} + */ + gallerySwitchStrategy: 'replace' }, /** @@ -54,6 +63,8 @@ define([ // Setup/configure values to inputs this._configureForValues(); + + $(this.element).trigger('configurable.initialized'); }, /** @@ -83,10 +94,10 @@ define([ this.inputSimpleProduct = this.element.find(options.selectSimpleProduct); - gallery.on('gallery:loaded', function () { - var galleryObject = gallery.data('gallery'); - options.mediaGalleryInitial = galleryObject.returnCurrentImages(); - }); + gallery.data('gallery') ? + this._onGalleryLoaded(gallery) : + gallery.on('gallery:loaded', this._onGalleryLoaded.bind(this, gallery)); + }, /** @@ -257,46 +268,33 @@ define([ */ _changeProductImage: function () { var images, - initialImages = $.extend(true, [], this.options.mediaGalleryInitial), + initialImages = this.options.mediaGalleryInitial, galleryObject = $(this.options.mediaGallerySelector).data('gallery'); - if (this.options.spConfig.images[this.simpleProduct]) { - images = $.extend(true, [], this.options.spConfig.images[this.simpleProduct]); + if (!galleryObject) { + return; } - function updateGallery(imagesArr) { - var imgToUpdate, - mainImg; + images = this.options.spConfig.images[this.simpleProduct]; - mainImg = imagesArr.filter(function (img) { - return img.isMain; - }); + if (images) { + if (this.options.gallerySwitchStrategy === 'prepend') { + images = images.concat(initialImages); + } - imgToUpdate = mainImg.length ? mainImg[0] : imagesArr[0]; - galleryObject.updateDataByIndex(0, imgToUpdate); - galleryObject.seek(1); - } + images = $.extend(true, [], images); - if (galleryObject) { - if (images) { - images.map(function (img) { - img.type = 'image'; - }); + images.forEach(function (img) { + img.type = 'image'; + }); - if (this.options.onlyMainImg) { - updateGallery(images); - } else { - galleryObject.updateData(images) - } - } else { - if (this.options.onlyMainImg) { - updateGallery(initialImages); - } else { - galleryObject.updateData(this.options.mediaGalleryInitial); - $(this.options.mediaGallerySelector).AddFotoramaVideoEvents(); - } - } + galleryObject.updateData(images); + } else { + galleryObject.updateData(initialImages); + $(this.options.mediaGallerySelector).AddFotoramaVideoEvents(); } + + galleryObject.first(); }, /** @@ -504,8 +502,18 @@ define([ } else { $(this.options.slyOldPriceSelector).hide(); } - } + }, + /** + * Callback which fired after gallery gets initialized. + * + * @param {HTMLElement} element - DOM element associated with gallery. + */ + _onGalleryLoaded: function (element) { + var galleryObject = element.data('gallery'); + + this.options.mediaGalleryInitial = galleryObject.returnCurrentImages(); + } }); return $.mage.configurable; diff --git a/app/code/Magento/Swatches/view/frontend/templates/product/view/renderer.phtml b/app/code/Magento/Swatches/view/frontend/templates/product/view/renderer.phtml index 19419d4c0a7ee..478d6da720a79 100644 --- a/app/code/Magento/Swatches/view/frontend/templates/product/view/renderer.phtml +++ b/app/code/Magento/Swatches/view/frontend/templates/product/view/renderer.phtml @@ -16,8 +16,8 @@ "jsonSwatchConfig": getJsonSwatchConfig(); ?>, "mediaCallback": "getMediaCallback() ?>", - "onlyMainImg": getVar('change_only_base_image', - 'Magento_Swatches') ?: 'false'; ?> + "gallerySwitchStrategy": "getVar('gallery_switch_strategy', + 'Magento_ConfigurableProduct') ?: 'replace'; ?>" } } } diff --git a/app/code/Magento/Swatches/view/frontend/web/js/swatch-renderer.js b/app/code/Magento/Swatches/view/frontend/web/js/swatch-renderer.js index dfd4b2bb2da0f..ab2836c950de5 100644 --- a/app/code/Magento/Swatches/view/frontend/web/js/swatch-renderer.js +++ b/app/code/Magento/Swatches/view/frontend/web/js/swatch-renderer.js @@ -190,8 +190,15 @@ define([ // Cache for BaseProduct images. Needed when option unset mediaGalleryInitial: [{}], - // - onlyMainImg: false + /** + * Defines the mechanism of how images of a gallery should be + * updated when user switches between configurations of a product. + * + * As for now value of this option can be either 'replace' or 'prepend'. + * + * @type {String} + */ + gallerySwitchStrategy: 'replace' }, /** @@ -236,11 +243,9 @@ define([ this.element.parents('.product-item-info'); if (isProductViewExist) { - gallery.on('gallery:loaded', function () { - var galleryObject = gallery.data('gallery'); - - options.mediaGalleryInitial = galleryObject.returnCurrentImages(); - }); + gallery.data('gallery') ? + this._onGalleryLoaded(gallery) : + gallery.on('gallery:loaded', this._onGalleryLoaded.bind(this, gallery)); } else { options.mediaGalleryInitial = [{ 'img': $main.find('.product-image-photo').attr('src') @@ -900,26 +905,27 @@ define([ */ updateBaseImage: function (images, context, isProductViewExist) { var justAnImage = images[0], - updateImg, - imagesToUpdate, + initialImages = this.options.mediaGalleryInitial, gallery = context.find(this.options.mediaGallerySelector).data('gallery'), - item; + imagesToUpdate, + isInitial; if (isProductViewExist) { imagesToUpdate = images.length ? this._setImageType($.extend(true, [], images)) : []; + isInitial = _.isEqual(imagesToUpdate, initialImages); - if (this.options.onlyMainImg) { - updateImg = imagesToUpdate.filter(function (img) { - return img.isMain; - }); - item = updateImg.length ? updateImg[0] : imagesToUpdate[0]; - gallery.updateDataByIndex(0, item); + if (this.options.gallerySwitchStrategy === 'prepend' && !isInitial) { + imagesToUpdate = imagesToUpdate.concat(initialImages); + } - gallery.seek(1); - } else { - gallery.updateData(imagesToUpdate); + gallery.updateData(imagesToUpdate); + + if (isInitial) { $(this.options.mediaGallerySelector).AddFotoramaVideoEvents(); } + + gallery.first(); + } else if (justAnImage && justAnImage.img) { context.find('.product-image-photo').attr('src', justAnImage.img); } @@ -971,6 +977,17 @@ define([ } return selectedAttributes; + }, + + /** + * Callback which fired after gallery gets initialized. + * + * @param {HTMLElement} element - DOM element associated with a gallery. + */ + _onGalleryLoaded: function (element) { + var galleryObject = element.data('gallery'); + + this.options.mediaGalleryInitial = galleryObject.returnCurrentImages(); } }); diff --git a/app/design/frontend/Magento/luma/etc/view.xml b/app/design/frontend/Magento/luma/etc/view.xml index e0fc864e00084..12a51ee065edb 100644 --- a/app/design/frontend/Magento/luma/etc/view.xml +++ b/app/design/frontend/Magento/luma/etc/view.xml @@ -253,10 +253,7 @@ - true - - - true + prepend