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

Author: Olga Nakonechna

app/code/Magento/ConfigurableProduct/view/frontend/web/js/configurable-customer-data.js

@@ -1,71 +1,28 @@
 require([
     'jquery',
-    'Magento_Customer/js/customer-data'
-], function ($, customerData) {
+    'Magento_ConfigurableProduct/js/options-updater'
+], function ($, Updater) {
     'use strict';
 
     var selectors = {
-        configurableWidget: 'mageConfigurable',
-        formSelector: '#product_addtocart_form',
-        productIdSelector: '#product_addtocart_form [name="product"]'
-    },
-    configurableWidget,
-    productOptions,
-    changedProductOptions,
-    cartData = customerData.get('cart'),
-    productId = $(selectors.productIdSelector).val(),
-    updateConfigurableOptions,
-    setProductOptions;
+            formSelector: '#product_addtocart_form'
+        },
+        configurableWidgetName = 'mageConfigurable',
+        widgetInitEvent = 'configurable.initialized',
 
     /**
     * Sets all configurable attribute's selected values
     */
     updateConfigurableOptions = function () {
-        configurableWidget = $(selectors.formSelector).data(selectors.configurableWidget);
+        var configurableWidget = $(selectors.formSelector).data(configurableWidgetName);
 
         if (!configurableWidget) {
             return;
         }
-        configurableWidget.options.values = productOptions || {};
+        configurableWidget.options.values = this.productOptions || {};
         configurableWidget._configureForValues();
-    };
-
-    /**
-    * set productOptions according to cart data from customer-data
-    *
-    * @param {Object} data - cart data from customer-data
-    * @returns {Boolean} - whether the new options differ from previous
-    */
-    setProductOptions = function (data) {
-        if (!(data && data.items && data.items.length && productId)) {
-            return false;
-        }
-        changedProductOptions = data.items.find(function (item) {
-            return item['product_id'] === productId;
-        });
-        changedProductOptions = changedProductOptions && changedProductOptions.options &&
-            changedProductOptions.options.reduce(function (obj, val) {
-                obj[val['option_id']] = val['option_value'];
-
-                return obj;
-            }, {});
-
-        if (JSON.stringify(productOptions || {}) === JSON.stringify(changedProductOptions || {})) {
-            return false;
-        }
-
-        productOptions = changedProductOptions;
-
-        return true;
-    };
+    },
+    updater = new Updater(widgetInitEvent, updateConfigurableOptions);
 
-    cartData.subscribe(function (updateCartData) {
-        if (setProductOptions(updateCartData)) {
-            updateConfigurableOptions();
-        }
-    });
-    $(selectors.formSelector).on('configurable.initialized', function () {
-        setProductOptions(cartData());
-        updateConfigurableOptions();
-    });
+    updater.listen();
 });

app/code/Magento/ConfigurableProduct/view/frontend/web/js/options-updater.js

@@ -0,0 +1,77 @@
+define([
+    'jquery',
+    'Magento_Customer/js/customer-data'
+], function ($, customerData) {
+    'use strict';
+
+    var selectors = {
+        formSelector: '#product_addtocart_form',
+        productIdSelector: '#product_addtocart_form [name="product"]'
+    },
+    cartData = customerData.get('cart'),
+    productId = $(selectors.productIdSelector).val(),
+
+    /**
+    * set productOptions according to cart data from customer-data
+    *
+    * @param {Object} data - cart data from customer-data
+    * @returns {Boolean} - whether the new options differ from previous
+    */
+    setProductOptions = function (data) {
+        var changedProductOptions;
+
+        if (!(data && data.items && data.items.length && productId)) {
+            return false;
+        }
+        changedProductOptions = data.items.find(function (item) {
+            return item['product_id'] === productId;
+        });
+        changedProductOptions = changedProductOptions && changedProductOptions.options &&
+            changedProductOptions.options.reduce(function (obj, val) {
+                obj[val['option_id']] = val['option_value'];
+
+                return obj;
+            }, {});
+
+        if (JSON.stringify(this.productOptions || {}) === JSON.stringify(changedProductOptions || {})) {
+            return false;
+        }
+
+        this.productOptions = changedProductOptions;
+
+        return true;
+    },
+
+    /**
+    * Listens to update of cart data or options initialization and update selected option according to customer data
+    *
+    */
+    listen = function () {
+        cartData.subscribe(function (updateCartData) {
+            if (this.setProductOptions(updateCartData)) {
+                this.updateOptions();
+            }
+        }.bind(this));
+        $(selectors.formSelector).on(this.eventName, function () {
+            this.setProductOptions(cartData());
+            this.updateOptions();
+        }.bind(this));
+    },
+
+    /**
+    * Updater constructor function
+    *
+    */
+    Updater = function (eventName, updateOptionsCallback) {
+        if (this instanceof Updater) {
+            this.eventName = eventName;
+            this.updateOptions = updateOptionsCallback;
+            this.productOptions = {};
+        }
+    };
+
+    Updater.prototype.setProductOptions = setProductOptions;
+    Updater.prototype.listen = listen;
+
+    return Updater;
+});

app/code/Magento/Swatches/view/frontend/web/js/configurable-customer-data.js

@@ -1,71 +1,28 @@
 require([
     'jquery',
-    'Magento_Customer/js/customer-data'
-], function ($, customerData) {
+    'Magento_ConfigurableProduct/js/options-updater'
+], function ($, Updater) {
     'use strict';
 
     var selectors = {
-        swatchWidget: 'mageSwatchRenderer',
-        formSelector: '#product_addtocart_form',
-        swatchSelector: '.swatch-opt',
-        productIdSelector: '#product_addtocart_form [name="product"]'
-    },
-    swatchWidget,
-    productOptions,
-    changedProductOptions,
-    cartData = customerData.get('cart'),
-    productId = $(selectors.productIdSelector).val(),
-    updateSwatchOptions,
-    setProductOptions;
+            formSelector: '#product_addtocart_form',
+            swatchSelector: '.swatch-opt'
+        },
+        swatchWidgetName = 'mageSwatchRenderer',
+        widgetInitEvent = 'swatch.initialized',
 
     /**
     * Sets all configurable swatch attribute's selected values
     */
     updateSwatchOptions = function () {
-        swatchWidget = $(selectors.swatchSelector).data(selectors.swatchWidget);
+        var swatchWidget = $(selectors.swatchSelector).data(swatchWidgetName);
 
         if (!swatchWidget || !swatchWidget._EmulateSelectedByAttributeId) {
             return;
         }
-        swatchWidget._EmulateSelectedByAttributeId(productOptions);
-    };
-
-    /**
-    * set productOptions according to cart data from customer-data
-    *
-    * @param {Object} data - cart data from customer-data
-    * @returns {Boolean} - whether the new options differ from previous
-    */
-    setProductOptions = function (data) {
-        if (!(data && data.items && data.items.length && productId)) {
-            return false;
-        }
-        changedProductOptions = data.items.find(function (item) {
-            return item['product_id'] === productId;
-        });
-        changedProductOptions = changedProductOptions && changedProductOptions.options &&
-            changedProductOptions.options.reduce(function (obj, val) {
-                obj[val['option_id']] = val['option_value'];
-
-                return obj;
-            }, {});
-
-        if (JSON.stringify(productOptions || {}) === JSON.stringify(changedProductOptions || {})) {
-            return false;
-        }
-
-        productOptions = changedProductOptions;
-
-        return true;
-    };
+        swatchWidget._EmulateSelectedByAttributeId(this.productOptions);
+    },
+    updater = new Updater(widgetInitEvent, updateSwatchOptions);
 
-    cartData.subscribe(function (updateCartData) {
-        if (setProductOptions(updateCartData)) {
-            updateSwatchOptions();
-        }
-    });
-    $(selectors.formSelector).on('swatch.initialized', function () {
-        setProductOptions(cartData());
-        updateSwatchOptions();
-    });
+    updater.listen();
 });