MAGETWO-52974: Configurable product options not saved when editing - …

…for mainline
magento · Nov 13, 2017 · 97390b3 · 97390b3
1 parent 2275b89
commit 97390b3
Show file tree

Hide file tree

Showing 8 changed files with 108 additions and 34 deletions.
diff --git a/app/code/Magento/ProductVideo/view/frontend/web/js/fotorama-add-video-events.js b/app/code/Magento/ProductVideo/view/frontend/web/js/fotorama-add-video-events.js
@@ -134,7 +134,6 @@ define([
          */
         _create: function () {
             $(this.element).on('gallery:loaded',  $.proxy(function () {
-                this.fotoramaItem = $(this.element).find('.fotorama-item');
                 this._initialize();
             }, this));
         },
@@ -154,6 +153,7 @@ define([
                 this.defaultVideoData = this.options.videoData = this.videoDataPlaceholder;
             }
 
+            this.fotoramaItem = $(this.element).find('.fotorama-item');
             this.clearEvents();
 
             if (this._checkForVideoExist()) {
@@ -164,6 +164,8 @@ define([
                 this._initFotoramaVideo();
                 this._attachFotoramaEvents();
             }
+
+            this.element.trigger('AddFotoramaVideoEvents:loaded');
         },
 
         /**

diff --git a/app/code/Magento/Swatches/Block/Product/Renderer/Configurable.php b/app/code/Magento/Swatches/Block/Product/Renderer/Configurable.php
@@ -119,6 +119,12 @@ public function __construct(
             $configurableAttributeData,
             $data
         );
+
+        $this->addData(
+            [
+                'cache_lifetime' => isset($data['cache_lifetime']) ? $data['cache_lifetime'] : 3600
+            ]
+        );
     }
 
     /**

diff --git a/app/code/Magento/Swatches/view/frontend/layout/checkout_cart_configure_type_configurable.xml b/app/code/Magento/Swatches/view/frontend/layout/checkout_cart_configure_type_configurable.xml
@@ -6,7 +6,13 @@
  */
 -->
 <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
-    <head>
-      <link src="Magento_Swatches::js/configurable-customer-data.js"/>
-    </head>
+    <body>
+        <referenceBlock name="product.info.options.wrapper">
+            <block class="Magento\Swatches\Block\Product\Renderer\Configurable" name="product.info.options.swatches" as="swatch_options" before="-">
+                <arguments>
+                    <argument name="cache_lifetime" xsi:type="boolean">false</argument>
+                </arguments>
+            </block>
+        </referenceBlock>
+    </body>
 </page>
diff --git a/...code/Magento/Swatches/view/frontend/layout/wishlist_index_configure_type_configurable.xml b/...code/Magento/Swatches/view/frontend/layout/wishlist_index_configure_type_configurable.xml
@@ -12,7 +12,11 @@
     <body>
         <referenceBlock name="product.info.options.configurable" remove="true"/>
         <referenceBlock name="product.info.options.wrapper">
-            <block class="Magento\Swatches\Block\Product\Renderer\Configurable" name="product.info.options.swatches" as="swatch_options" before="-" />
+            <block class="Magento\Swatches\Block\Product\Renderer\Configurable" name="product.info.options.swatches" as="swatch_options" before="-">
+                <arguments>
+                    <argument name="cache_lifetime" xsi:type="boolean">false</argument>
+                </arguments>
+            </block>
         </referenceBlock>
     </body>
 </page>
diff --git a/app/code/Magento/Swatches/view/frontend/templates/product/listing/renderer.phtml b/app/code/Magento/Swatches/view/frontend/templates/product/listing/renderer.phtml
@@ -4,7 +4,7 @@
  * See COPYING.txt for license details.
  */
 ?>
-<?php /** @var $block \Magento\Swatches\Block\Product\Renderer\Configurable */ ?>
+<?php /** @var $block \Magento\Swatches\Block\Product\Renderer\Listing\Configurable */ ?>
 <div class="swatch-opt-<?= /* @escapeNotVerified */ $block->getProduct()->getId() ?>"></div>
 <script>
     require([

diff --git a/app/code/Magento/Swatches/view/frontend/templates/product/view/renderer.phtml b/app/code/Magento/Swatches/view/frontend/templates/product/view/renderer.phtml
@@ -14,11 +14,13 @@
         "[data-role=swatch-options]": {
             "Magento_Swatches/js/swatch-renderer": {
                 "jsonConfig": <?= /* @escapeNotVerified */ $swatchOptions = $block->getJsonConfig() ?>,
-                "jsonSwatchConfig": <?php /* @escapeNotVerified */
-                    echo $swatchOptions = $block->getJsonSwatchConfig(); ?>,
+                "jsonSwatchConfig": <?php /* @escapeNotVerified */ echo $block->getJsonSwatchConfig(); ?>,
                 "mediaCallback": "<?= /* @escapeNotVerified */ $block->getMediaCallback() ?>",
                 "gallerySwitchStrategy": "<?php /* @escapeNotVerified */ echo $block->getVar('gallery_switch_strategy',
                     'Magento_ConfigurableProduct') ?: 'replace'; ?>"
+            },
+            "Magento_Swatches/js/configurable-customer-data": {
+                    "swatchOptions": <?php /* @escapeNotVerified */ echo $swatchOptions ?>
             }
         }
     }

diff --git a/app/code/Magento/Swatches/view/frontend/web/js/configurable-customer-data.js b/app/code/Magento/Swatches/view/frontend/web/js/configurable-customer-data.js
@@ -1,28 +1,51 @@
-require([
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+define([
     'jquery',
-    'Magento_ConfigurableProduct/js/options-updater'
+    'Magento_ConfigurableProduct/js/options-updater',
+    'jquery/ui'
 ], function ($, Updater) {
     'use strict';
 
-    var selectors = {
-            formSelector: '#product_addtocart_form',
-            swatchSelector: '.swatch-opt'
+    $.widget('mage.selectSwatch', {
+        options: {
+            swatchOptions: null,
+            selectors: {
+                formSelector: '#product_addtocart_form',
+                swatchSelector: '.swatch-opt'
+            },
+            swatchWidgetName: 'mageSwatchRenderer',
+            widgetInitEvent: 'swatch.initialized',
+            clickEventName: 'emulateClick'
         },
-        swatchWidgetName = 'mageSwatchRenderer',
-        widgetInitEvent = 'swatch.initialized',
 
-    /**
-    * Sets all configurable swatch attribute's selected values
-    */
-    updateSwatchOptions = function () {
-        var swatchWidget = $(selectors.swatchSelector).data(swatchWidgetName);
+        /**
+         * Widget initialisation.
+         * Configurable product options updater listens to selected swatch options
+         */
+        _init: function () {
+            var updater;
 
-        if (!swatchWidget || !swatchWidget._EmulateSelectedByAttributeId) {
-            return;
+            updater = new Updater(this.options.widgetInitEvent, this.selectDefaultSwatchOptions.bind(this));
+            updater.listen();
+        },
+
+        /**
+         * Sets default configurable swatch attribute's selected
+         */
+        selectDefaultSwatchOptions: function () {
+            var swatchWidget = $(this.options.selectors.swatchSelector).data(this.options.swatchWidgetName);
+
+            if (!swatchWidget || !swatchWidget._EmulateSelectedByAttributeId) {
+                return;
+            }
+            swatchWidget._EmulateSelectedByAttributeId(
+                this.options.swatchOptions.defaultValues, this.options.clickEventName
+            );
         }
-        swatchWidget._EmulateSelectedByAttributeId(this.productOptions);
-    },
-    updater = new Updater(widgetInitEvent, updateSwatchOptions);
+    });
 
-    updater.listen();
+    return $.mage.selectSwatch;
 });
diff --git a/app/code/Magento/Swatches/view/frontend/web/js/swatch-renderer.js b/app/code/Magento/Swatches/view/frontend/web/js/swatch-renderer.js
@@ -616,6 +616,10 @@ define([
                 return $widget._OnClick($(this), $widget);
             });
 
+            $widget.element.on('emulateClick', '.' + options.optionClass, function () {
+                return $widget._OnClick($(this), $widget, 'emulateClick');
+            });
+
             $widget.element.on('change', '.' + options.selectClass, function () {
                 return $widget._OnChange($(this), $widget);
             });
@@ -646,9 +650,10 @@ define([
         /**
          * Load media gallery using ajax or json config.
          *
+         * @param {String|undefined} eventName
          * @private
          */
-        _loadMedia: function () {
+        _loadMedia: function (eventName) {
             var $main = this.inProductList ?
                     this.element.parents('.product-item-info') :
                     this.element.parents('.column.main'),
@@ -663,7 +668,7 @@ define([
                     images = this.options.mediaGalleryInitial;
                 }
 
-                this.updateBaseImage(images, $main, !this.inProductList);
+                this.updateBaseImage(images, $main, !this.inProductList, eventName);
             }
         },
 
@@ -672,9 +677,10 @@ define([
          *
          * @param {Object} $this
          * @param {Object} $widget
+         * @param {String|undefined} eventName
          * @private
          */
-        _OnClick: function ($this, $widget) {
+        _OnClick: function ($this, $widget, eventName) {
             var $parent = $this.parents('.' + $widget.options.classes.attributeClass),
                 $wrapper = $this.parents('.' + $widget.options.classes.attributeOptionsWrapper),
                 $label = $parent.find('.' + $widget.options.classes.attributeSelectedOptionLabelClass),
@@ -713,7 +719,7 @@ define([
                 $widget._UpdatePrice();
             }
 
-            $widget._loadMedia();
+            $widget._loadMedia(eventName);
             $input.trigger('change');
         },
 
@@ -1117,16 +1123,36 @@ define([
             return images;
         },
 
+        /**
+         * Start update base image process based on event name
+         * @param {Array} images
+         * @param {jQuery} context
+         * @param {Boolean} isInProductView
+         * @param {String|undefined} eventName
+         */
+        updateBaseImage: function (images, context, isInProductView, eventName) {
+            var gallery = context.find(this.options.mediaGallerySelector).data('gallery');
+
+            if (eventName === undefined) {
+                this.processUpdateBaseImage(images, context, isInProductView, gallery);
+            } else {
+                context.find(this.options.mediaGallerySelector).on('gallery:loaded', function (loadedGallery) {
+                    loadedGallery = context.find(this.options.mediaGallerySelector).data('gallery');
+                    this.processUpdateBaseImage(images, context, isInProductView, loadedGallery);
+                }.bind(this));
+            }
+        },
+
         /**
          * Update [gallery-placeholder] or [product-image-photo]
          * @param {Array} images
          * @param {jQuery} context
          * @param {Boolean} isInProductView
+         * @param {Object} gallery
          */
-        updateBaseImage: function (images, context, isInProductView) {
+        processUpdateBaseImage: function (images, context, isInProductView, gallery) {
             var justAnImage = images[0],
                 initialImages = this.options.mediaGalleryInitial,
-                gallery = context.find(this.options.mediaGallerySelector).data('gallery'),
                 imagesToUpdate,
                 isInitial;
 
@@ -1203,14 +1229,19 @@ define([
         /**
          * Emulate mouse click or selection change on all swatches that should be selected
          * @param {Object} [selectedAttributes]
+         * @param {String} triggerClick
          * @private
          */
-        _EmulateSelectedByAttributeId: function (selectedAttributes) {
+        _EmulateSelectedByAttributeId: function (selectedAttributes, triggerClick) {
             $.each(selectedAttributes, $.proxy(function (attributeId, optionId) {
                 var elem = this.element.find('.' + this.options.classes.attributeClass +
                     '[attribute-id="' + attributeId + '"] [option-id="' + optionId + '"]'),
                     parentInput = elem.parent();
 
+                if (triggerClick === null || triggerClick === '') {
+                    triggerClick = 'click';
+                }
+
                 if (elem.hasClass('selected')) {
                     return;
                 }
@@ -1219,7 +1250,7 @@ define([
                     parentInput.val(optionId);
                     parentInput.trigger('change');
                 } else {
-                    elem.trigger('click');
+                    elem.trigger(triggerClick);
                 }
             }, this));
         },