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 e75831e28cf166290fbb042d6e09705a67442b82..75967a670279fba002fbce666b9f9d440669724b 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": <?php /* @escapeNotVerified */ echo $block->getJsonConfig() ?>,
- "onlyMainImg": <?php /* @escapeNotVerified */ echo $block->getVar('change_only_base_image', 'Magento_ConfigurableProduct') ?: 'false'; ?>
+ "gallerySwitchStrategy": "<?php /* @escapeNotVerified */ echo $block->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 7bea20e78620134fff06d4cd259fee029f4fe637..59b313bcb497ddb64e1fdca9bc480afdbbb2f1d9 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'
},
/**
@@ -85,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));
+
},
/**
@@ -259,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();
},
/**
@@ -506,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 19419d4c0a7eef2db8fe472c80b99f9246828993..478d6da720a79bf38df1bcf0b24ed1cc51061b3c 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": <?php /* @escapeNotVerified */
echo $swatchOptions = $block->getJsonSwatchConfig(); ?>,
"mediaCallback": "<?php /* @escapeNotVerified */ echo $block->getMediaCallback() ?>",
- "onlyMainImg": <?php /* @escapeNotVerified */ echo $block->getVar('change_only_base_image',
- 'Magento_Swatches') ?: 'false'; ?>
+ "gallerySwitchStrategy": "<?php /* @escapeNotVerified */ echo $block->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 54e207c335ffb5b6a007a7774df4e2c4a0760628..c3a352cae5845514d383391ae01e1736955d6235 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
@@ -243,8 +243,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',
// whether swatches are rendered in product list or on product page
inProductList: false
@@ -293,11 +300,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')
@@ -1016,26 +1021,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);
}
@@ -1111,6 +1117,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 e0fc864e000840ebe770a85f6a78506f0d962a2f..12a51ee065edba43c9afde39ce31c2aace3d00a8 100644
--- a/app/design/frontend/Magento/luma/etc/view.xml
+++ b/app/design/frontend/Magento/luma/etc/view.xml
@@ -253,10 +253,7 @@
</vars>
<vars module="Magento_ConfigurableProduct">
- <var name="change_only_base_image">true</var>
- </vars>
- <vars module="Magento_Swatches">
- <var name="change_only_base_image">true</var>
+ <var name="gallery_switch_strategy">prepend</var>
</vars>
<vars module="Js_Bundle">