Skip to content

Commit b316fbd

Browse files
Denys Ruleug123
Denys Rul
authored and
eug123
committed
MAGETWO-58437: [Backport] [github #6195, 4101] Gallery doesn't show all images added to configurable options - for 2.1.x
1 parent de3b4df commit b316fbd

File tree

5 files changed

+86
-63
lines changed

5 files changed

+86
-63
lines changed

‎app/code/Magento/ConfigurableProduct/view/frontend/templates/product/view/type/options/configurable.phtml

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,8 @@ $_attributes = $block->decorateArray($block->getAllowAttributes());
3535
"#product_addtocart_form": {
3636
"configurable": {
3737
"spConfig": <?php /* @escapeNotVerified */ echo $block->getJsonConfig() ?>,
38-
"onlyMainImg": <?php /* @escapeNotVerified */ echo $block->getVar('change_only_base_image', 'Magento_ConfigurableProduct') ?: 'false'; ?>
38+
"gallerySwitchStrategy": "<?php /* @escapeNotVerified */ echo $block->getVar('gallery_switch_strategy',
39+
'Magento_ConfigurableProduct') ?: 'replace'; ?>"
3940
}
4041
}
4142
}

‎app/code/Magento/ConfigurableProduct/view/frontend/web/js/configurable.js

Lines changed: 45 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,16 @@ define([
2929
mediaGallerySelector: '[data-gallery-role=gallery-placeholder]',
3030
mediaGalleryInitial: null,
3131
slyOldPriceSelector: '.sly-old-price',
32-
onlyMainImg: false
32+
33+
/**
34+
* Defines the mechanism of how images of a gallery should be
35+
* updated when user switches between configurations of a product.
36+
*
37+
* As for now value of this option can be either 'replace' or 'prepend'.
38+
*
39+
* @type {String}
40+
*/
41+
gallerySwitchStrategy: 'replace'
3342
},
3443

3544
/**
@@ -54,6 +63,8 @@ define([
5463

5564
// Setup/configure values to inputs
5665
this._configureForValues();
66+
67+
$(this.element).trigger('configurable.initialized');
5768
},
5869

5970
/**
@@ -83,10 +94,10 @@ define([
8394

8495
this.inputSimpleProduct = this.element.find(options.selectSimpleProduct);
8596

86-
gallery.on('gallery:loaded', function () {
87-
var galleryObject = gallery.data('gallery');
88-
options.mediaGalleryInitial = galleryObject.returnCurrentImages();
89-
});
97+
gallery.data('gallery') ?
98+
this._onGalleryLoaded(gallery) :
99+
gallery.on('gallery:loaded', this._onGalleryLoaded.bind(this, gallery));
100+
90101
},
91102

92103
/**
@@ -257,46 +268,33 @@ define([
257268
*/
258269
_changeProductImage: function () {
259270
var images,
260-
initialImages = $.extend(true, [], this.options.mediaGalleryInitial),
271+
initialImages = this.options.mediaGalleryInitial,
261272
galleryObject = $(this.options.mediaGallerySelector).data('gallery');
262273

263-
if (this.options.spConfig.images[this.simpleProduct]) {
264-
images = $.extend(true, [], this.options.spConfig.images[this.simpleProduct]);
274+
if (!galleryObject) {
275+
return;
265276
}
266277

267-
function updateGallery(imagesArr) {
268-
var imgToUpdate,
269-
mainImg;
278+
images = this.options.spConfig.images[this.simpleProduct];
270279

271-
mainImg = imagesArr.filter(function (img) {
272-
return img.isMain;
273-
});
280+
if (images) {
281+
if (this.options.gallerySwitchStrategy === 'prepend') {
282+
images = images.concat(initialImages);
283+
}
274284

275-
imgToUpdate = mainImg.length ? mainImg[0] : imagesArr[0];
276-
galleryObject.updateDataByIndex(0, imgToUpdate);
277-
galleryObject.seek(1);
278-
}
285+
images = $.extend(true, [], images);
279286

280-
if (galleryObject) {
281-
if (images) {
282-
images.map(function (img) {
283-
img.type = 'image';
284-
});
287+
images.forEach(function (img) {
288+
img.type = 'image';
289+
});
285290

286-
if (this.options.onlyMainImg) {
287-
updateGallery(images);
288-
} else {
289-
galleryObject.updateData(images)
290-
}
291-
} else {
292-
if (this.options.onlyMainImg) {
293-
updateGallery(initialImages);
294-
} else {
295-
galleryObject.updateData(this.options.mediaGalleryInitial);
296-
$(this.options.mediaGallerySelector).AddFotoramaVideoEvents();
297-
}
298-
}
291+
galleryObject.updateData(images);
292+
} else {
293+
galleryObject.updateData(initialImages);
294+
$(this.options.mediaGallerySelector).AddFotoramaVideoEvents();
299295
}
296+
297+
galleryObject.first();
300298
},
301299

302300
/**
@@ -504,8 +502,18 @@ define([
504502
} else {
505503
$(this.options.slyOldPriceSelector).hide();
506504
}
507-
}
505+
},
508506

507+
/**
508+
* Callback which fired after gallery gets initialized.
509+
*
510+
* @param {HTMLElement} element - DOM element associated with gallery.
511+
*/
512+
_onGalleryLoaded: function (element) {
513+
var galleryObject = element.data('gallery');
514+
515+
this.options.mediaGalleryInitial = galleryObject.returnCurrentImages();
516+
}
509517
});
510518

511519
return $.mage.configurable;

‎app/code/Magento/Swatches/view/frontend/templates/product/view/renderer.phtml

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,8 @@
1616
"jsonSwatchConfig": <?php /* @escapeNotVerified */
1717
echo $swatchOptions = $block->getJsonSwatchConfig(); ?>,
1818
"mediaCallback": "<?php /* @escapeNotVerified */ echo $block->getMediaCallback() ?>",
19-
"onlyMainImg": <?php /* @escapeNotVerified */ echo $block->getVar('change_only_base_image',
20-
'Magento_Swatches') ?: 'false'; ?>
19+
"gallerySwitchStrategy": "<?php /* @escapeNotVerified */ echo $block->getVar('gallery_switch_strategy',
20+
'Magento_ConfigurableProduct') ?: 'replace'; ?>"
2121
}
2222
}
2323
}

‎app/code/Magento/Swatches/view/frontend/web/js/swatch-renderer.js

Lines changed: 36 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -190,8 +190,15 @@ define([
190190
// Cache for BaseProduct images. Needed when option unset
191191
mediaGalleryInitial: [{}],
192192

193-
//
194-
onlyMainImg: false
193+
/**
194+
* Defines the mechanism of how images of a gallery should be
195+
* updated when user switches between configurations of a product.
196+
*
197+
* As for now value of this option can be either 'replace' or 'prepend'.
198+
*
199+
* @type {String}
200+
*/
201+
gallerySwitchStrategy: 'replace'
195202
},
196203

197204
/**
@@ -236,11 +243,9 @@ define([
236243
this.element.parents('.product-item-info');
237244

238245
if (isProductViewExist) {
239-
gallery.on('gallery:loaded', function () {
240-
var galleryObject = gallery.data('gallery');
241-
242-
options.mediaGalleryInitial = galleryObject.returnCurrentImages();
243-
});
246+
gallery.data('gallery') ?
247+
this._onGalleryLoaded(gallery) :
248+
gallery.on('gallery:loaded', this._onGalleryLoaded.bind(this, gallery));
244249
} else {
245250
options.mediaGalleryInitial = [{
246251
'img': $main.find('.product-image-photo').attr('src')
@@ -900,26 +905,27 @@ define([
900905
*/
901906
updateBaseImage: function (images, context, isProductViewExist) {
902907
var justAnImage = images[0],
903-
updateImg,
904-
imagesToUpdate,
908+
initialImages = this.options.mediaGalleryInitial,
905909
gallery = context.find(this.options.mediaGallerySelector).data('gallery'),
906-
item;
910+
imagesToUpdate,
911+
isInitial;
907912

908913
if (isProductViewExist) {
909914
imagesToUpdate = images.length ? this._setImageType($.extend(true, [], images)) : [];
915+
isInitial = _.isEqual(imagesToUpdate, initialImages);
910916

911-
if (this.options.onlyMainImg) {
912-
updateImg = imagesToUpdate.filter(function (img) {
913-
return img.isMain;
914-
});
915-
item = updateImg.length ? updateImg[0] : imagesToUpdate[0];
916-
gallery.updateDataByIndex(0, item);
917+
if (this.options.gallerySwitchStrategy === 'prepend' && !isInitial) {
918+
imagesToUpdate = imagesToUpdate.concat(initialImages);
919+
}
917920

918-
gallery.seek(1);
919-
} else {
920-
gallery.updateData(imagesToUpdate);
921+
gallery.updateData(imagesToUpdate);
922+
923+
if (isInitial) {
921924
$(this.options.mediaGallerySelector).AddFotoramaVideoEvents();
922925
}
926+
927+
gallery.first();
928+
923929
} else if (justAnImage && justAnImage.img) {
924930
context.find('.product-image-photo').attr('src', justAnImage.img);
925931
}
@@ -971,6 +977,17 @@ define([
971977
}
972978

973979
return selectedAttributes;
980+
},
981+
982+
/**
983+
* Callback which fired after gallery gets initialized.
984+
*
985+
* @param {HTMLElement} element - DOM element associated with a gallery.
986+
*/
987+
_onGalleryLoaded: function (element) {
988+
var galleryObject = element.data('gallery');
989+
990+
this.options.mediaGalleryInitial = galleryObject.returnCurrentImages();
974991
}
975992
});
976993

‎app/design/frontend/Magento/luma/etc/view.xml

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -253,10 +253,7 @@
253253
</vars>
254254

255255
<vars module="Magento_ConfigurableProduct">
256-
<var name="change_only_base_image">true</var>
257-
</vars>
258-
<vars module="Magento_Swatches">
259-
<var name="change_only_base_image">true</var>
256+
<var name="gallery_switch_strategy">prepend</var>
260257
</vars>
261258

262259
<vars module="Js_Bundle">

0 commit comments

Comments
 (0)