Merge pull request #65 from AnastasiaBuniakEPAM/JS-323

JS-344: [SwatchRenderer.js] Do not reload full image set when "First by First" is enabled

Author: uharbachou

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

@@ -6,12 +6,17 @@
 ?>
 <?php /** @var $block \Magento\Swatches\Block\Product\Renderer\Configurable */ ?>
 <div class="swatch-opt"></div>
-<script>
-    require(["jquery", "jquery/ui", "swatchRenderer"], function ($) {
-        $('.swatch-opt').SwatchRenderer({
-            jsonConfig: <?php /* @escapeNotVerified */ echo $swatchOptions = $block->getJsonConfig(); ?>,
-            jsonSwatchConfig: <?php /* @escapeNotVerified */ echo $swatchOptions = $block->getJsonSwatchConfig(); ?>,
-            mediaCallback: '<?php /* @escapeNotVerified */ echo $block->getMediaCallback() ?>'
-        });
-    });
+
+<script type="text/x-magento-init">
+    {
+        ".swatch-opt": {
+            "jquery/ui":{},
+            "swatchRenderer": {
+                "jsonConfig": <?php /* @escapeNotVerified */ echo $swatchOptions = $block->getJsonConfig(); ?>,
+                "jsonSwatchConfig": <?php /* @escapeNotVerified */ echo $swatchOptions = $block->getJsonSwatchConfig(); ?>,
+                "mediaCallback": "<?php /* @escapeNotVerified */ echo $block->getMediaCallback() ?>",
+                "onlyMainImg": true
+            }
+        }
+    }
 </script>

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

@@ -204,6 +204,9 @@ define([
             // selector of price wrapper (need to know where set price)
             selectorProductPrice: '[data-role=priceBox]',
 
+            //selector of product images gallery wrapper
+            mediaGallerySelector: '[data-gallery-role=gallery-placeholder]',
+
             // number of controls to show (false or zero = show all)
             numberToShow: false,
 
@@ -865,13 +868,16 @@ define([
          * @param {Boolean} isProductViewExist
          */
         updateBaseImage: function (images, context, isProductViewExist) {
-            var justAnImage = images[0];
+            var justAnImage = images[0],
+                gallery = context.find(this.options.mediaGallerySelector).data('gallery');
 
             if (isProductViewExist) {
-                context
-                    .find('[data-gallery-role=gallery-placeholder]')
-                    .data('gallery')
-                    .updateData(images);
+                if (this.options.onlyMainImg) {
+                    gallery.updateDataByIndex(0, images[0]);
+                    gallery.seek(1);
+                } else {
+                    gallery.updateData(images);
+                }
             } else if (justAnImage && justAnImage.img) {
                 context.find('.product-image-photo').attr('src', justAnImage.img);
             }
@@ -907,4 +913,6 @@ define([
             });
         }
     });
+
+    return $.custom.SwatchRenderer;
 });