Skip to content

Commit 5c5c43e

Browse files
eug123eug123
committed
Merge remote-tracking branch 'origin/MAGETWO-57210' into pr-develop
2 parents 0b0982f + de25f5d commit 5c5c43e

File tree

5 files changed

+84
-63
lines changed

5 files changed

+84
-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: 43 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
/**
@@ -85,10 +94,10 @@ define([
8594

8695
this.inputSimpleProduct = this.element.find(options.selectSimpleProduct);
8796

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

94103
/**
@@ -259,46 +268,33 @@ define([
259268
*/
260269
_changeProductImage: function () {
261270
var images,
262-
initialImages = $.extend(true, [], this.options.mediaGalleryInitial),
271+
initialImages = this.options.mediaGalleryInitial,
263272
galleryObject = $(this.options.mediaGallerySelector).data('gallery');
264273

265-
if (this.options.spConfig.images[this.simpleProduct]) {
266-
images = $.extend(true, [], this.options.spConfig.images[this.simpleProduct]);
274+
if (!galleryObject) {
275+
return;
267276
}
268277

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

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

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

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

288-
if (this.options.onlyMainImg) {
289-
updateGallery(images);
290-
} else {
291-
galleryObject.updateData(images)
292-
}
293-
} else {
294-
if (this.options.onlyMainImg) {
295-
updateGallery(initialImages);
296-
} else {
297-
galleryObject.updateData(this.options.mediaGalleryInitial);
298-
$(this.options.mediaGallerySelector).AddFotoramaVideoEvents();
299-
}
300-
}
291+
galleryObject.updateData(images);
292+
} else {
293+
galleryObject.updateData(initialImages);
294+
$(this.options.mediaGallerySelector).AddFotoramaVideoEvents();
301295
}
296+
297+
galleryObject.first();
302298
},
303299

304300
/**
@@ -506,8 +502,18 @@ define([
506502
} else {
507503
$(this.options.slyOldPriceSelector).hide();
508504
}
509-
}
505+
},
510506

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+
}
511517
});
512518

513519
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
@@ -243,8 +243,15 @@ define([
243243
// Cache for BaseProduct images. Needed when option unset
244244
mediaGalleryInitial: [{}],
245245

246-
//
247-
onlyMainImg: false,
246+
/**
247+
* Defines the mechanism of how images of a gallery should be
248+
* updated when user switches between configurations of a product.
249+
*
250+
* As for now value of this option can be either 'replace' or 'prepend'.
251+
*
252+
* @type {String}
253+
*/
254+
gallerySwitchStrategy: 'replace',
248255

249256
// whether swatches are rendered in product list or on product page
250257
inProductList: false
@@ -293,11 +300,9 @@ define([
293300
this.element.parents('.product-item-info');
294301

295302
if (isProductViewExist) {
296-
gallery.on('gallery:loaded', function () {
297-
var galleryObject = gallery.data('gallery');
298-
299-
options.mediaGalleryInitial = galleryObject.returnCurrentImages();
300-
});
303+
gallery.data('gallery') ?
304+
this._onGalleryLoaded(gallery) :
305+
gallery.on('gallery:loaded', this._onGalleryLoaded.bind(this, gallery));
301306
} else {
302307
options.mediaGalleryInitial = [{
303308
'img': $main.find('.product-image-photo').attr('src')
@@ -1016,26 +1021,27 @@ define([
10161021
*/
10171022
updateBaseImage: function (images, context, isProductViewExist) {
10181023
var justAnImage = images[0],
1019-
updateImg,
1020-
imagesToUpdate,
1024+
initialImages = this.options.mediaGalleryInitial,
10211025
gallery = context.find(this.options.mediaGallerySelector).data('gallery'),
1022-
item;
1026+
imagesToUpdate,
1027+
isInitial;
10231028

10241029
if (isProductViewExist) {
10251030
imagesToUpdate = images.length ? this._setImageType($.extend(true, [], images)) : [];
1031+
isInitial = _.isEqual(imagesToUpdate, initialImages);
10261032

1027-
if (this.options.onlyMainImg) {
1028-
updateImg = imagesToUpdate.filter(function (img) {
1029-
return img.isMain;
1030-
});
1031-
item = updateImg.length ? updateImg[0] : imagesToUpdate[0];
1032-
gallery.updateDataByIndex(0, item);
1033+
if (this.options.gallerySwitchStrategy === 'prepend' && !isInitial) {
1034+
imagesToUpdate = imagesToUpdate.concat(initialImages);
1035+
}
10331036

1034-
gallery.seek(1);
1035-
} else {
1036-
gallery.updateData(imagesToUpdate);
1037+
gallery.updateData(imagesToUpdate);
1038+
1039+
if (isInitial) {
10371040
$(this.options.mediaGallerySelector).AddFotoramaVideoEvents();
10381041
}
1042+
1043+
gallery.first();
1044+
10391045
} else if (justAnImage && justAnImage.img) {
10401046
context.find('.product-image-photo').attr('src', justAnImage.img);
10411047
}
@@ -1111,6 +1117,17 @@ define([
11111117
}
11121118

11131119
return selectedAttributes;
1120+
},
1121+
1122+
/**
1123+
* Callback which fired after gallery gets initialized.
1124+
*
1125+
* @param {HTMLElement} element - DOM element associated with a gallery.
1126+
*/
1127+
_onGalleryLoaded: function (element) {
1128+
var galleryObject = element.data('gallery');
1129+
1130+
this.options.mediaGalleryInitial = galleryObject.returnCurrentImages();
11141131
}
11151132
});
11161133

‎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)