From 1350c77193f939e40deea8101cf8fd6befde4abe Mon Sep 17 00:00:00 2001
From: Renon Stewart <srenon@users.noreply.github.com>
Date: Fri, 29 Dec 2017 16:07:55 -0500
Subject: [PATCH 01/11] Issues #10559 -Extend swatch using mixins

For  Magento 2.2
---
 .../templates/product/listing/renderer.phtml  | 55 +++++++++----------
 1 file changed, 26 insertions(+), 29 deletions(-)

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
index 75a39a0e4e270..7e4115034ccf9 100644
--- a/app/code/Magento/Swatches/view/frontend/templates/product/listing/renderer.phtml
+++ b/app/code/Magento/Swatches/view/frontend/templates/product/listing/renderer.phtml
@@ -5,36 +5,33 @@
  */
 ?>
 <?php /** @var $block \Magento\Swatches\Block\Product\Renderer\Listing\Configurable */ ?>
-<div class="swatch-opt-<?= /* @escapeNotVerified */ $block->getProduct()->getId() ?>"></div>
-<script>
-    require([
-        'jquery',
-        'jquery/ui',
-        'Magento_Swatches/js/swatch-renderer',
-        'Magento_Swatches/js/catalog-add-to-cart',
-        'priceBox'
-    ], function ($) {
-        var jsonConfig = <?= /* @escapeNotVerified */ $block->getJsonConfig() ?>;
+<div class="swatch-opt-<?= /* @escapeNotVerified */ $block->getProduct()->getId() ?>" data-role="swatch-option-<?= /* @escapeNotVerified */ $block->getProduct()->getId() ?>"></div>
 
-        $('.swatch-opt-<?= /* @escapeNotVerified */ $block->getProduct()->getId() ?>').SwatchRenderer({
-            selectorProduct: '.product-item-details',
-            onlySwatches: true,
-            enableControlLabel: false,
-            numberToShow: <?= /* @escapeNotVerified */ $block->getNumberSwatchesPerProduct() ?>,
-            jsonConfig: jsonConfig,
-            jsonSwatchConfig: <?= /* @escapeNotVerified */ $block->getJsonSwatchConfig() ?>,
-            mediaCallback: '<?= /* @escapeNotVerified */ $block->getMediaCallback() ?>'
-        });
-
-        var dataPriceBoxSelector = '[data-role=priceBox]',
-            dataProductIdSelector = '[data-product-id=<?= $block->escapeHtml($block->getProduct()->getId()) ?>]',
-            priceBoxes = $(dataPriceBoxSelector + dataProductIdSelector);
+<script type="text/x-magento-init">
+    {
+        "[data-role=swatch-option-<?= /* @escapeNotVerified */ $block->getProduct()->getId() ?>]": {
+            "Magento_Swatches/js/swatch-renderer": {
+                "selectorProduct": ".product-item-details",
+                "onlySwatches": true,
+                "enableControlLabel": false,
+                "numberToShow": <?= /* @escapeNotVerified */ $block->getNumberSwatchesPerProduct(); ?>,
+                "jsonConfig": <?= /* @escapeNotVerified */ $block->getJsonConfig(); ?>,
+                "jsonSwatchConfig": <?= /* @escapeNotVerified */ $block->getJsonSwatchConfig(); ?>,
+                "mediaCallback": "<?= /* @escapeNotVerified */ $block->getMediaCallback() ?>"
+            }
+        }
+    }
+</script>
 
-        priceBoxes.priceBox({
-            'priceConfig': {
-                priceFormat: jsonConfig.priceFormat,
-                prices: jsonConfig.prices
+<script type="text/x-magento-init">
+    {
+        "[data-role=priceBox][data-price-box=product-id-<?= $block->escapeHtml($block->getProduct()->getId()) ?>]": {
+            "priceBox": {
+                "priceConfig": {
+                    "priceFormat": <?= $block->getPriceFormatJson(); ?>,
+                    "prices": <?= $block->getPricesJson(); ?>
+                }
             }
-        });
-    });
+        }
+    }
 </script>

From 33261e0b5096a249a0bd0a239a4c2b9f4cbfdc0c Mon Sep 17 00:00:00 2001
From: Renon Stewart <srenon@users.noreply.github.com>
Date: Fri, 29 Dec 2017 16:13:26 -0500
Subject: [PATCH 02/11] Add new element attribute

querySelectorAll - Selector cannot be integer
---
 app/code/Magento/Catalog/Pricing/Render/FinalPriceBox.php | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/code/Magento/Catalog/Pricing/Render/FinalPriceBox.php b/app/code/Magento/Catalog/Pricing/Render/FinalPriceBox.php
index f370c49cdfa20..afa4519954900 100644
--- a/app/code/Magento/Catalog/Pricing/Render/FinalPriceBox.php
+++ b/app/code/Magento/Catalog/Pricing/Render/FinalPriceBox.php
@@ -116,6 +116,7 @@ protected function wrapResult($html)
         return '<div class="price-box ' . $this->getData('css_classes') . '" ' .
             'data-role="priceBox" ' .
             'data-product-id="' . $this->getSaleableItem()->getId() . '"' .
+            'data-price-box="product-id-' . $this->getSaleableItem()->getId() . '"' .
             '>' . $html . '</div>';
     }
 

From 4fca69d21b15a2614d3df11cfc51bbaba0217c4f Mon Sep 17 00:00:00 2001
From: Renon Stewart <srenon@users.noreply.github.com>
Date: Fri, 29 Dec 2017 16:16:35 -0500
Subject: [PATCH 03/11] Add new JSON method

---
 .../Product/Renderer/Listing/Configurable.php | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/app/code/Magento/Swatches/Block/Product/Renderer/Listing/Configurable.php b/app/code/Magento/Swatches/Block/Product/Renderer/Listing/Configurable.php
index 6a42ad1cc9849..bd2b24dbed630 100644
--- a/app/code/Magento/Swatches/Block/Product/Renderer/Listing/Configurable.php
+++ b/app/code/Magento/Swatches/Block/Product/Renderer/Listing/Configurable.php
@@ -66,6 +66,25 @@ public function getJsonConfig()
         $this->unsetData('allow_products');
         return parent::getJsonConfig();
     }
+    
+    /**
+     * Composes configuration for js price format
+     *
+     * @return string
+     */
+    public function getPriceFormatJson(){
+        return $this->jsonEncoder->encode($this->localeFormat->getPriceFormat());
+    }
+
+
+    /**
+     * Composes configuration for js price
+     *
+     * @return string
+     */
+    public function getPricesJson(){
+        return $this->jsonEncoder->encode($this->getPrices());
+    }
 
     /**
      * Do not load images for Configurable product with swatches due to its loaded by request

From 97779a63eb34d72f82a34ba430cd37b7356f9b9c Mon Sep 17 00:00:00 2001
From: Renon Stewart <srenon@users.noreply.github.com>
Date: Fri, 29 Dec 2017 16:23:37 -0500
Subject: [PATCH 04/11] Refactor code for JSON config

---
 .../Block/Product/View/Type/Configurable.php  | 43 ++++++++++++-------
 1 file changed, 28 insertions(+), 15 deletions(-)

diff --git a/app/code/Magento/ConfigurableProduct/Block/Product/View/Type/Configurable.php b/app/code/Magento/ConfigurableProduct/Block/Product/View/Type/Configurable.php
index b5d02f64e6eb5..198b114197587 100644
--- a/app/code/Magento/ConfigurableProduct/Block/Product/View/Type/Configurable.php
+++ b/app/code/Magento/ConfigurableProduct/Block/Product/View/Type/Configurable.php
@@ -67,7 +67,7 @@ class Configurable extends \Magento\Catalog\Block\Product\View\AbstractView
     /**
      * @var Format
      */
-    private $localeFormat;
+    protected $localeFormat;
 
     /**
      * @var Session
@@ -211,9 +211,6 @@ public function getJsonConfig()
         $store = $this->getCurrentStore();
         $currentProduct = $this->getProduct();
 
-        $regularPrice = $currentProduct->getPriceInfo()->getPrice('regular_price');
-        $finalPrice = $currentProduct->getPriceInfo()->getPrice('final_price');
-
         $options = $this->helper->getOptions($currentProduct, $this->getAllowProducts());
         $attributesData = $this->configurableAttributeData->getAttributesData($currentProduct, $options);
 
@@ -223,17 +220,7 @@ public function getJsonConfig()
             'currencyFormat' => $store->getCurrentCurrency()->getOutputFormat(),
             'optionPrices' => $this->getOptionPrices(),
             'priceFormat' => $this->localeFormat->getPriceFormat(),
-            'prices' => [
-                'oldPrice' => [
-                    'amount' => $this->localeFormat->getNumber($regularPrice->getAmount()->getValue()),
-                ],
-                'basePrice' => [
-                    'amount' => $this->localeFormat->getNumber($finalPrice->getAmount()->getBaseAmount()),
-                ],
-                'finalPrice' => [
-                    'amount' => $this->localeFormat->getNumber($finalPrice->getAmount()->getValue()),
-                ],
-            ],
+            'prices' => $this->getPrices(),
             'productId' => $currentProduct->getId(),
             'chooseText' => __('Choose an Option...'),
             'images' => $this->getOptionImages(),
@@ -248,6 +235,32 @@ public function getJsonConfig()
 
         return $this->jsonEncoder->encode($config);
     }
+    
+   
+    /**
+     * Get product prices for configurable variations
+     *
+     * @return array
+     * @since 100.2.0
+     */
+    protected function getPrices(){
+        $currentProduct = $this->getProduct();
+
+        $regularPrice = $currentProduct->getPriceInfo()->getPrice('regular_price');
+        $finalPrice = $currentProduct->getPriceInfo()->getPrice('final_price');
+
+        return [
+            'oldPrice' => [
+                'amount' => $this->localeFormat->getNumber($regularPrice->getAmount()->getValue()),
+            ],
+            'basePrice' => [
+                'amount' => $this->localeFormat->getNumber($finalPrice->getAmount()->getBaseAmount()),
+            ],
+            'finalPrice' => [
+                'amount' => $this->localeFormat->getNumber($finalPrice->getAmount()->getValue()),
+            ],
+        ];
+    }
 
     /**
      * Get product images for configurable variations

From 494c9c08a1c9491f211f6d234308fc0a7d9f8d31 Mon Sep 17 00:00:00 2001
From: Renon Stewart <srenon@users.noreply.github.com>
Date: Fri, 29 Dec 2017 18:42:12 -0500
Subject: [PATCH 05/11] Update renderer.phtml

---
 .../view/frontend/templates/product/listing/renderer.phtml  | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

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
index 7e4115034ccf9..7462f5f2bca13 100644
--- a/app/code/Magento/Swatches/view/frontend/templates/product/listing/renderer.phtml
+++ b/app/code/Magento/Swatches/view/frontend/templates/product/listing/renderer.phtml
@@ -25,11 +25,11 @@
 
 <script type="text/x-magento-init">
     {
-        "[data-role=priceBox][data-price-box=product-id-<?= $block->escapeHtml($block->getProduct()->getId()) ?>]": {
+        "[data-role=priceBox][data-price-box=product-id-<?= /* @escapeNotVerified */ $block->escapeHtml($block->getProduct()->getId()) ?>]": {
             "priceBox": {
                 "priceConfig": {
-                    "priceFormat": <?= $block->getPriceFormatJson(); ?>,
-                    "prices": <?= $block->getPricesJson(); ?>
+                    "priceFormat": <?= /* @escapeNotVerified */ $block->getPriceFormatJson(); ?>,
+                    "prices": <?= /* @escapeNotVerified */ $block->getPricesJson(); ?>
                 }
             }
         }

From 20b9575ba10c9de8fc26b550fb3b675bd72d766a Mon Sep 17 00:00:00 2001
From: Renon Stewart <srenon@users.noreply.github.com>
Date: Fri, 29 Dec 2017 19:22:30 -0500
Subject: [PATCH 06/11] Update FinalPriceBox.php

---
 app/code/Magento/Catalog/Pricing/Render/FinalPriceBox.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/code/Magento/Catalog/Pricing/Render/FinalPriceBox.php b/app/code/Magento/Catalog/Pricing/Render/FinalPriceBox.php
index afa4519954900..e0a92ea0e0bea 100644
--- a/app/code/Magento/Catalog/Pricing/Render/FinalPriceBox.php
+++ b/app/code/Magento/Catalog/Pricing/Render/FinalPriceBox.php
@@ -115,7 +115,7 @@ protected function wrapResult($html)
     {
         return '<div class="price-box ' . $this->getData('css_classes') . '" ' .
             'data-role="priceBox" ' .
-            'data-product-id="' . $this->getSaleableItem()->getId() . '"' .
+            'data-product-id="' . $this->getSaleableItem()->getId() . '" ' .
             'data-price-box="product-id-' . $this->getSaleableItem()->getId() . '"' .
             '>' . $html . '</div>';
     }

From 089b46898368b06c1a637e0953662a05a206608f Mon Sep 17 00:00:00 2001
From: Renon Stewart <srenon@users.noreply.github.com>
Date: Fri, 29 Dec 2017 19:44:15 -0500
Subject: [PATCH 07/11] Update FinalPriceBoxTest.php

---
 .../Catalog/Test/Unit/Pricing/Render/FinalPriceBoxTest.php      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/code/Magento/Catalog/Test/Unit/Pricing/Render/FinalPriceBoxTest.php b/app/code/Magento/Catalog/Test/Unit/Pricing/Render/FinalPriceBoxTest.php
index fc45a2e0c2146..78f4b9c326fba 100644
--- a/app/code/Magento/Catalog/Test/Unit/Pricing/Render/FinalPriceBoxTest.php
+++ b/app/code/Magento/Catalog/Test/Unit/Pricing/Render/FinalPriceBoxTest.php
@@ -246,7 +246,7 @@ public function testRenderMsrpEnabled()
 
         //assert price wrapper
         $this->assertEquals(
-            '<div class="price-box price-final_price" data-role="priceBox" data-product-id="">test</div>',
+            '<div class="price-box price-final_price" data-role="priceBox" data-product-id="" data-price-box="product-id-">test</div>',
             $result
         );
     }

From ca471e473235e9884ad77131868162c44fa530d0 Mon Sep 17 00:00:00 2001
From: Renon Stewart <srenon@users.noreply.github.com>
Date: Sat, 30 Dec 2017 10:36:38 -0500
Subject: [PATCH 08/11] Update Configurable.php

---
 .../Block/Product/View/Type/Configurable.php                  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/code/Magento/ConfigurableProduct/Block/Product/View/Type/Configurable.php b/app/code/Magento/ConfigurableProduct/Block/Product/View/Type/Configurable.php
index 198b114197587..f9a6b12992386 100644
--- a/app/code/Magento/ConfigurableProduct/Block/Product/View/Type/Configurable.php
+++ b/app/code/Magento/ConfigurableProduct/Block/Product/View/Type/Configurable.php
@@ -236,14 +236,14 @@ public function getJsonConfig()
         return $this->jsonEncoder->encode($config);
     }
     
-   
     /**
      * Get product prices for configurable variations
      *
      * @return array
      * @since 100.2.0
      */
-    protected function getPrices(){
+    protected function getPrices()
+    {
         $currentProduct = $this->getProduct();
 
         $regularPrice = $currentProduct->getPriceInfo()->getPrice('regular_price');

From c84087e4d8d35d1879b3adf6e7f5a95148081df7 Mon Sep 17 00:00:00 2001
From: Renon Stewart <srenon@users.noreply.github.com>
Date: Sat, 30 Dec 2017 10:38:05 -0500
Subject: [PATCH 09/11] Update Configurable.php

---
 .../Block/Product/Renderer/Listing/Configurable.php        | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/app/code/Magento/Swatches/Block/Product/Renderer/Listing/Configurable.php b/app/code/Magento/Swatches/Block/Product/Renderer/Listing/Configurable.php
index bd2b24dbed630..54943498ee629 100644
--- a/app/code/Magento/Swatches/Block/Product/Renderer/Listing/Configurable.php
+++ b/app/code/Magento/Swatches/Block/Product/Renderer/Listing/Configurable.php
@@ -72,17 +72,18 @@ public function getJsonConfig()
      *
      * @return string
      */
-    public function getPriceFormatJson(){
+    public function getPriceFormatJson()
+    {
         return $this->jsonEncoder->encode($this->localeFormat->getPriceFormat());
     }
 
-
     /**
      * Composes configuration for js price
      *
      * @return string
      */
-    public function getPricesJson(){
+    public function getPricesJson()
+    {
         return $this->jsonEncoder->encode($this->getPrices());
     }
 

From ec51bd27f89fee5152c2d818b0422881d48f6725 Mon Sep 17 00:00:00 2001
From: Renon Stewart <s.renon@gmail.com>
Date: Sat, 30 Dec 2017 17:12:01 -0500
Subject: [PATCH 10/11] Fix error in PHP code sniffer

---
 .../Test/Unit/Pricing/Render/FinalPriceBoxTest.php    |  3 ++-
 .../frontend/templates/product/listing/renderer.phtml | 11 +++++++----
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/app/code/Magento/Catalog/Test/Unit/Pricing/Render/FinalPriceBoxTest.php b/app/code/Magento/Catalog/Test/Unit/Pricing/Render/FinalPriceBoxTest.php
index 78f4b9c326fba..6322fc76ff442 100644
--- a/app/code/Magento/Catalog/Test/Unit/Pricing/Render/FinalPriceBoxTest.php
+++ b/app/code/Magento/Catalog/Test/Unit/Pricing/Render/FinalPriceBoxTest.php
@@ -246,7 +246,8 @@ public function testRenderMsrpEnabled()
 
         //assert price wrapper
         $this->assertEquals(
-            '<div class="price-box price-final_price" data-role="priceBox" data-product-id="" data-price-box="product-id-">test</div>',
+            '<div class="price-box price-final_price" data-role="priceBox" data-product-id="" ' .
+            'data-price-box="product-id-">test</div>',
             $result
         );
     }
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
index 7462f5f2bca13..3747bbd580b35 100644
--- 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,12 +4,15 @@
  * See COPYING.txt for license details.
  */
 ?>
-<?php /** @var $block \Magento\Swatches\Block\Product\Renderer\Listing\Configurable */ ?>
-<div class="swatch-opt-<?= /* @escapeNotVerified */ $block->getProduct()->getId() ?>" data-role="swatch-option-<?= /* @escapeNotVerified */ $block->getProduct()->getId() ?>"></div>
+<?php
+    /** @var $block \Magento\Swatches\Block\Product\Renderer\Listing\Configurable */
+    $productId = $block->getProduct()->getId();
+?>
+<div class="swatch-opt-<?= /* @escapeNotVerified */ $productId ?>" data-role="swatch-option-<?= /* @escapeNotVerified */ $productId ?>"></div>
 
 <script type="text/x-magento-init">
     {
-        "[data-role=swatch-option-<?= /* @escapeNotVerified */ $block->getProduct()->getId() ?>]": {
+        "[data-role=swatch-option-<?= /* @escapeNotVerified */ $productId ?>]": {
             "Magento_Swatches/js/swatch-renderer": {
                 "selectorProduct": ".product-item-details",
                 "onlySwatches": true,
@@ -25,7 +28,7 @@
 
 <script type="text/x-magento-init">
     {
-        "[data-role=priceBox][data-price-box=product-id-<?= /* @escapeNotVerified */ $block->escapeHtml($block->getProduct()->getId()) ?>]": {
+        "[data-role=priceBox][data-price-box=product-id-<?= /* @escapeNotVerified */ $productId ?>]": {
             "priceBox": {
                 "priceConfig": {
                     "priceFormat": <?= /* @escapeNotVerified */ $block->getPriceFormatJson(); ?>,

From d4fa8a57023de659499a3751cd78e9884124f90f Mon Sep 17 00:00:00 2001
From: Renon Stewart <srenon@users.noreply.github.com>
Date: Tue, 9 Jan 2018 08:08:41 -0500
Subject: [PATCH 11/11] Update renderer.phtml

---
 .../view/frontend/templates/product/listing/renderer.phtml     | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

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
index 3747bbd580b35..f8c55d6426982 100644
--- a/app/code/Magento/Swatches/view/frontend/templates/product/listing/renderer.phtml
+++ b/app/code/Magento/Swatches/view/frontend/templates/product/listing/renderer.phtml
@@ -8,7 +8,8 @@
     /** @var $block \Magento\Swatches\Block\Product\Renderer\Listing\Configurable */
     $productId = $block->getProduct()->getId();
 ?>
-<div class="swatch-opt-<?= /* @escapeNotVerified */ $productId ?>" data-role="swatch-option-<?= /* @escapeNotVerified */ $productId ?>"></div>
+<div class="swatch-opt-<?= /* @escapeNotVerified */ $productId ?>" 
+     data-role="swatch-option-<?= /* @escapeNotVerified */ $productId ?>"></div>
 
 <script type="text/x-magento-init">
     {