magento#26473: improved logic for product image updating (gallery dat…

…a updating) for configurable products
sergiy-v · Jan 28, 2020 · 7eca1ed · 7eca1ed
1 parent 06a0dd0
commit 7eca1ed
Showing 1 changed file with 25 additions and 10 deletions.
diff --git a/app/code/Magento/ConfigurableProduct/view/frontend/web/js/configurable.js b/app/code/Magento/ConfigurableProduct/view/frontend/web/js/configurable.js
@@ -13,7 +13,8 @@ define([
     'priceUtils',
     'priceBox',
     'jquery-ui-modules/widget',
-    'jquery/jquery.parsequery'
+    'jquery/jquery.parsequery',
+    'fotoramaVideoEvents'
 ], function ($, _, mageTemplate, $t, priceUtils) {
     'use strict';
 
@@ -306,38 +307,52 @@ define([
          */
         _changeProductImage: function () {
             var images,
-                initialImages = this.options.mediaGalleryInitial,
-                galleryObject = $(this.options.mediaGallerySelector).data('gallery');
-
-            if (!galleryObject) {
-                return;
-            }
+                initialImages = this.options.mediaGalleryInitial;
 
             images = this.options.spConfig.images[this.simpleProduct];
 
             if (images) {
                 images = this._sortImages(images);
 
-                if (this.options.gallerySwitchStrategy === 'prepend') {
+                if (this.options.gallerySwitchStrategy === 'prepend' && !_.isEmpty(initialImages)) {
                     images = images.concat(initialImages);
                 }
 
                 images = $.extend(true, [], images);
                 images = this._setImageIndex(images);
 
-                galleryObject.updateData(images);
+                this._updateGalleryData(images);
 
                 $(this.options.mediaGallerySelector).AddFotoramaVideoEvents({
                     selectedOption: this.simpleProduct,
                     dataMergeStrategy: this.options.gallerySwitchStrategy
                 });
             } else {
-                galleryObject.updateData(initialImages);
+                this._updateGalleryData(initialImages);
                 $(this.options.mediaGallerySelector).AddFotoramaVideoEvents();
             }
 
         },
 
+        /**
+         * Update gallery data
+         *
+         * @param images
+         * @private
+         */
+        _updateGalleryData: function (images) {
+            var gallery = $(this.options.mediaGallerySelector).data('gallery');
+
+            if (!_.isUndefined(gallery)) {
+                gallery.updateData(images);
+            } else {
+                $(this.options.mediaGallerySelector).on('gallery:loaded', function (loadedGallery) {
+                    loadedGallery = $(this.options.mediaGallerySelector).data('gallery');
+                    loadedGallery.updateData(images);
+                }.bind(this));
+            }
+        },
+
         /**
          * Sorting images array
          *