Issues #10559 -Extend swatch using mixins

For  Magento 2.2

Author: srenon

app/code/Magento/Catalog/Pricing/Render/FinalPriceBox.php

@@ -115,7 +115,8 @@ 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>';
     }
 

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="">test</div>',
+            '<div class="price-box price-final_price" data-role="priceBox" data-product-id="" ' .
+            'data-price-box="product-id-">test</div>',
             $result
         );
     }

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

app/code/Magento/Swatches/Block/Product/Renderer/Listing/Configurable.php

@@ -66,6 +66,26 @@ 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

app/code/Magento/Swatches/view/frontend/templates/product/listing/renderer.phtml

@@ -4,37 +4,38 @@
  * See COPYING.txt for license details.
  */
 ?>
-<?php /** @var $block \Magento\Swatches\Block\Product\Renderer\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() ?>;
-
-        $('.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);
+<?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>
 
-        priceBoxes.priceBox({
-            'priceConfig': {
-                priceFormat: jsonConfig.priceFormat,
-                prices: jsonConfig.prices
+<script type="text/x-magento-init">
+    {
+        "[data-role=swatch-option-<?= /* @escapeNotVerified */ $productId ?>]": {
+            "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>
+
+<script type="text/x-magento-init">
+    {
+        "[data-role=priceBox][data-price-box=product-id-<?= /* @escapeNotVerified */ $productId ?>]": {
+            "priceBox": {
+                "priceConfig": {
+                    "priceFormat": <?= /* @escapeNotVerified */ $block->getPriceFormatJson(); ?>,
+                    "prices": <?= /* @escapeNotVerified */ $block->getPricesJson(); ?>
+                }
+            }
+        }
+    }
+</script>