My variant.inventory_quantity is undefined

MoniAli
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)

KarlOffenberger
Shopify Partner
1867 182 801

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
kenkinneen
Shopify Partner
41 7 39

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.
Increase conversion rate with : https://apps.shopify.com/order-delivery-deadline
MoniAli
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
JeremyDevmore
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
AlecuMarian
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);
          
        }
Nate_Daily
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.

spbp
Tourist
5 0 1

Perfect, this works! Thank you

0 Likes
Bill6
Tourist
27 0 3

So how are you now getting the variant.inventory_quantity?  

0 Likes
spbp
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