MAGETWO-52060: Layered Navigation: Image placeholder shown on selected swatch instead of parent image

- swatches empty media fix
- swatches media ajax calls caching is added
- wishlist handling events fix

Author: Yurii Hryhoriev

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

@@ -184,6 +184,9 @@ define([
             // Callback url for media
             mediaCallback: '',
 
+            // Local media cache
+            mediaCache: {},
+
             // Cache for BaseProduct images. Needed when option unset
             mediaGalleryInitial: [{}],
 
@@ -708,7 +711,15 @@ define([
                 $this = $widget.element,
                 attributes = {},
                 productId = 0,
-                additional;
+                mediaCallData,
+                mediaCacheKey,
+                mediaSuccessCallback = function (data) {
+                    if (!(mediaCacheKey in $widget.options.mediaCache)) {
+                        $widget.options.mediaCache[mediaCacheKey] = data;
+                    }
+                    $widget._ProductMediaCallback($this, data);
+                    $widget._DisableProductMediaLoader($this);
+                };
 
             if (!$widget.options.mediaCallback) {
                 return;
@@ -729,24 +740,28 @@ define([
                     .find('.price-box.price-final_price').attr('data-product-id');
             }
 
-            additional = $.parseQuery();
-
-            $widget._XhrKiller();
-            $widget._EnableProductMediaLoader($this);
-            $widget.xhr = $.post(
-                $widget.options.mediaCallback, {
-                    'product_id': productId,
-                    attributes: attributes,
-                    isAjax: true,
-                    additional: additional
-                }, function (data) {
-                    $widget._ProductMediaCallback($this, data);
-                    $widget._DisableProductMediaLoader($this);
-                },
-                'json'
-            ).done(function () {
+            mediaCallData = {
+                product_id: productId,
+                attributes: attributes,
+                additional: $.parseQuery()
+            };
+            mediaCacheKey = JSON.stringify(mediaCallData);
+
+            if (mediaCacheKey in $widget.options.mediaCache) {
+                mediaSuccessCallback($widget.options.mediaCache[mediaCacheKey]);
+            } else {
+                mediaCallData.isAjax = true;
+                $widget._XhrKiller();
+                $widget._EnableProductMediaLoader($this);
+                $widget.xhr = $.post(
+                    $widget.options.mediaCallback,
+                    mediaCallData,
+                    mediaSuccessCallback,
+                    'json'
+                ).done(function () {
                     $widget._XhrKiller();
                 });
+            }
         },
 
         /**
@@ -816,26 +831,28 @@ define([
                 return;
             }
 
-            if (support(response)) {
-                images.push({
-                    full: response.large,
-                    img: response.medium,
-                    thumb: response.small,
-                    isMain: true
-                });
+            if (!support(response)) {
+                return;
+            }
 
-                if (response.hasOwnProperty('gallery')) {
-                    $.each(response.gallery, function () {
-                        if (!support(this) || response.large === this.large) {
-                            return;
-                        }
-                        images.push({
-                            full: this.large,
-                            img: this.medium,
-                            thumb: this.small
-                        });
+            images.push({
+                full: response.large,
+                img: response.medium,
+                thumb: response.small,
+                isMain: true
+            });
+
+            if (response.hasOwnProperty('gallery')) {
+                $.each(response.gallery, function () {
+                    if (!support(this) || response.large === this.large) {
+                        return;
+                    }
+                    images.push({
+                        full: this.large,
+                        img: this.medium,
+                        thumb: this.small
                     });
-                }
+                });
             }
 
             this.updateBaseImage(images, $main, isProductViewExist);
@@ -872,11 +889,8 @@ define([
                 gallery = context.find(this.options.mediaGallerySelector).data('gallery'),
                 item;
 
-            if (images) {
-                imagesToUpdate = this._setImageType($.extend(true, [], images));
-            }
-
             if (isProductViewExist) {
+                imagesToUpdate = images.length ? this._setImageType($.extend(true, [], images)) : [];
                 if (this.options.onlyMainImg) {
                     updateImg = imagesToUpdate.filter(function (img) {
                         return img.isMain;

app/code/Magento/Wishlist/view/frontend/web/js/add-to-wishlist.js

@@ -23,6 +23,7 @@ define([
         },
         _bind: function() {
             var options = this.options,
+                dataUpdateFunc = '_updateWishlistData',
                 changeCustomOption = 'change ' + options.customOptionsInfo,
                 changeQty = 'change ' + options.qtyInfo,
                 events = {};
@@ -35,12 +36,14 @@ define([
                 options.productType = [];
             }
 
-            events[changeCustomOption] = '_updateWishlistData';
-            events[changeQty] = '_updateWishlistData';
-            options.productType.forEach(function (type) {
-                events['change ' + options[type + 'Info']] = '_updateWishlistData';
-            });
+            events[changeCustomOption] = dataUpdateFunc;
+            events[changeQty] = dataUpdateFunc;
 
+            for (var key in options.productType) {
+                if (options.productType.hasOwnProperty(key) && options.productType[key] + 'Info' in options) {
+                    events['change ' + options[options.productType[key] + 'Info']] = dataUpdateFunc;
+                }
+            }
             this._on(events);
         },
         _updateWishlistData: function(event) {