My variant.inventory_quantity is undefined

New Member
2 0 1

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)

Shopify Partner
1867 182 765

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.

Liked this post? You might also like our fantastic upsell apps Candy Rack and Candy Cart or offer free gifts with Gift Box. All made with ❤️  and care by Digismoothie
Shopify Partner
40 7 36

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.

Mercury Apps - Human Focused Shopify Apps. https://mercuryapps.io
New Member
2 0 1

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 1
Are you inside a product variant loop or have you assigned a variant to a the variant variable?
0 Likes
New Member
1 0 3

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);
          
        }
New Member
1 0 2

I manage the code for a few Shopify themes. variant.inventory_quantity used to return an integer, but now as of 2019, is not included in the json object, that is why it is undefined. But if your store was created before 2019 variant.inventory_quantity will return the current quantity.

Tourist
5 0 1

Perfect, this works! Thank you

0 Likes
Tourist
23 0 1

So how are you now getting the variant.inventory_quantity?  

0 Likes
Tourist
5 0 1

I am using AlecuMarian's global _VARIANTS method. It is working with the free Simple theme; check out the "Only <x> left in stock" text at https://shopnowbuycheap.com/products/ring-light.

0 Likes