variant.inventory_quantity ALTERNATIVE - How to show item inventory quantity (WITH VARIANTS)

Highlighted
New Member
1 0 4

BEFORE YOU START, note that I am using the Debut theme for the examples and that It has jQuery in It. I WILL use some jQuery code in this alternative. If your theme does not support jQuery, feel free to ADAPT IT into JavaScript.

 

If you are new to Shopify, know that the variant.inventory_quantity has sadly been deprecated (removed from Shopify) and returns « undefined » when called in the theme.js file. Here’s an alternate way to still show how many items are left for every variant.

 

THIS IS READ ONLY

 

First step, you want to go in the product.liquid (or product-template.liquid) file. Depending on your theme, one of these two has the html code to show the product page. I am personally using the Debut theme and it was in product-template.liquid.

 

Second step, you want to find where you want to show to the item quantity and add this line of code:

<div>We currently have <B id="variant-inventory">{{ current_variant.inventory_quantity }}</B> in stock.</div>

 

Note that you can personalise this line how you want, but be sure to have the line <B id="variant-inventory">{{ current_variant.inventory_quantity }}</B> . Note that the html tag can be anything, here I wanted it to be in bold for esthetic so I put <B></B>, but be sure to keep the id="variant-inventory”.

 

Here’s an example: 

 

html_code.PNG

 

Third step, once you are done with the html, it should show you how many items there is for the current item variant, but if you change the variant, the quantity won’t change (It is normal).

If you have a product with no variant, you are done.

 

Example:

example.PNG

 

For variants, you will need to open your theme.js or the file associated to it depending on your theme and go to the place in your code were a function executes the change of information when the variant changes.

In the debut theme, it is the “_onSelectChange: function()”.

 

Note: ctrl + F to make a search in the document and look for key words that could bring you at somewhere similar.

 

Example:

ctrl.PNG

 

Fourth step, add this function and call it:

 

call: 

this._updateQuantity(variant);

The variant here is a parameter that detects witch variant is active. This variates between themes.

 

function:

_updateQuantity: function(){
      
      setTimeout(function(){ $( "#variant-inventory" ).load(window.location.href + " #variant-inventory" ); }, 100);

   },

 

Example:

code.PNG

 

Explanation: the line in html “{{ current_variant.inventory_quantity }}” shows the current amount of items for the variant that is showing on the screen on refresh. So, if you select a variant and refresh the page, it will show the inventory quantity of the current variant selected.

 

Therefore, you don’t want to refresh the whole page on a variant change, but just the number of the quantity. Note that the set.timeout is there to refresh the location first an then show the inventory quantity. Otherwise, it will refresh, but it will show the quantity of the previous item.

 

In conclusion, this Is not the most optimised alternative and it does take a fraction of second to load, but It’s the simplest way I have found.

 

If you guys have any other way or have a better way of doing it, feel free to share down below.

 

Hope it helps!

 

Bonus: if want to know how I can show specific images for my variants, see this video

 

Highlighted
Shopify Partner
4 0 0

Thanks for this summary! That's a creative solution. This was super easy when variant.inventory_quantity existed, and I wish there was a more straightforward way to do this still, but hey this works for now.

0 Likes
Highlighted
New Member
1 0 0

I'm having problems with the last bit of this - I was able to enter the code that displays variant quantity available but when I add the function to refresh it with each new variant selected it isn't working. I'm wondering if I'm placing it in the wrong spot. I'm super new to this - any help would be appreciated.

0 Likes
Highlighted
New Member
2 0 0

Hi,

 

This worked really well for me thanks for this. however the note is not lining up with the rest of the texts. any idea how i can fix this?

 

Capture.PNG

0 Likes
Highlighted
New Member
1 0 0

Thank you for this tutorial. I added this to my page and it worked!

0 Likes
Highlighted
New Member
1 0 0

Exactly what I'm looking for. 

But my problem now is when there are two options, it doesn't update the quantity.

Is there a difference between a single option and multiple options in terms of onSelectChange function?

mccy02_0-1598186208201.png

==================================

mccy02_1-1598186306991.png

 

 

0 Likes