From 155f91c71dba48f3b27f86364a15675b7ab321c7 Mon Sep 17 00:00:00 2001
From: Renon Stewart <srenon@users.noreply.github.com>
Date: Fri, 29 Dec 2017 15:56:12 -0500
Subject: [PATCH] Issues #10559 - Extend swatch using mixins

---
 .../templates/product/listing/renderer.phtml  | 32 +++++++++----------
 1 file changed, 16 insertions(+), 16 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 824b1286f3e32..2b5aa77382759 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,20 +4,20 @@
  * See COPYING.txt for license details.
  */
 ?>
-<?php /** @var $block \Magento\Swatches\Block\Product\Renderer\Listing\Configurable */ ?>
-<div class="swatch-opt-<?php /* @escapeNotVerified */ echo $block->getProduct()->getId() ?>"></div>
-<script>
-    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,
-                enableControlLabel: false,
-                numberToShow: <?php /* @escapeNotVerified */ echo $block->getNumberSwatchesPerProduct(); ?>,
-                jsonConfig: <?php /* @escapeNotVerified */ echo $block->getJsonConfig(); ?>,
-                jsonSwatchConfig: <?php /* @escapeNotVerified */ echo $block->getJsonSwatchConfig(); ?>,
-                mediaCallback: '<?php /* @escapeNotVerified */ echo $block->getMediaCallback() ?>'
-            });
-        });
+<div class="swatch-opt-<?php /* @escapeNotVerified */ echo $block->getProduct()->getId() ?>" data-role="swatch-option-<?php /* @escapeNotVerified */ echo $block->getProduct()->getId() ?>"></div>
+
+<script type="text/x-magento-init">
+    {
+        "[data-role=swatch-option-<?php /* @escapeNotVerified */ echo $block->getProduct()->getId() ?>]": {
+            "Magento_Swatches/js/swatch-renderer": {
+                "selectorProduct": ".product-item-details",
+                "onlySwatches": true,
+                "enableControlLabel": false,
+                "numberToShow": <?php /* @escapeNotVerified */ echo $block->getNumberSwatchesPerProduct(); ?>,
+                "jsonConfig": <?php /* @escapeNotVerified */ echo $block->getJsonConfig(); ?>,
+                "jsonSwatchConfig": <?php /* @escapeNotVerified */ echo $block->getJsonSwatchConfig(); ?>,
+                "mediaCallback": "<?php /* @escapeNotVerified */ echo $block->getMediaCallback() ?>"
+            }
+        }
+    }
 </script>