MAGETWO-47017: [Github] Add Configurable Product To Cart from Category Page #2574 #5850 #5882 #6572 #5558

- CR changes

Author: Palamar, Mykola

app/code/Magento/Catalog/view/frontend/web/js/catalog-add-to-cart.js

@@ -64,30 +64,10 @@ define([
         },
 
         ajaxSubmit: function(form) {
-            var self = this,
-                swatchAttributesValue = [],
-                urlHashParams = '';
+            var self = this;
             $(self.options.minicartSelector).trigger('contentLoading');
             self.disableAddToCartButton(form);
 
-            $(form.prop("elements")).each(function(index, item){
-                item = $(item);
-                if (item.attr('name') && item.attr('name').search('super') != -1) {
-                    var r = /\[(\d+)\]/;
-                    var matches = r.exec(item.attr('name'));
-
-                    if (matches) {
-                        swatchAttributesValue.push(item.attr('data-attr-name') + '=' + item.val());
-                    }
-                }
-            });
-
-            console.log(form.serialize());
-            if (swatchAttributesValue.length > 0) {
-                urlHashParams = '#' + swatchAttributesValue.join('&');
-            }
-
-
             $.ajax({
                 url: form.attr('action'),
                 data: form.serialize(),
@@ -104,7 +84,18 @@ define([
                     }
 
                     if (res.backUrl) {
-                        window.location = res.backUrl  + urlHashParams;
+                        var eventData = {
+                            'form': form,
+                            'redirectParameters': []
+                        }
+                        // trigger global event, so other modules will be able add parameters to redirect url
+                        $('body').trigger('catalogCategoryAddToCartRedirect', eventData);
+                        if (eventData.redirectParameters.length > 0) {
+                            var parameters = res.backUrl.split('#');
+                            parameters.push(eventData.redirectParameters.join('&'));
+                            res.backUrl = parameters.join('#');
+                        }
+                        window.location = res.backUrl;
                         return;
                     }
                     if (res.messages) {

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", "Magento_Swatches/js/swatch-renderer"], function ($) {
+    require(["jquery", "jquery/ui", "Magento_Swatches/js/swatch-renderer", "Magento_Swatches/js/catalog-add-to-cart"], function ($) {
         $('.swatch-opt-<?php /* @escapeNotVerified */ echo $block->getProduct()->getId() ?>').SwatchRenderer({
             selectorProduct: '.product-item-details',
             onlySwatches: true,

app/code/Magento/Swatches/view/frontend/web/js/catalog-add-to-cart.js

@@ -0,0 +1,16 @@
+/**
+ * Copyright © 2016 Magento. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+require([
+    'jquery'
+], function ($) {
+    'use strict';
+
+    $('body').on('catalogCategoryAddToCartRedirect', function (event, data) {
+        $(data.form).find('[name*="super"]').each(function (index, item) {
+            var $item = $(item);
+            data.redirectParameters.push($item.attr('data-attr-name') + '=' + $item.val());
+        });
+    })
+});

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

@@ -636,6 +636,13 @@ define([
             $input.trigger('change');
         },
 
+        /**
+         * Get human readable attribute code (eg. size, color) by it ID from configuration
+         *
+         * @param attributeId
+         * @returns {*}
+         * @private
+         */
         _getAttributeCodeById: function (attributeId) {
             var attribute = this.options.jsonConfig.mappedAttributes[attributeId];
             return attribute ? attribute.code : attributeId;

dev/tests/functional/tests/app/Magento/Swatches/Test/Block/Product/ProductList/ProductItem.php

@@ -15,30 +15,40 @@
 class ProductItem extends CatalogProductItem
 {
     /**
+     * Selector for the swatches of the product.
+     *
      * @var string
      */
     protected $swatchSelector = 'div[option-id="%s"]';
 
     /**
-     * Fill product options on category page
+     * Fill product options on category page.
      *
-     * @param $product
+     * @param \Magento\ConfigurableProduct\Test\Fixture\ConfigurableProduct $product
+     * @return void
      */
-    public function fillData($product) {
+    public function fillData(\Magento\ConfigurableProduct\Test\Fixture\ConfigurableProduct $product) {
         $checkoutData = $product->getCheckoutData();
         $options = $checkoutData['options']['configurable_options'];
         $confAttrData = $product->getDataFieldConfig('configurable_attributes_data');
         $attributes = ($confAttrData['source'])->getAttributes();
 
         foreach ($options as $option) {
+            if (!isset($attributes[$option['title']])) {
+                continue;
+            }
             $availableOptions = $attributes[$option['title']]->getOptions();
-            $optionForSelect = $availableOptions[str_replace('option_key_', '', $option['value'])];
+            $optionKey = str_replace('option_key_', '', $option['value']);
+            if (!isset($availableOptions[$optionKey])) {
+                continue;
+            }
+            $optionForSelect = $availableOptions[$optionKey];
             $this->clickOnSwatch($optionForSelect['id']);
         }
     }
 
     /**
-     * Click on swatch
+     * Click on swatch.
      *
      * @param $optionId
      */

dev/tests/functional/tests/app/Magento/Swatches/Test/Block/Product/ViewWithSwatches.php

@@ -0,0 +1,39 @@
+<?php
+/**
+ * Copyright © 2016 Magento. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+namespace Magento\Swatches\Test\Block\Product;
+
+use Magento\Catalog\Test\Block\Product\View;
+use Magento\Mtf\Fixture\InjectableFixture;
+
+/**
+ * Configurable product view block with swatch attributes on frontend product page
+ */
+class ViewWithSwatches extends View
+{
+    /**
+     * Selector for swatch attribute value
+     *
+     * @var string
+     */
+    private $swatchAttributeSelector = '.swatch-attribute.%s .swatch-attribute-selected-option';
+
+    public function getSelectedSwatchOptions(InjectableFixture $product)
+    {
+        $checkoutData = $product->getCheckoutData();
+        $availableAttributes = $product->getConfigurableAttributesData();
+        $attributesData = $availableAttributes['attributes_data'];
+        $formData = [];
+        foreach ($checkoutData['options']['configurable_options'] as $item) {
+            $selector = sprintf($this->swatchAttributeSelector, $attributesData[$item['title']]['attribute_code']);
+            $this->waitForElementVisible($selector);
+            $selected = $this->_rootElement->find($selector)->getText();
+            $formData[$item['title']] = $selected;
+        }
+
+        return $formData;
+    }
+}

dev/tests/functional/tests/app/Magento/Swatches/Test/Constraint/AssertSwatchConfigurableProductPage.php

@@ -0,0 +1,102 @@
+<?php
+/**
+ * Copyright © 2016 Magento. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+namespace Magento\Swatches\Test\Constraint;
+
+use Magento\Catalog\Test\Constraint\AssertProductPage;
+use Magento\Mtf\Fixture\FixtureInterface;
+use Magento\Catalog\Test\Page\Product\CatalogProductView;
+use Magento\Mtf\Client\BrowserInterface;
+
+/**
+ * Assert that product with swatches and regular dropdown redirect can't be add to cart from catalog catergory page.
+ */
+class AssertSwatchConfigurableProductPage extends AssertProductPage
+{
+   /**
+     * Assert that configurable product with swatches displays correctly.
+     *
+     * @param BrowserInterface $browser
+     * @param CatalogProductView $catalogProductView
+     * @param FixtureInterface  $product
+     */
+    public function processAssert(
+        BrowserInterface $browser,
+        CatalogProductView $catalogProductView,
+        FixtureInterface $product
+    )
+    {
+        $this->product = $product;
+        $this->productView = $catalogProductView->getProductViewWithSwatchesBlock();
+        $this->objectManager->create(
+            \Magento\Swatches\Test\TestStep\AddProductToCartFromCatalogCategoryPageStep ::class,
+            [
+                'product' => $product
+            ]
+        )->run();
+        // we need this line for waiti until page will be fully loaded
+        $this->productView->getSelectedSwatchOptions($this->product);
+        $errors = $this->verify();
+        \PHPUnit_Framework_Assert::assertEmpty(
+            $errors,
+            "\nFound the following errors:\n" . implode(" \n", $errors)
+        );
+    }
+
+    /**
+     * Verify product on product view page.
+     *
+     * @return array
+     */
+    protected function verify()
+    {
+        $errors = parent::verify();
+        $errors[] = $this->verifySwatches();
+
+        return array_filter($errors);
+    }
+
+    /**
+     * Verify selected swatches on product view page.
+     *
+     * @return array
+     */
+    protected function verifySwatches()
+    {
+        $actualData = $this->productView->getSelectedSwatchOptions($this->product);
+        $expectedData = $this->convertCheckoutData($this->product);
+        $this->verifyData($expectedData, $actualData);
+    }
+
+    /**
+     * Get swatch attributes formatter to attributes comparison.
+     *
+     * @param FixtureInterface $product
+     * @return array
+     */
+    public function convertCheckoutData(FixtureInterface  $product)
+    {
+        $out = [];
+        $checkoutData = $product->getCheckoutData();
+        $availableAttributes = $product->getConfigurableAttributesData();
+        $attributesData = $availableAttributes['attributes_data'];
+        foreach ($checkoutData['options']['configurable_options'] as $item) {
+            $out[$item['title']] = $attributesData[$item['title']]['options'][$item['value']]['label'];
+        }
+
+        return $out;
+    }
+
+    /**
+     * Return string representation of the object.
+     *
+     * @return string
+     */
+    public function toString()
+    {
+        return 'Swatch attributes displayed as expected on product page';
+    }
+}

dev/tests/functional/tests/app/Magento/Swatches/Test/Fixture/Cart/Item.php

@@ -13,5 +13,5 @@
  */
 class Item extends ConfigurableCart
 {
-
+    //
 }

dev/tests/functional/tests/app/Magento/Swatches/Test/Fixture/ConfigurableProduct.xml

@@ -12,6 +12,5 @@
             class="Magento\Swatches\Test\Fixture\ConfigurableProduct"
             extends="\Magento\ConfigurableProduct\Test\Fixture\ConfigurableProduct"
             >
-<!--        <field name="configurable_attributes_data" is_required="0" group="variations" source="Magento\Swatches\Test\Fixture\ConfigurableProduct\ConfigurableAttributesData" repository="Magento\ConfigurableProduct\Test\Repository\ConfigurableProduct\ConfigurableAttributesData" />-->
     </fixture>
 </config>