Skip to content

Commit

Permalink
MAGETWO-57210: [github #6195, 4101] Gallery doesn't show all images a…
Browse files Browse the repository at this point in the history 
…dded to configurable options

- Implement new behavior for a gallery on configurable product
  • Loading branch information
Denys Rul committed Oct 4, 2016
1 parent 36b07c7 commit e67e1df
Show file tree
Hide file tree
Showing 5 changed files with 37 additions and 48 deletions.
3 changes: 2 additions & 1 deletion .../ConfigurableProduct/view/frontend/templates/product/view/type/options/configurable.phtml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'; ?>"
}
}
}
Expand Down
47 changes: 17 additions & 30 deletions app/code/Magento/ConfigurableProduct/view/frontend/web/js/configurable.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ define([
mediaGallerySelector: '[data-gallery-role=gallery-placeholder]',
mediaGalleryInitial: null,
slyOldPriceSelector: '.sly-old-price',
onlyMainImg: false
gallerySwitchStrategy: 'replace'
},

/**
Expand Down Expand Up @@ -262,43 +262,30 @@ define([
initialImages = $.extend(true, [], this.options.mediaGalleryInitial),
galleryObject = $(this.options.mediaGallerySelector).data('gallery');

if (!galleryObject) {
return;
}

if (this.options.spConfig.images[this.simpleProduct]) {
images = $.extend(true, [], this.options.spConfig.images[this.simpleProduct]);
}

function updateGallery(imagesArr) {
var imgToUpdate,
mainImg;

mainImg = imagesArr.filter(function (img) {
return img.isMain;
if (images) {
images.forEach(function (img) {
img.type = 'image';
});

imgToUpdate = mainImg.length ? mainImg[0] : imagesArr[0];
galleryObject.updateDataByIndex(0, imgToUpdate);
galleryObject.seek(1);
}

if (galleryObject) {
if (images) {
images.map(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();
}
if (this.options.gallerySwitchStrategy === 'prepend') {
images = images.concat(initialImages);
}

galleryObject.updateData(images);
} else {
galleryObject.updateData(initialImages);
$(this.options.mediaGallerySelector).AddFotoramaVideoEvents();
}

galleryObject.first();
},

/**
Expand Down
4 changes: 2 additions & 2 deletions app/code/Magento/Swatches/view/frontend/templates/product/view/renderer.phtml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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_Swatches') ?: 'replace'; ?>"
}
}
}
Expand Down
27 changes: 14 additions & 13 deletions app/code/Magento/Swatches/view/frontend/web/js/swatch-renderer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -244,7 +244,7 @@ define([
mediaGalleryInitial: [{}],

//
onlyMainImg: false,
gallerySwitchStrategy: 'replace',

// whether swatches are rendered in product list or on product page
inProductList: false
Expand Down Expand Up @@ -1016,26 +1016,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);
}
Expand Down
4 changes: 2 additions & 2 deletions app/design/frontend/Magento/luma/etc/view.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -253,10 +253,10 @@
</vars>

<vars module="Magento_ConfigurableProduct">
<var name="change_only_base_image">true</var>
<var name="gallery_switch_strategy">prepend</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">
Expand Down

1 comment on commit e67e1df

@rashidtahir
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi ,

After implementing this solution images are now switching fine when selecting color swatches but we have video that's not showing now.When page load first time its show for couple of seconds and then it goes although we have assign video to simple products as well.

Please sign in to comment.