Merge pull request #62 from AnastasiaBuniakEPAM/JS-338

JS-338: [Configurable.JS] Do not reload full image set when "First by First" is enabled

Author: uharbachou

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

@@ -33,7 +33,8 @@ $_attributes = $block->decorateArray($block->getAllowAttributes());
         {
             "#product_addtocart_form": {
                 "configurable": {
-                    "spConfig": <?php /* @escapeNotVerified */ echo $block->getJsonConfig() ?>
+                    "spConfig": <?php /* @escapeNotVerified */ echo $block->getJsonConfig() ?>,
+                    "onlyMainImg": true
                 }
             }
         }

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

@@ -253,14 +253,33 @@ define([
          * @private
          */
         _changeProductImage: function () {
-            var images = this.options.spConfig.images[this.simpleProduct],
-                galleryObject = $(this.options.mediaGallerySelector).data('gallery');
+            var images,
+                initialImages = $.extend(true, [], this.options.mediaGalleryInitial),
+                galleryObject = $(this.options.mediaGallerySelector).data('gallery'),
+                updateGallery;
+
+            if (this.options.spConfig.images[this.simpleProduct]) {
+                images = $.extend(true, [], this.options.spConfig.images[this.simpleProduct]);
+            }
+
+            updateGallery = function (imagesArr) {
+                var mainImg = imagesArr.filter(function (img) {
+                    return img.isMain;
+                });
+
+                galleryObject.updateDataByIndex(0, mainImg[0]);
+                galleryObject.seek(1);
+            };
 
             if (galleryObject) {
                 if (images) {
-                    galleryObject.updateData(images);
+                    this.options.onlyMainImg ?
+                        updateGallery(images) :
+                        galleryObject.updateData(images);
                 } else {
-                    galleryObject.updateData(this.options.mediaGalleryInitial);
+                    this.options.onlyMainImg ?
+                        updateGallery(initialImages) :
+                        galleryObject.updateData(this.options.mediaGalleryInitial);
                 }
             }
         },

lib/web/fotorama/fotorama.js

@@ -2250,7 +2250,7 @@ fotoramaVersion = '4.6.4';
 
                 if (!$frame) return;
 
-                var fullFLAG = that.fullScreen && dataFrame.full && dataFrame.full !== dataFrame.img && !frameData.$full && type === 'stage';
+                var fullFLAG = that.fullScreen && (!frameData.$full || dataFrame.full) && type === 'stage';
 
                 if (frameData.$img && !again && !fullFLAG) return;
 
@@ -2262,7 +2262,7 @@ fotoramaVersion = '4.6.4';
 
                 var srcKey = type === 'stage' ? (fullFLAG ? 'full' : 'img') : 'thumb',
                     src = dataFrame[srcKey],
-                    dummy = fullFLAG ? null : dataFrame[type === 'stage' ? 'thumb' : 'img'];
+                    dummy = fullFLAG ? dataFrame['img'] : dataFrame[type === 'stage' ? 'thumb' : 'img'];
 
                 if (type === 'navThumb') $frame = frameData.$wrap;
 
@@ -3428,6 +3428,17 @@ fotoramaVersion = '4.6.4';
             return this;
         };
 
+        that.spliceByIndex = function (index, newImgObj) {
+            newImgObj.img && $.ajax({
+                url: newImgObj.img,
+                type: 'HEAD',
+                success: function() {
+                    data.splice(index, 1, newImgObj);
+                    reset();
+                }
+            });
+        };
+
         function unloadVideo($video, unloadActiveFLAG, releaseAutoplayFLAG) {
             if (unloadActiveFLAG) {
                 $wrap.removeClass(wrapVideoClass);

lib/web/mage/gallery/gallery.js

@@ -453,10 +453,19 @@ define([
                         var images = [];
 
                         _.each(this.fotorama.data, function (item) {
-                            images.push(_.omit(item, '$navThumbFrame', '$navDotFrame', '$stageFrame'));
+                            images.push(_.omit(item, '$navThumbFrame', '$navDotFrame', '$stageFrame', 'labelledby'));
                         });
 
                         return images;
+                    },
+                    /**
+                     * Updates gallery data partially by index
+                     * @param {Number} index - Index of image in data array to be updated.
+                     * @param {Object} item - Standart gallery image object.
+                     *
+                     */
+                    updateDataByIndex: function(index, item){
+                        settings.fotoramaApi.spliceByIndex(index, item);
                     }
                 };