Skip to content

Commit bf41d40

Browse files
author
Volodymyr Klymenko
authored
Merge pull request #584 from magento-frontend/pr-2.1-develop
[Frontend] Bugs - for 2.1.x
2 parents c9636f9 + ae3d2fa commit bf41d40

File tree

6 files changed

+96
-67
lines changed

6 files changed

+96
-67
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: 38 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -193,11 +193,18 @@ define([
193193
// Cache for BaseProduct images. Needed when option unset
194194
mediaGalleryInitial: [{}],
195195

196-
//
197-
onlyMainImg: false,
198-
199196
// whether swatches are rendered in product list or on product page
200-
inProductList: false
197+
inProductList: false,
198+
199+
/**
200+
* Defines the mechanism of how images of a gallery should be
201+
* updated when user switches between configurations of a product.
202+
*
203+
* As for now value of this option can be either 'replace' or 'prepend'.
204+
*
205+
* @type {String}
206+
*/
207+
gallerySwitchStrategy: 'replace'
201208
},
202209

203210
/**
@@ -242,11 +249,9 @@ define([
242249
this.element.parents('.product-item-info');
243250

244251
if (isProductViewExist) {
245-
gallery.on('gallery:loaded', function () {
246-
var galleryObject = gallery.data('gallery');
247-
248-
options.mediaGalleryInitial = galleryObject.returnCurrentImages();
249-
});
252+
gallery.data('gallery') ?
253+
this._onGalleryLoaded(gallery) :
254+
gallery.on('gallery:loaded', this._onGalleryLoaded.bind(this, gallery));
250255
} else {
251256
options.mediaGalleryInitial = [{
252257
'img': $main.find('.product-image-photo').attr('src')
@@ -914,26 +919,27 @@ define([
914919
*/
915920
updateBaseImage: function (images, context, isProductViewExist) {
916921
var justAnImage = images[0],
917-
updateImg,
918-
imagesToUpdate,
922+
initialImages = this.options.mediaGalleryInitial,
919923
gallery = context.find(this.options.mediaGallerySelector).data('gallery'),
920-
item;
924+
imagesToUpdate,
925+
isInitial;
921926

922927
if (isProductViewExist) {
923928
imagesToUpdate = images.length ? this._setImageType($.extend(true, [], images)) : [];
929+
isInitial = _.isEqual(imagesToUpdate, initialImages);
924930

925-
if (this.options.onlyMainImg) {
926-
updateImg = imagesToUpdate.filter(function (img) {
927-
return img.isMain;
928-
});
929-
item = updateImg.length ? updateImg[0] : imagesToUpdate[0];
930-
gallery.updateDataByIndex(0, item);
931+
if (this.options.gallerySwitchStrategy === 'prepend' && !isInitial) {
932+
imagesToUpdate = imagesToUpdate.concat(initialImages);
933+
}
931934

932-
gallery.seek(1);
933-
} else {
934-
gallery.updateData(imagesToUpdate);
935+
gallery.updateData(imagesToUpdate);
936+
937+
if (isInitial) {
935938
$(this.options.mediaGallerySelector).AddFotoramaVideoEvents();
936939
}
940+
941+
gallery.first();
942+
937943
} else if (justAnImage && justAnImage.img) {
938944
context.find('.product-image-photo').attr('src', justAnImage.img);
939945
}
@@ -985,6 +991,17 @@ define([
985991
}
986992

987993
return selectedAttributes;
994+
},
995+
996+
/**
997+
* Callback which fired after gallery gets initialized.
998+
*
999+
* @param {HTMLElement} element - DOM element associated with a gallery.
1000+
*/
1001+
_onGalleryLoaded: function (element) {
1002+
var galleryObject = element.data('gallery');
1003+
1004+
this.options.mediaGalleryInitial = galleryObject.returnCurrentImages();
9881005
}
9891006
});
9901007

‎app/code/Magento/Ui/view/base/web/js/grid/provider.js

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,10 @@ define([
4343
.initStorage()
4444
.clearData();
4545

46+
// Load data when there will
47+
// be no more pending assets.
48+
resolver(this.reload, this);
49+
4650
return this;
4751
},
4852

@@ -122,9 +126,11 @@ define([
122126
* Handles changes of 'params' object.
123127
*/
124128
onParamsChange: function () {
125-
this.firstLoad ?
126-
resolver(this.reload, this) :
129+
// It's necessary to make a reload only
130+
// after the initial loading has been made.
131+
if (!this.firstLoad) {
127132
this.reload();
133+
}
128134
},
129135

130136
/**

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