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

- Remove redundant configuration for the Swatches module.
- Add descrtiption of the "gallerySwitchStrategy" option.

Author: Denys Rul

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

@@ -29,6 +29,15 @@ define([
             mediaGallerySelector: '[data-gallery-role=gallery-placeholder]',
             mediaGalleryInitial: null,
             slyOldPriceSelector: '.sly-old-price',
+
+            /**
+             * Defines the mechanism of how images of a gallery should be
+             * updated when user switches between configurations of a product.
+             *
+             * As for now value of this option can be either 'replace' or 'prepend'.
+             *
+             * @type {String}
+             */
             gallerySwitchStrategy: 'replace'
         },
 
@@ -85,10 +94,10 @@ define([
 
             this.inputSimpleProduct = this.element.find(options.selectSimpleProduct);
 
-            gallery.on('gallery:loaded', function () {
-                var galleryObject = gallery.data('gallery');
-                options.mediaGalleryInitial = galleryObject.returnCurrentImages();
-            });
+            gallery.data('gallery') ?
+                this._onGalleryLoaded(gallery) :
+                gallery.on('gallery:loaded', this._onGalleryLoaded.bind(this, gallery));
+
         },
 
         /**
@@ -493,8 +502,18 @@ define([
             } else {
                 $(this.options.slyOldPriceSelector).hide();
             }
-        }
+        },
 
+        /**
+         * Callback which fired after gallery gets initialized.
+         *
+         * @param {HTMLElement} element - DOM element associated with gallery.
+         */
+        _onGalleryLoaded: function (element) {
+            var galleryObject = element.data('gallery');
+
+            this.options.mediaGalleryInitial = galleryObject.returnCurrentImages();
+        }
     });
 
     return $.mage.configurable;

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

@@ -17,7 +17,7 @@
                     echo $swatchOptions = $block->getJsonSwatchConfig(); ?>,
                 "mediaCallback": "<?php /* @escapeNotVerified */ echo $block->getMediaCallback() ?>",
                 "gallerySwitchStrategy": "<?php /* @escapeNotVerified */ echo $block->getVar('gallery_switch_strategy',
-                    'Magento_Swatches') ?: 'replace'; ?>"
+                    'Magento_ConfigurableProduct') ?: 'replace'; ?>"
             }
         }
     }

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

@@ -243,7 +243,14 @@ define([
             // Cache for BaseProduct images. Needed when option unset
             mediaGalleryInitial: [{}],
 
-            //
+            /**
+             * Defines the mechanism of how images of a gallery should be
+             * updated when user switches between configurations of a product.
+             *
+             * As for now value of this option can be either 'replace' or 'prepend'.
+             *
+             * @type {String}
+             */
             gallerySwitchStrategy: 'replace',
 
             // whether swatches are rendered in product list or on product page
@@ -293,11 +300,9 @@ define([
                     this.element.parents('.product-item-info');
 
             if (isProductViewExist) {
-                gallery.on('gallery:loaded', function () {
-                    var galleryObject = gallery.data('gallery');
-
-                    options.mediaGalleryInitial = galleryObject.returnCurrentImages();
-                });
+                gallery.data('gallery') ?
+                    this._onGalleryLoaded(gallery) :
+                    gallery.on('gallery:loaded', this._onGalleryLoaded.bind(this, gallery));
             } else {
                 options.mediaGalleryInitial = [{
                     'img': $main.find('.product-image-photo').attr('src')
@@ -1112,6 +1117,17 @@ define([
             }
 
             return selectedAttributes;
+        },
+
+        /**
+         * Callback which fired after gallery gets initialized.
+         *
+         * @param {HTMLElement} element - DOM element associated with a gallery.
+         */
+        _onGalleryLoaded: function (element) {
+            var galleryObject = element.data('gallery');
+
+            this.options.mediaGalleryInitial = galleryObject.returnCurrentImages();
         }
     });
 

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

@@ -255,9 +255,6 @@
     <vars module="Magento_ConfigurableProduct">
         <var name="gallery_switch_strategy">prepend</var>
     </vars>
-    <vars module="Magento_Swatches">
-        <var name="gallery_switch_strategy">prepend</var>
-    </vars>
 
     <vars module="Js_Bundle">
         <var name="bundle_size">1MB</var>