Update snippets/product-info.liquid

snippets/product-info.liquid

@@ -41,7 +41,7 @@
         endif
       endfor
 
-      if active_discount
+      if active_discount and target.inventory_quantity > 0
         assign variant_price = target.metafields.app--168074346497.auto_discounted_price.value | default: target.price
 
         if target.metafields.app--168074346497.discount_type.value != nil and target.metafields.app--168074346497.discount_type.value != "fixed" and product.metafields.app--168074346497.discount_percentage.value > 0.01
@@ -103,6 +103,18 @@
             {%- endif -%}
             </span>
           </span>
+
+          <span class="price price--compare visually-hidden">
+            <span class="visually-hidden">{{ 'product.general.regular_price' | t }}</span>
+
+            <span class="yagi-original-price" data-compare-at-price-yagi>
+            {%- if settings.currency_code_enabled -%}
+              {{- variant_compare_at_price | money_with_currency -}}
+            {%- else -%}
+              {{- variant_compare_at_price | money -}}
+            {%- endif -%}
+            </span>
+          </span>
         {%- endif -%}
 
         {%- if product.selected_or_first_available_variant.unit_price_measurement -%}
@@ -137,7 +149,7 @@
             {%- capture savings -%}{{ product.selected_or_first_available_variant.compare_at_price | minus: product.selected_or_first_available_variant.price | money }}{%- endcapture -%}
           {%- endif -%}
 
-          <span class="label label--highlight">{{ 'collection.product.discount_html' | t: savings: savings }}</span>
+          <span class="label label--highlight yagi-saving">{{ 'collection.product.discount_html' | t: savings: savings }}</span>
         {%- endunless -%}
       </div>
         </span>
@@ -301,6 +313,7 @@
 <!-- Script to auto update variant price on variant change, on product page -->
 <script>
   function ALVariantChanged() {
+    console.log("AL Variant changed");
     var autolabelVariants = [];
 
     {% for variant in product.variants %}
@@ -325,15 +338,15 @@
       {% assign raw_variant_compare_at_price = variant.compare_at_price %}
       {% endif %}
 
-      {% assign raw_variant_price_money  = raw_variant_price | money_with_currency %}
-      {% assign raw_variant_compare_at_price_money  = raw_variant_compare_at_price | money_with_currency %}
+      {% assign raw_variant_price_money  = raw_variant_price | money %}
+      {% assign raw_variant_compare_at_price_money  = raw_variant_compare_at_price | money %}
 
-      autolabelVariants.push({id: "{{ variant.id }}", raw_price: "{{ raw_variant_price }}", price: `{{ raw_variant_price_money }} CAD`, compare_at_price: `{{ raw_variant_compare_at_price_money }} CAD`});
+      autolabelVariants.push({id: "{{ variant.id }}", raw_price: "{{ raw_variant_price }}", price: `{{ raw_variant_price_money }}`, compare_at_price: `{{ raw_variant_compare_at_price_money }}`});
     {% endfor %}
     console.log("auto label variant");
     console.debug(autolabelVariants);
 
-    var currentId = document.querySelector(".product__content input[name='id']")?.value;
+    var currentId = document.querySelector("form input[name='id']")?.value;
 
     const searchedVariant = autolabelVariants.find((element) => currentId && element.id == currentId);
 
@@ -342,11 +355,17 @@
 
     if(searchedVariant && alOriginalPrice && alDiscountedPrice){
       alOriginalPrice.textContent = searchedVariant.compare_at_price.replace(/<[^>]*>/g, '');
+      alOriginalPrice.parentElement.classList.remove("visually-hidden");
       alDiscountedPrice.textContent = searchedVariant.price.replace(/<[^>]*>/g, '');
+      alDiscountedPrice.parentElement.classList.add("price--highlight");
     }
   }
 
   document.addEventListener("DOMContentLoaded", (event) => {
-    document.querySelector("form input[name='id']")?.addEventListener('change', ALVariantChanged);
+    document.querySelector("form input[name='id']")?.addEventListener('change', () => {
+      setTimeout(() => {
+        ALVariantChanged();
+      }, 10);
+    });
   });
 </script>