MAGETWO-58035: [Backport] - Configurable product options not saved when editing - for 2.0

Oleksii Korshenko · Oleksii Korshenko · commit 4f716455ce91 · 2016-10-07T15:58:19.000-05:00
diff --git a/app/code/Magento/Checkout/CustomerData/DefaultItem.php b/app/code/Magento/Checkout/CustomerData/DefaultItem.php
@@ -70,6 +70,7 @@ protected function doGetItemData()
             'item_id' => $this->item->getId(),
             'configure_url' => $this->getConfigureUrl(),
             'is_visible_in_site_visibility' => $this->item->getProduct()->isVisibleInSiteVisibility(),
+            'product_id' => $this->item->getProduct()->getId(),
             'product_name' => $this->item->getProduct()->getName(),
             'product_url' => $this->getProductUrl(),
             'product_has_url' => $this->hasProductUrl(),
diff --git a/app/code/Magento/ConfigurableProduct/Model/Product/Type/Configurable.php b/app/code/Magento/ConfigurableProduct/Model/Product/Type/Configurable.php
@@ -818,9 +818,15 @@ public function getSelectedAttributesInfo($product)
                         $value = $value->getSource()->getOptionText($attributeValue);
                     } else {
                         $value = '';
+                        $attributeValue = '';
                     }
 
-                    $attributes[] = ['label' => $label, 'value' => $value];
+                    $attributes[] = [
+                        'label' => $label,
+                        'value' => $value,
+                        'option_id' => $attributeId,
+                        'option_value' => $attributeValue,
+                    ];
                 }
             }
         }
diff --git a/app/code/Magento/ConfigurableProduct/Test/Unit/Model/Product/Type/ConfigurableTest.php b/app/code/Magento/ConfigurableProduct/Test/Unit/Model/Product/Type/ConfigurableTest.php
@@ -564,7 +564,14 @@ public function testGetSelectedAttributesInfo()
 
         $this->assertEquals(
             $this->_model->getSelectedAttributesInfo($productMock),
-            [['label' => 'attr_store_label', 'value' => '']]
+            [
+                [
+                'label' => 'attr_store_label',
+                'value' => '',
+                'option_id' => 1,
+                'option_value' => ''
+                ]
+            ]
         );
     }
 
diff --git a/app/code/Magento/ConfigurableProduct/view/frontend/layout/checkout_cart_configure_type_configurable.xml b/app/code/Magento/ConfigurableProduct/view/frontend/layout/checkout_cart_configure_type_configurable.xml
@@ -6,6 +6,9 @@
  */
 -->
 <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_ConfigurableProduct::js/configurable-customer-data.js"/>
+    </head>
     <update handle="catalog_product_view_type_configurable"/>
     <body/>
 </page>
diff --git a/app/code/Magento/ConfigurableProduct/view/frontend/web/js/configurable-customer-data.js b/app/code/Magento/ConfigurableProduct/view/frontend/web/js/configurable-customer-data.js
@@ -0,0 +1,33 @@
+/**
+ * Copyright © 2016 Magento. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+require([
+    'jquery',
+    'Magento_ConfigurableProduct/js/options-updater'
+], function ($, Updater) {
+    'use strict';
+
+    var selectors = {
+            formSelector: '#product_addtocart_form'
+        },
+        configurableWidgetName = 'mageConfigurable',
+        widgetInitEvent = 'configurable.initialized',
+
+    /**
+    * Sets all configurable attribute's selected values
+    */
+    updateConfigurableOptions = function () {
+        var configurableWidget = $(selectors.formSelector).data(configurableWidgetName);
+
+        if (!configurableWidget) {
+            return;
+        }
+        configurableWidget.options.values = this.productOptions || {};
+        configurableWidget._configureForValues();
+    },
+    updater = new Updater(widgetInitEvent, updateConfigurableOptions);
+
+    updater.listen();
+});
diff --git a/app/code/Magento/ConfigurableProduct/view/frontend/web/js/configurable.js b/app/code/Magento/ConfigurableProduct/view/frontend/web/js/configurable.js
@@ -53,6 +53,8 @@ define([
 
             // Setup/configure values to inputs
             this._configureForValues();
+
+            $(this.element).trigger('configurable.initialized');
         },
 
         /**
diff --git a/app/code/Magento/ConfigurableProduct/view/frontend/web/js/options-updater.js b/app/code/Magento/ConfigurableProduct/view/frontend/web/js/options-updater.js
@@ -0,0 +1,82 @@
+/**
+ * Copyright © 2016 Magento. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+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;
+});
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
@@ -0,0 +1,14 @@
+<?xml version="1.0"?>
+<!--
+/**
+ * Copyright © 2016 Magento. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+-->
+<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>
+    <update handle="catalog_product_view_type_configurable"/>
+    <body/>
+</page>
diff --git a/app/code/Magento/Swatches/view/frontend/requirejs-config.js b/app/code/Magento/Swatches/view/frontend/requirejs-config.js
diff --git a/app/code/Magento/Swatches/view/frontend/templates/product/layered/renderer.phtml b/app/code/Magento/Swatches/view/frontend/templates/product/layered/renderer.phtml
@@ -69,7 +69,7 @@
 </div>
 
 <script>
-    require(["jquery", "jquery/ui", "swatchRenderer"], function ($) {
+    require(["jquery", "jquery/ui", "Magento_Swatches/js/swatchRenderer"], function ($) {
         $('.swatch-layered.<?php /* @escapeNotVerified */ echo $swatchData['attribute_code'] ?>')
             .find('[option-type="1"], [option-type="2"], [option-type="0"], [option-type="3"]')
             .SwatchRendererTooltip();
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
@@ -7,7 +7,7 @@
 <?php /** @var $block \Magento\Swatches\Block\Product\Renderer\Configurable */ ?>
 <div class="swatch-opt-<?php /* @escapeNotVerified */ echo $block->getProduct()->getId() ?>"></div>
 <script>
-    require(["jquery", "jquery/ui", "swatchRenderer"], function ($) {
+    require(["jquery", "jquery/ui", "Magento_Swatches/js/swatchRenderer"], function ($) {
         $('.swatch-opt-<?php /* @escapeNotVerified */ echo $block->getProduct()->getId() ?>').SwatchRenderer({
             selectorProduct: '.product-item-details',
             onlySwatches: true,
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
@@ -5,13 +5,16 @@
  */
 ?>
 <?php /** @var $block \Magento\Swatches\Block\Product\Renderer\Configurable */ ?>
-<div class="swatch-opt"></div>
-<script>
-    require(["jquery", "jquery/ui", "swatchRenderer"], function ($) {
-        $('.swatch-opt').SwatchRenderer({
-            jsonConfig: <?php /* @escapeNotVerified */ echo $swatchOptions = $block->getJsonConfig(); ?>,
-            jsonSwatchConfig: <?php /* @escapeNotVerified */ echo $swatchOptions = $block->getJsonSwatchConfig(); ?>,
-            mediaCallback: '<?php /* @escapeNotVerified */ echo $block->getMediaCallback() ?>'
-        });
-    });
+<div class="swatch-opt" data-role="swatch-options"></div>
+
+<script type="text/x-magento-init">
+    {
+        "[data-role=swatch-options]": {
+            "Magento_Swatches/js/swatchRenderer": {
+                "jsonConfig": <?php /* @escapeNotVerified */ echo $block->getJsonConfig(); ?>,
+                "jsonSwatchConfig": <?php /* @escapeNotVerified */ echo $block->getJsonSwatchConfig(); ?>,
+                "mediaCallback": "<?php /* @escapeNotVerified */ echo $block->getMediaCallback() ?>"
+            }
+        }
+    }
 </script>
diff --git a/app/code/Magento/Swatches/view/frontend/web/js/SwatchRenderer.js b/app/code/Magento/Swatches/view/frontend/web/js/SwatchRenderer.js
@@ -191,6 +191,7 @@ define(['jquery', 'underscore', 'jquery/ui'], function ($, _) {
         _init: function () {
             if (this.options.jsonConfig != '' && this.options.jsonSwatchConfig != '') {
                 this._RenderControls();
+                $(this.element).trigger('swatch.initialized');
             } else {
                 console.log('SwatchRenderer: No input data received');
             }
@@ -834,6 +835,30 @@ define(['jquery', 'underscore', 'jquery/ui'], function ($, _) {
             });
         },
 
+        /**
+         * Emulate mouse click or selection change on all swatches that should be selected
+         * @param {Object} [selectedAttributes]
+         * @private
+         */
+        _EmulateSelectedByAttributeId: function (selectedAttributes) {
+            $.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 (elem.hasClass('selected')) {
+                    return;
+                }
+
+                if (parentInput.hasClass(this.options.classes.selectClass)) {
+                    parentInput.val(optionId);
+                    parentInput.trigger('change');
+                } else {
+                    elem.trigger('click');
+                }
+            }, this));
+        },
+
         /**
          * Returns an array/object's length
          * @param obj
@@ -851,4 +876,5 @@ define(['jquery', 'underscore', 'jquery/ui'], function ($, _) {
             return size;
         }
     });
+    return $.custom.SwatchRenderer;
 });
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
@@ -0,0 +1,33 @@
+/**
+ * Copyright © 2016 Magento. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+require([
+    'jquery',
+    'Magento_ConfigurableProduct/js/options-updater'
+], function ($, Updater) {
+    'use strict';
+
+    var selectors = {
+            formSelector: '#product_addtocart_form',
+            swatchSelector: '.swatch-opt'
+        },
+        swatchWidgetName = 'customSwatchRenderer',
+        widgetInitEvent = 'swatch.initialized',
+
+    /**
+    * Sets all configurable swatch attribute's selected values
+    */
+    updateSwatchOptions = function () {
+        var swatchWidget = $(selectors.swatchSelector).data(swatchWidgetName);
+
+        if (!swatchWidget || !swatchWidget._EmulateSelectedByAttributeId) {
+            return;
+        }
+        swatchWidget._EmulateSelectedByAttributeId(this.productOptions);
+    },
+    updater = new Updater(widgetInitEvent, updateSwatchOptions);
+
+    updater.listen();
+});
diff --git a/dev/tests/integration/testsuite/Magento/ConfigurableProduct/Model/Product/Type/ConfigurableTest.php b/dev/tests/integration/testsuite/Magento/ConfigurableProduct/Model/Product/Type/ConfigurableTest.php
@@ -239,7 +239,8 @@ public function testGetSelectedAttributesInfo()
 
         $this->_product->addCustomOption('attributes', serialize([$attribute['attribute_id'] => $optionValueId]));
         $info = $this->_model->getSelectedAttributesInfo($this->_product);
-        $this->assertEquals([['label' => 'Test Configurable', 'value' => 'Option 1']], $info);
+        $this->assertEquals('Test Configurable', $info[0]['label']);
+        $this->assertEquals('Option 1', $info[0]['value']);
     }
 
     /**
@@ -259,7 +260,8 @@ public function testGetSelectedAttributesInfoForStore()
 
         $attribute->getProductAttribute()->setStoreLabel('store label');
         $info = $this->_model->getSelectedAttributesInfo($this->_product);
-        $this->assertEquals([['label' => 'store label', 'value' => 'Option 1']], $info);
+        $this->assertEquals('store label', $info[0]['label']);
+        $this->assertEquals('Option 1', $info[0]['value']);
     }
 
     /**
@@ -302,10 +304,8 @@ public function testGetOrderOptions()
         $result = $this->_model->getOrderOptions($this->_product);
         $this->assertArrayHasKey('info_buyRequest', $result);
         $this->assertArrayHasKey('attributes_info', $result);
-        $this->assertEquals(
-            [['label' => 'Test Configurable', 'value' => 'Option 1']],
-            $result['attributes_info']
-        );
+        $this->assertEquals('Test Configurable', $result['attributes_info'][0]['label']);
+        $this->assertEquals('Option 1', $result['attributes_info'][0]['value']);
         $this->assertArrayHasKey('product_calculations', $result);
         $this->assertArrayHasKey('shipment_type', $result);
         $this->assertEquals(

Original file line number	Diff line number	Diff line change
`@@ -818,9 +818,15 @@ public function getSelectedAttributesInfo($product)`
`818`	`818`	`$value = $value->getSource()->getOptionText($attributeValue);`
`819`	`819`	`} else {`
`820`	`820`	`$value = '';`
	`821`	`+ $attributeValue = '';`
`821`	`822`	`}`
`822`	`823`
`823`		`- $attributes[] = ['label' => $label, 'value' => $value];`
	`824`	`+ $attributes[] = [`
	`825`	`+ 'label' => $label,`
	`826`	`+ 'value' => $value,`
	`827`	`+ 'option_id' => $attributeId,`
	`828`	`+ 'option_value' => $attributeValue,`
	`829`	`+ ];`
`824`	`830`	`}`
`825`	`831`	`}`
`826`	`832`	`}`