Skip to content

Commit 0f06713

Browse files
RomaKisRomaKis
committed
MAGETWO-61112: [Backport] [github #6195, #4101] Gallery doesn't show all images added to configurable options to 2.0.x
1 parent 809c7c3 commit 0f06713

File tree

8 files changed

+122
-25
lines changed

8 files changed

+122
-25
lines changed

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,9 @@ $_attributes = $block->decorateArray($block->getAllowAttributes());
3333
{
3434
"#product_addtocart_form": {
3535
"configurable": {
36-
"spConfig": <?php /* @escapeNotVerified */ echo $block->getJsonConfig() ?>
36+
"spConfig": <?php /* @escapeNotVerified */ echo $block->getJsonConfig() ?>,
37+
"gallerySwitchStrategy": "<?php /* @escapeNotVerified */ echo $block->getVar('gallery_switch_strategy',
38+
'Magento_ConfigurableProduct') ?: 'replace'; ?>"
3739
}
3840
}
3941
}

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

Lines changed: 40 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,17 @@ define([
2828
'<% } %>',
2929
mediaGallerySelector: '[data-gallery-role=gallery-placeholder]',
3030
mediaGalleryInitial: null,
31-
slyOldPriceSelector: '.sly-old-price'
31+
slyOldPriceSelector: '.sly-old-price',
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'
3242
},
3343

3444
/**
@@ -84,10 +94,9 @@ define([
8494

8595
this.inputSimpleProduct = this.element.find(options.selectSimpleProduct);
8696

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

93102
/**
@@ -258,15 +267,28 @@ define([
258267
*/
259268
_changeProductImage: function () {
260269
var images = this.options.spConfig.images[this.simpleProduct],
270+
initialImages = this.options.mediaGalleryInitial,
261271
galleryObject = $(this.options.mediaGallerySelector).data('gallery');
262272

263273
if (galleryObject) {
264274
if (images) {
275+
if (this.options.gallerySwitchStrategy === 'prepend') {
276+
images = images.concat(initialImages);
277+
}
278+
279+
images = $.extend(true, [], images);
280+
281+
images.forEach(function (img) {
282+
img.type = 'image';
283+
});
284+
265285
galleryObject.updateData(images);
266286
} else {
267-
galleryObject.updateData(this.options.mediaGalleryInitial);
268-
}
287+
galleryObject.updateData(initialImages);
288+
$(this.options.mediaGallerySelector).AddFotoramaVideoEvents(); }
269289
}
290+
291+
galleryObject.first();
270292
},
271293

272294
/**
@@ -474,8 +496,18 @@ define([
474496
} else {
475497
$(this.options.slyOldPriceSelector).hide();
476498
}
477-
}
499+
},
478500

501+
/**
502+
* Callback which fired after gallery gets initialized.
503+
*
504+
* @param {HTMLElement} element - DOM element associated with gallery.
505+
*/
506+
_onGalleryLoaded: function (element) {
507+
var galleryObject = element.data('gallery');
508+
509+
this.options.mediaGalleryInitial = galleryObject.returnCurrentImages();
510+
}
479511
});
480512

481513
return $.mage.configurable;

‎app/code/Magento/Swatches/Block/Product/Renderer/Listing/Configurable.php

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,8 @@ protected function getHtmlOutput()
3939
*/
4040
protected function getSwatchAttributesData()
4141
{
42+
$result = [];
43+
4244
$swatchAttributeData = parent::getSwatchAttributesData();
4345
foreach ($swatchAttributeData as $attributeId => $item) {
4446
if (!empty($item['used_in_product_listing'])) {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<?php /** @var $block \Magento\Swatches\Block\Product\Renderer\Configurable */ ?>
88
<div class="swatch-opt-<?php /* @escapeNotVerified */ echo $block->getProduct()->getId() ?>"></div>
99
<script>
10-
require(["jquery", "jquery/ui", "Magento_Swatches/js/swatchRenderer"], function ($) {
10+
require(["jquery", "jquery/ui", "Magento_Swatches/js/SwatchRenderer"], function ($) {
1111
$('.swatch-opt-<?php /* @escapeNotVerified */ echo $block->getProduct()->getId() ?>').SwatchRenderer({
1212
selectorProduct: '.product-item-details',
1313
onlySwatches: true,

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,12 @@
1010
<script type="text/x-magento-init">
1111
{
1212
"[data-role=swatch-options]": {
13-
"Magento_Swatches/js/swatchRenderer": {
13+
"Magento_Swatches/js/SwatchRenderer": {
1414
"jsonConfig": <?php /* @escapeNotVerified */ echo $block->getJsonConfig(); ?>,
1515
"jsonSwatchConfig": <?php /* @escapeNotVerified */ echo $block->getJsonSwatchConfig(); ?>,
16-
"mediaCallback": "<?php /* @escapeNotVerified */ echo $block->getMediaCallback() ?>"
16+
"mediaCallback": "<?php /* @escapeNotVerified */ echo $block->getMediaCallback() ?>",
17+
"gallerySwitchStrategy": "<?php /* @escapeNotVerified */ echo $block->getVar('gallery_switch_strategy',
18+
'Magento_ConfigurableProduct') ?: 'replace'; ?>"
1719
}
1820
}
1921
}

‎app/code/Magento/Swatches/view/frontend/web/js/SwatchRenderer.js

Lines changed: 67 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ define(['jquery', 'underscore', 'jquery/ui'], function ($, _) {
4141
$.widget('custom.SwatchRendererTooltip', {
4242
options: {
4343
delay: 200, //how much ms before tooltip to show
44-
tooltip_class: 'swatch-option-tooltip' //configurable, but remember about css
44+
tooltip_class: 'swatch-option-tooltip' //configurable, but remember about css
4545
},
4646

4747
/**
@@ -173,7 +173,20 @@ define(['jquery', 'underscore', 'jquery/ui'], function ($, _) {
173173
enableControlLabel: true, // enable label for control
174174
moreButtonText: 'More', // text for more button
175175
mediaCallback: '', // Callback url for media
176-
mediaGalleryInitial: [{}] // Cache for BaseProduct images. Needed when option unset
176+
mediaGalleryInitial: [{}],
177+
178+
/**
179+
* Defines the mechanism of how images of a gallery should be
180+
* updated when user switches between configurations of a product.
181+
*
182+
* As for now value of this option can be either 'replace' or 'prepend'.
183+
*
184+
* @type {String}
185+
*/
186+
gallerySwitchStrategy: 'replace',
187+
188+
//selector of product images gallery wrapper
189+
mediaGallerySelector: '[data-gallery-role=gallery-placeholder]',// Cache for BaseProduct images. Needed when option unset
177190
},
178191

179192
/**
@@ -209,11 +222,9 @@ define(['jquery', 'underscore', 'jquery/ui'], function ($, _) {
209222
this.element.parents('.product-item-info');
210223

211224
if (isProductViewExist) {
212-
gallery.on('gallery:loaded', function () {
213-
var galleryObject = gallery.data('gallery');
214-
215-
options.mediaGalleryInitial = galleryObject.returnCurrentImages();
216-
});
225+
gallery.data('gallery') ?
226+
this._onGalleryLoaded(gallery) :
227+
gallery.on('gallery:loaded', this._onGalleryLoaded.bind(this, gallery));
217228
} else {
218229
options.mediaGalleryInitial = [{
219230
'img': $main.find('.product-image-photo').attr('src')
@@ -793,18 +804,51 @@ define(['jquery', 'underscore', 'jquery/ui'], function ($, _) {
793804
* @param {Boolean} isProductViewExist
794805
*/
795806
updateBaseImage: function (images, context, isProductViewExist) {
796-
var justAnImage = images[0];
807+
var justAnImage = images[0],
808+
initialImages = this.options.mediaGalleryInitial,
809+
gallery = context.find(this.options.mediaGallerySelector).data('gallery'),
810+
imagesToUpdate,
811+
isInitial;
797812

798813
if (isProductViewExist) {
799-
context
800-
.find('[data-gallery-role=gallery-placeholder]')
801-
.data('gallery')
802-
.updateData(images);
814+
imagesToUpdate = images.length ? this._setImageType($.extend(true, [], images)) : [];
815+
isInitial = _.isEqual(imagesToUpdate, initialImages);
816+
817+
if (this.options.gallerySwitchStrategy === 'prepend' && !isInitial) {
818+
imagesToUpdate = imagesToUpdate.concat(initialImages);
819+
}
820+
821+
gallery.updateData(imagesToUpdate);
822+
823+
if (isInitial) {
824+
$(this.options.mediaGallerySelector).AddFotoramaVideoEvents();
825+
}
826+
827+
gallery.first();
828+
803829
} else if (justAnImage && justAnImage.img) {
804830
context.find('.product-image-photo').attr('src', justAnImage.img);
805831
}
806832
},
807833

834+
/**
835+
* Check if images to update are initial and set their type
836+
* @param {Array} images
837+
*/
838+
_setImageType: function (images) {
839+
var initial = this.options.mediaGalleryInitial[0].img;
840+
841+
if (images[0].img === initial) {
842+
images = $.extend(true, [], this.options.mediaGalleryInitial);
843+
} else {
844+
images.map(function (img) {
845+
img.type = 'image';
846+
});
847+
}
848+
849+
return images;
850+
},
851+
808852
/**
809853
* Kill doubled AJAX requests
810854
*
@@ -874,6 +918,17 @@ define(['jquery', 'underscore', 'jquery/ui'], function ($, _) {
874918
}
875919

876920
return size;
921+
},
922+
923+
/**
924+
* Callback which fired after gallery gets initialized.
925+
*
926+
* @param {HTMLElement} element - DOM element associated with a gallery.
927+
*/
928+
_onGalleryLoaded: function (element) {
929+
var galleryObject = element.data('gallery');
930+
931+
this.options.mediaGalleryInitial = galleryObject.returnCurrentImages();
877932
}
878933
});
879934
return $.custom.SwatchRenderer;

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -254,6 +254,11 @@
254254
<vars module="Magento_Bundle">
255255
<var name="product_summary_image_size">58</var> <!-- New Product image size used for summary block-->
256256
</vars>
257+
258+
<vars module="Magento_ConfigurableProduct">
259+
<var name="gallery_switch_strategy">prepend</var>
260+
</vars>
261+
257262
<vars module="Js_Bundle">
258263
<var name="bundle_size">1MB</var>
259264
</vars>

‎lib/web/mage/gallery/gallery.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -407,7 +407,6 @@ define([
407407
*/
408408
updateData: function (data) {
409409
if (_.isArray(data)) {
410-
pushMainFirst(data);
411410
settings.fotoramaApi.load(data);
412411

413412
$.extend(false, settings, {

0 commit comments

Comments
 (0)