FROM CACHE - en_header

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

Solved
AquaParee
Tourist
7 1 8

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

 

Accepted Solution (1)

Accepted Solutions
AquaParee
Tourist
7 1 8

This is an accepted solution.

This whole post is a solution btw lol 🙂

View solution in original post

Replies 17 (17)
KJ_Kevin
Shopify Partner
4 0 1

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.

laurenp1
New Member
2 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.

bohomnl
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

Deeh
New Member
1 0 1

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

mccy02
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

 

 

Nico38
Trailblazer
172 5 59

hello !

i need your help.

it's working for me but i need to hide it on the gift card page.

thx you !

 

AquaParee
Tourist
7 1 8

it is probably a css thing. You may want to add a class and create a style to ajust it like you want. You could also just look the css of your theme and change it there.

AquaParee
Tourist
7 1 8

AquaParee
Tourist
7 1 8

Sorry for late responses (or no responses). I do not receive notifications when people write questions and I have been working on other project outside of shopify. Hope you guys find your answers! 

Christopher33
New Member
2 0 1

Hi AquaParee!

This worked great! 

Can you assist with one more thing, if I have 10 or more of an item (let's say I have 90 of something) can you tell me how to make it just display '10+' vs. the actual number? 

Thank you for everything

AquaParee
Tourist
7 1 8

I would create a jQuery function to adjust the displayed number.

//not sure about this
if ($("#variant-inventory").html() > 10) { $("#variant-inventory").html("10+"); }
    else { $("#variant-inventory").html("{{ current_variant.inventory_quantity }}"); }

 

if this doesn't work, try removing the " " around "{{ current_variant.inventory_quantity }}" in my example.

You will then need to add this in your code at the section where you select your item in the first place, then on its variant change.

Christopher33
New Member
2 0 1

Hi/Thank you!

So I see this at first 

We currently have {{ current_variant.inventory_quantity }} in stock.
SOLD OUT
 
I removed the " " then it puts in the correct quantity... problem however the Search Functionality (Search Glass) at the top of the page stops functioning. I placed the code into theme.js for the Debut theme.
 
We're so close :). If you'd like me to contact you via e-mail please let me know - I'd be happy to provide a donation to you!
AquaParee
Tourist
7 1 8

if without my previous code the search bar was fine, it is probably a variable, class, or id problem. something must be interfering with your search bar.

Thank you for your offer, but I do not take donation. I am just a student trying to help fellow programmers 🙂 If you really want to do something for me, you could go on my LinkedIn profile and endorse me, it will help me become a trainee for a future employer.

good luck 🙂🙂

My LinkedIn 

AquaParee
Tourist
7 1 8

This is an accepted solution.

This whole post is a solution btw lol 🙂

WTCT-DF
New Member
2 0 0

This shows the inventory for the default variant, but does not update when selecting a different variant.  I don't know why it isn't working for me when it obviously works for others.  Maybe a change in the theme since this was posted?

idwithin
Excursionist
23 0 5

Hi there, great tutorial, it works perfectly on the Product page on my Debut theme.

One thing I was wondering that I noticed was it doesn't work when I add the code into the "Featured Product" section on the Homepage. Is there any way to have it work for this section too? I thought it would automatically work since it all looked like the same code but unfortunately it doesn't

Thanks

PaulNewton
Shopify Partner
4335 322 932

If you need this to update per variant and or in different contexts you may want to mix the lessons here with implementing a customized version of Product availability modified with the variant.inventory_quantity data , but skipping the drawer-modal.

As that's using the section rendering API to get contextual variant structures. 

https://shopify.dev/themes/delivery-fulfillment/pickup-availability 

Finally Combinable Discounts - EARLY ACCESS ONLY - Use Free Shipping With Other Discounts

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org
Problem Solved? ✔Accept and Like solutions to help future merchants
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com