12273 move lable replace logic to separete js

Author: b__b

view/frontend/web/js/label.js

@@ -0,0 +1,49 @@
+/**
+ * Copyright © Magefan (support@magefan.com). All rights reserved.
+ * Please visit Magefan.com for license details (https://magefan.com/end-user-license-agreement).
+ */
+
+var MagefanPL = {
+    processConfigurableProductLabel: function (lableEl, maintProductID, selectedProductId) {
+        var self = this;
+        console.log({maintProductID})
+        console.log({selectedProductId})
+
+
+        if (!window.mfLabelProcessed) {
+            window.mfLabelProcessed = {};
+        }
+
+        if (!window.mfLabelProcessed[maintProductID]) {
+            let url = BASE_URL + 'mfpl/label/get?product_ids=' + maintProductID + '&get_children=1&product_page=' +  (this.inProductList ? '0' : '1');
+
+            MagefanJs.ajax({'url':url, 'type': 'GET',
+                success:  function(response) {
+                    response = JSON.parse(response)
+                    console.log(response);
+                    window.mfLabelProcessed[maintProductID] = response.labels;
+                    self.replaceLabel(lableEl, maintProductID, selectedProductId)
+                }
+            });
+        } else {
+            self.replaceLabel(lableEl, maintProductID, selectedProductId)
+        }
+    },
+
+    replaceLabel: function (lableEl, maintProductID, selectedProductId) {
+
+        let labelHtml =  window.mfLabelProcessed[maintProductID] && window.mfLabelProcessed[maintProductID][selectedProductId]
+            ? window.mfLabelProcessed[maintProductID][selectedProductId] : '';
+        console.log(labelHtml);
+
+        if (labelHtml) {
+            const tempDiv = document.createElement('div');
+            tempDiv.innerHTML = labelHtml;
+            const newLable = tempDiv.firstElementChild;
+
+            if (newLable) {
+                lableEl.replaceWith(newLable);
+            }
+        }
+    }
+};

view/frontend/web/js/swatch-renderer-mixin.js

@@ -5,75 +5,42 @@
 
 define([
     'jquery',
-    'jquery-ui-modules/widget'
+    'jquery-ui-modules/widget',
+    'Magefan_ProductLabel/js/label'
 ], function ($) {
     'use strict';
 
     return function (SwatchRenderer) {
         $.widget('mage.SwatchRenderer', SwatchRenderer, {
             _OnClick: function ($this, $widget) {
                 this._super($this, $widget);
-                this.dispatchItemSelect();
+                this.processLable();
             },
 
             _OnChange: function ($this, $widget) {
                 this._super($this, $widget);
-                this.dispatchItemSelect();
+                this.processLable();
             },
 
-            dispatchItemSelect: function () {
+            processLable: function () {
                 if (this.options.jsonConfig.productId) {
-                    this.processProductLabel(this.options.jsonConfig.productId, this.getProductId());
-                }
-
-                $(document).trigger('mfChildItemSelected', {
-                    mainProductId: this.options.jsonConfig.productId,
-                    selectedProductId: this.getProductId()});
-            },
-
-            processProductLabel: function (maintProductID, selectedProductId) {
-                var self = this;
-                console.log({maintProductID})
-                console.log({selectedProductId})
-
-
-                if (!window.mfLabelProcessed) {
-                    window.mfLabelProcessed = {};
-                }
-
-                if (!window.mfLabelProcessed[maintProductID]) {
-                    let url = BASE_URL + 'mfpl/label/get?product_ids=' + maintProductID + '&get_children=1&product_page=' +  (this.inProductList ? '0' : '1');
+                    let lableEl = null;
+    
+                    if (this.inProductList) {
+                        const listItem = this.element.closest('li.item').get(0); // Convert jQuery object to a native DOM element
 
-                    MagefanJs.ajax({'url':url, 'type': 'GET',
-                        success:  function(response) {
-                            response = JSON.parse(response)
-                            console.log(response);
-                            window.mfLabelProcessed[maintProductID] = response.labels;
-                            self.replaceLabel(maintProductID, selectedProductId)
+                        if (listItem) {
+                            lableEl = listItem.querySelector('.mf-label-container');
                         }
-                    });
-                } else {
-                    self.replaceLabel(maintProductID, selectedProductId)
-                }
-            },
-
-            replaceLabel: function (maintProductID, selectedProductId) {
-                let mainLableEl = null;
-
-                if (this.inProductList) {
-                    mainLableEl = this.element.closest('li.item')
-                        .find('.mf-label-container');
-                } else {
-                    mainLableEl = $('.mfpl-product-page');
-                }
-
-                console.log({mainLableEl});
-                let labelHtml =  window.mfLabelProcessed[maintProductID] && window.mfLabelProcessed[maintProductID][selectedProductId]
-                    ? window.mfLabelProcessed[maintProductID][selectedProductId] : '';
-                console.log(labelHtml);
-
-                if (labelHtml) {
-                    mainLableEl.replaceWith(labelHtml);
+                    } else {
+                        lableEl = document.querySelector('.mfpl-product-page');
+                    }
+    
+                    console.log({lableEl});
+    
+                    if (lableEl) {
+                        MagefanPL.processConfigurableProductLabel(lableEl, this.options.jsonConfig.productId, this.getProductId());
+                    }
                 }
             }
         });