Getting product.metafields.spec.leadTime when changing selecting different variant

Adrian4
Shopify Partner
10 0 0

Hello, I am trying to get my product pages to show different lead time values we have stored for each product variant that also updates when a new variant is chosen. They are stored under {{ product.metafields.spec.leadTime }}. Our theme currrently has the script.js file set to display "In stock" or "Out of stock" based on the inventory and settings. Also from what I read it says that Javascript files are unable to access product metafields.

In our product.liquid file it's displayed from 

{% if section.settings.show_product_quantity %}
   <div id="variant-inventory">
   </div>
{% endif %}

The piece in script.js that handles the function

if ($("#variant-inventory")){
    if (variant) {
      if (variant.inventory_management == "shopify" && variant.inventory_policy != "continue") {
        if (variant.inventory_quantity >0) {
          jQuery('#variant-inventory').html("<span class=in-stock>In Stock!</span>");
        } else {
          jQuery('#variant-inventory').html("<span class=out-of-stock>{{"products.product.product_is_sold_out" | t }}</span>");
        }
      } else {
        jQuery('#variant-inventory').html("<span class=in-stock>In Stock!</span>");
      }
    } else {
        jQuery('#variant-inventory').html("<span class=out-of-stock>{{"products.product.product_is_sold_out" | t }}</span>");
    }
    }

I am looking for a way to write a similar piece of code to access our metafields. Something like:

if ($("#variant-inventory")){
    if (variant) {
      if (variant.inventory_management == "shopify" && variant.inventory_policy != "continue") {
        if (variant.inventory_quantity >0) {
          jQuery('#variant-inventory').html("<span class=in-stock>Typically Ships in {{ product.metafields.spec.leadTime }}</span>");
        } else {
          jQuery('#variant-inventory').html("<span class=out-of-stock>{{"products.product.product_is_sold_out" | t }}</span>");
        }
      } else {
        jQuery('#variant-inventory').html("<span class=in-stock>Typically Ships in {{ product.metafields.spec.leadTime }}</span>");
      }
    } else {
        jQuery('#variant-inventory').html("<span class=out-of-stock>{{"products.product.product_is_sold_out" | t }}</span>");
    }
    }

 

0 Likes