MAGETWO-57210: [github #6195, 4101] Gallery doesn't show all images added to configurable options

- Implement new behavior for a gallery on configurable product

Author: Denys Rul

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

@@ -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'; ?>"
                 }
             }
         }

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

@@ -29,7 +29,7 @@ define([
             mediaGallerySelector: '[data-gallery-role=gallery-placeholder]',
             mediaGalleryInitial: null,
             slyOldPriceSelector: '.sly-old-price',
-            onlyMainImg: false
+            gallerySwitchStrategy: 'replace'
         },
 
         /**
@@ -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();
         },
 
         /**

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

@@ -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'; ?>"
             }
         }
     }

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

@@ -244,7 +244,7 @@ define([
             mediaGalleryInitial: [{}],
 
             //
-            onlyMainImg: false,
+            gallerySwitchStrategy: 'replace',
 
             // whether swatches are rendered in product list or on product page
             inProductList: false
@@ -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);
             }

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

@@ -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">