My variant.inventory_quantity is undefined

New Member
2 0 0

Hi,

 

I'm using the Brooklyn theme and attempting to allow customers to continue purchasing items that are out of stock, but displaying a message on the variant page that says "This product is on backorder, please expect delayed shipping". 

I've added some console logging to my theme.js and it seems that my variant object has no attribute named inventory_quantity, and when I try to console.log(variant.inventory_quantity) it comes up as undefined. 

I was wondering why this might be, and where the inventory would be tracked then so that I could conditionally display a message?

Willing to hire a developer if needed, thanks!

My site: https://www.eastlinq.com (password is eastlinq)

0 Likes
Shopify Partner
1838 173 572

The JSON object for product and product variants doesn't have all / same properties as the Liquid object which is why you don't have the variant quantities. Instead, you have the available property of type boolean. However, if you set inventory to allow purchase when out of stock, that available property will be true even when inventory level is 0. So it's of little use for warning customers that it's actually unavailable and would require some waiting for restocking / shipping.

 

In order to get that, you'd need to modify your product template, add an extra <script /> element where you'd serialise the product variant.inventory_quantity along with variant ID using the Liquid | json filter. Then in your theme.js you need to find the bit of JS that handles the switching between variants on product page so that you load your extra JSON data, associate the inventory levels of variants with the already existing variants objects and do your backorder notification from there on.

 

Hope this helps!

 

p.s. if not, Shopify Experts are for hire here or job postings can be made here.

I turn coffee in to code - since 1998
1 Like
Highlighted
Shopify Partner
36 7 34

Hi,

 

Unfortunately you can't use liquid tags in Javascript. 

 

You can also see this guide here on making a separate product template when the stock is 0, would that help?

 

Thanks,

Ken.

Personal Shopify Development for $40 an hour. Contact me by private message or by email at info@kenkinneen.com
1 Like
New Member
2 0 0

Hey so I'm trying to implement your solution, and it turns out in my product-template.liquid even when I just try displaying {{variant.inventory_quanitity}} nothing is displayed. Do you know what the issue could be here? Shouldn't that display the number (for example: 5 if 5 are in stock) on the page?

0 Likes
Shopify Partner
10 0 0
Are you inside a product variant loop or have you assigned a variant to a the variant variable?
0 Likes
New Member
1 0 0

First, save your variants stocks in a JS global variable in product-template.liquid

            {% comment %} Inventory tracking on product page {% endcomment %}
            <div id="variant-inventory" class="{% unless current_variant.available %} hide {% endunless %}">
              {% if current_variant.inventory_management == "shopify" %}
              	<span class="variant-inventory-number">{{ current_variant.inventory_quantity }}</span> in local stock!
              {% else %}
              	This product is available.
              {% endif %}
            </div>
            
            <script>
              window._VARIANTS = {};
              {% for variant in product.variants %}
              	window._VARIANTS[{{ variant.id }}] = {{ variant.inventory_quantity }}
              {% endfor %}
            </script>

Then, in theme.js.liquid, in productPage callback, right before "// Also Show SKU", add the following:

        if (variant.inventory_management == "shopify") {
          var quantity = _VARIANTS[variant.id];
          
          jQuery('.variant-inventory-number').text(quantity > 0 ? quantity : 0);
          
        }
0 Likes