Update snippets/product-info.liquid

snippets/product-info.liquid

@@ -312,7 +312,7 @@
 
 <!-- Script to auto update variant price on variant change, on product page -->
 <script>
-  function ALVariantChanged() {
+  function ALVariantChanged(changedId = "") {
     console.log("AL Variant changed");
     var autolabelVariants = [];
 
@@ -347,12 +347,25 @@
     console.debug(autolabelVariants);
 
     var currentId = document.querySelector("form input[name='id']")?.value;
-
+    console.log("current Id is");
+    console.debug(currentId);
+    if(changedId){
+      currentId = String(changedId);
+    }
     const searchedVariant = autolabelVariants.find((element) => currentId && element.id == currentId);
 
     const alOriginalPrice = document.querySelector('[data-compare-at-price-yagi]');
     const alDiscountedPrice = document.querySelector('[data-price-yagi]');
 
+    console.log("search variant is");
+    console.debug(searchedVariant);
+
+    console.log("original price is");
+    console.debug(alOriginalPrice);
+
+    console.log("discount price is");
+    console.debug(alDiscountedPrice);
+
     if(searchedVariant && alOriginalPrice && alDiscountedPrice){
       alOriginalPrice.textContent = searchedVariant.compare_at_price.replace(/<[^>]*>/g, '');
       alOriginalPrice.parentElement.classList.remove("visually-hidden");
@@ -361,11 +374,10 @@
     }
   }
 
-  document.addEventListener("DOMContentLoaded", (event) => {
-    document.querySelector("form input[name='id']")?.addEventListener('change', () => {
-      setTimeout(() => {
-        ALVariantChanged();
-      }, 10);
-    });
+  document.addEventListener('yagi-variant-change', (e) => {
+    console.log('Received yagi:', e.detail);
+    // setTimeout(() => {
+      ALVariantChanged(e.detail?.variant?.id);
+    // }, 10);
   });
 </script>