Solved

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

AquaParee
Tourist
7 1 9

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)

AquaParee
Tourist
7 1 9

This is an accepted solution.

This whole post is a solution btw lol 🙂

View solution in original post

Replies 19 (19)