Solved

Display variant inventory quantity on product page (Minimal theme)

martinR1
Shopify Partner
19 1 7

The intention is to show product variant inventory details on the product page.

This should change as the variant changes, exactly as the price changes.

 

After reading various posts with a similar question, I failed to find an answer and wrote my own code, which is not working.

 

The approach taken was to add a place holder in the sections/product-template.liquid and to use jquery to change the text from productPage: function(options) in assets/theme.js

 

To my surprise, I found that inside productPage variant.inventory_quantity is not defined, whereas variant.price is.

To explain better the problem I am pasting below the differences between the original Minimal Theme and the one I am using.

 

diff -w -i original/sections/product-template.liquid myversion/sections/product-template.liquid
181a182,190
>           <div id="variant-inventory">
>           {% if variant.inventory_management == "shopify" and variant.inventory_quantity > 0 %}
>             In Stock ( {{ variant.inventory_quantity }} )
>           {% else %} 
>             Print On Demand ( {{ variant.inventory_quantity }} )
>           {% endif %}
>           </div>

diff -w -i original/assets/theme.js myversion/assets/theme.js
1021a1022,1042
>         if (variant.inventory_quantity)
>         {
>           if (variant.inventory_management == "shopify" && variant.inventory_policy != "continue") 
>           {
>             if ( variant.inventory_quantity > 0){
>               jQuery('#variant-inventory').text('In Stock (' + variant.inventory_quantity + ')');
>             } 
>             else {
>               jQuery('#variant-inventory').text('Print On Demand');
>             }
>           } else {
>             jQuery('#variant-inventory').text("This product is available");
>           }
>         } else {
>           jQuery('#variant-inventory').text('variant.inventory_quantity undefined for price ' + variant.price);
>         }
>       } else {
>         jQuery('#variant-inventory').text("");
>       }
>       
>       if (variant) {

 

 

And here is what I get in a product page:

First Variant

First VariantFirst Variant

 

Second Variant

Screenshot 2020-11-19 at 17.51.07.png

i.e: both show that inventory_quantity is undefined but price is well defined !!!!!!

 

Accepted Solution (1)
martinR1
Shopify Partner
19 1 7

This is an accepted solution.

I got the solution by looking at the way different people tried solved similar issues.

The problem I found as described in my initial message is that the variant object that arrives to productPage is incomplete, i.e, it is not a full ShopifyAPI::Variant.

So, the solution is to assign to a global object all possible variant inventor_quantity and retrieve the appropriate one at productPage time.

 

The following are the differences applied to the original Minimal theme.

diff -w -i original/sections/product-template.liquid myversion/sections/product-template.liquid
0a1,7
> <script>
>   window._VARIANTS = {};
>   {% for variant in product.variants %}
>     window._VARIANTS[{{ variant.id }}] = {{ variant.inventory_quantity }}
>   {% endfor %}
> </script>
> 
207a215,227
>             <div class="product-inventory-available">
>               <div id="variant-inventory">
>               {% if variant.inventory_management == "shopify" and variant.inventory_quantity > 0 %}
>                 In Stock ( {{ variant.inventory_quantity }} )
>               {% else %} 
>                 Print On Demand ( {{ variant.inventory_quantity }} )
>               {% endif %}
>               </div>
>                <div id="variant-inventory2">
> 			    Delivered next week.
>                </div>
>             </div>
>           

diff -w -i original/assets/theme.js myversion/assets/theme.js
1021a1022,1045
>         var quantity = _VARIANTS[variant.id];
> 
>         if (!quantity) {
>           quanrtity = 0
>         }
>           
>         if (variant.inventory_management == "shopify" && variant.inventory_policy != "continue")
>         {
>           if ( quantity > 0){
>             jQuery('#variant-inventory').text( 'Available: ' + quantity + ' in stock.');
>             jQuery('#variant-inventory2').text('Delivered next day (if ordered before 1pm).');
>           }
>           else {
>             jQuery('#variant-inventory').text( 'Available: Print on demand.');
>             jQuery('#variant-inventory2').text('Delivered next week.');
>           }
>         } else {
>           jQuery('#variant-inventory').text("This product is available");
>         }
>       } else {
>         jQuery('#variant-inventory').text('quantity undefined for price ' + variant.price);
>       }
> 
>       if (variant) {

 

 

 

View solution in original post

Replies 27 (27)

Smeelah
Navigator
333 1 91

Hi @martinR1 

I see that you have it working on your website. I am using Minimal as well and would love to be able to show the variant inventory. Would you mind sharing the final code?

Thanks,

Leila

martinR1
Shopify Partner
19 1 7

This is an accepted solution.

I got the solution by looking at the way different people tried solved similar issues.

The problem I found as described in my initial message is that the variant object that arrives to productPage is incomplete, i.e, it is not a full ShopifyAPI::Variant.

So, the solution is to assign to a global object all possible variant inventor_quantity and retrieve the appropriate one at productPage time.

 

The following are the differences applied to the original Minimal theme.

diff -w -i original/sections/product-template.liquid myversion/sections/product-template.liquid
0a1,7
> <script>
>   window._VARIANTS = {};
>   {% for variant in product.variants %}
>     window._VARIANTS[{{ variant.id }}] = {{ variant.inventory_quantity }}
>   {% endfor %}
> </script>
> 
207a215,227
>             <div class="product-inventory-available">
>               <div id="variant-inventory">
>               {% if variant.inventory_management == "shopify" and variant.inventory_quantity > 0 %}
>                 In Stock ( {{ variant.inventory_quantity }} )
>               {% else %} 
>                 Print On Demand ( {{ variant.inventory_quantity }} )
>               {% endif %}
>               </div>
>                <div id="variant-inventory2">
> 			    Delivered next week.
>                </div>
>             </div>
>           

diff -w -i original/assets/theme.js myversion/assets/theme.js
1021a1022,1045
>         var quantity = _VARIANTS[variant.id];
> 
>         if (!quantity) {
>           quanrtity = 0
>         }
>           
>         if (variant.inventory_management == "shopify" && variant.inventory_policy != "continue")
>         {
>           if ( quantity > 0){
>             jQuery('#variant-inventory').text( 'Available: ' + quantity + ' in stock.');
>             jQuery('#variant-inventory2').text('Delivered next day (if ordered before 1pm).');
>           }
>           else {
>             jQuery('#variant-inventory').text( 'Available: Print on demand.');
>             jQuery('#variant-inventory2').text('Delivered next week.');
>           }
>         } else {
>           jQuery('#variant-inventory').text("This product is available");
>         }
>       } else {
>         jQuery('#variant-inventory').text('quantity undefined for price ' + variant.price);
>       }
> 
>       if (variant) {

 

 

 

Smeelah
Navigator
333 1 91

Hi @martinR1 

I really appreciate your reply and for taking the time to post that:)

It seems like it would be working for me except the code added to theme.js is breaking my store. (Variant selector is gone, main navigation drop down menu is gone and a couple other things.)

I'm unfamiliar with js. I could not find similar code to edit so I just pasted it to the file:/

martinR1
Shopify Partner
19 1 7

You probably inserted the code in the wrong place ( or did not remove the diffs prefixes ">" )

The diff numbers are telling you where to insert with respect to the original code.

1021a1022,1045

 The numbers say that at line 1021 you should insert lines 1022 to 1045

Here is the context where you should be inserting:

    productPage: function(options) {
      var self = this;
      var moneyFormat = options.money_format;
      var variant = options.variant;
      var translations = options.translations;

      if (variant) {
=====> INSERT HERE <=====

 

 

So it should look as follows:

 ... 
productPage: function(options) {
      var self = this;
      var moneyFormat = options.money_format;
      var variant = options.variant;
      var translations = options.translations;

      if (variant) {
        var quantity = _VARIANTS[variant.id];

        if (!quantity) {
          quanrtity = 0
        }

        if (variant.inventory_management == "shopify" && variant.inventory_policy != "continue")
        {
          if ( quantity > 0){
            jQuery('#variant-inventory').text( 'Available: ' + quantity + ' in stock.');
            jQuery('#variant-inventory2').text('Delivered next day (if ordered before 1pm).');
          }
          else {
            jQuery('#variant-inventory').text( 'Available: Print on demand.');
            jQuery('#variant-inventory2').text('Delivered next week.');
          }
        } else {
          jQuery('#variant-inventory').text("This product is available");
        }
      } else {
        jQuery('#variant-inventory').text('quantity undefined for price ' + variant.price);
      }

      if (variant) {
        // Update variant image, if one is set
        if (variant.featured_image) {
          var newImg = variant.featured_image;
          self.switchImage(newImg.id);
        }

        // Select a valid variant if available
       ...
Smeelah
Navigator
333 1 91

Thank you @martinR1 . It is working perfectly. 

I did put it in the wrong place. My line numbers are different but it wouldn't have made a difference. I wouldn't have known where to place the code if you hadn't told me. Thanks again! You made my day. 

Leila

Justin_MWMW
New Member
12 0 0

I'm trying to get this working as well, I have a quick question @martinR1 .  In one of your sections it shows:

 

if (!quantity) {
          quanrtity = 0
        }

 

is there a misspelling there, should "quanrtity" be "quantity"? 

martinR1
Shopify Partner
19 1 7

Hello Justin,

Oops, you are correct, well spotted.

The reason it worked for me so far is probably that I did not encounter the extreme case where there is no quantity. The check for !quantity is just for robustness to produce a "0" instead of a blank when displaying quantity.

 

Thank you

 

Justin_MWMW
New Member
12 0 0

Thank you so much for this solution!  I am a lone individual running a small business, and it felt so unprofessional to not show the available inventory prior to checkout - the customer experience was frustrating, and I felt it would drive people away.

With this simple adjustment, my potential customers will experience less friction and hopefully continue to engage with my site.  THANK YOU martin21, and thank you Smeelah for linking me to this thread!!

martinR1
Shopify Partner
19 1 7

Justin,

... I am a lone individual running a small business ...

so am I 🙂

 

A pleasure to be able to share my findings.

EKeating
Tourist
5 0 2

Hello,

@martinR1  am setting up my site with the minimal theme https://emily-keating-designs.myshopify.com/ and I would love for my customers to be able to see the quantity available for an item on the product page, instead of finding their desired quantity unavailable at the checkout stage where it can be frustrating. Will the code you have posted here work even though I don't have variants set up? Although I don't really know the coding, I can at least get to the edit code section and make little changes here and there if I can figure out where it goes. TIA for any advice. 

-Emily

martinR1
Shopify Partner
19 1 7

Hello Emily,

 

I have not tested it with a product with no variants, however, I just created a test product with no variants. Looking at the JSON associated with it it does have one single variant, as a container for the data that would otherwise exist for each variant. It does make sense to implement a generic solution for no variants as just one variant.

So I suggest you do try my fix. And please let the world know if it works 🙂

EKeating
Tourist
5 0 2

Okay, for other jumping in here who are not used to doing the coding, this is what I did to make it easier for customers to see how many of an item is available and to choose the preferred amount to put in their cart. I am using the minimal theme.

1. I went to my online store under sales channels, chose themes then selected "edit code" from the drop-down box in my theme to the right (on a desktop). 

2. I scrolled to the "sections" category on the left and chose "product-template.liquid" 

3. I scrolled down to line 207 and inserted the following lines under the line that ended with "select". I'm not even sure if I needed all of that but it's working. Then I had to save the file to check it- I'm not sure if there is way to test this without actually changing your live site. However, if you want to go back to your original configuration you can choose an older version of the file.

<div class="product-inventory-available">
<div id="variant-inventory">
{% if variant.inventory_management == "shopify" and variant.inventory_quantity > 0 %}
Amount Available: {{ variant.inventory_quantity }}
{% endif %}
</div>

4. Finally, I went back out to the theme customization and choose "Product pages" under the drop-down list at the top, then chose product pages on the left, then checked the box for "show quantity selector". 

Thanks to the others in this thread for the advice! 

PureTime
Explorer
66 2 23

Hi @martinR1 

It partly works for me at https://puretime.dk/collections/vaegure-i-trae/products/largo-vaegur-i-morkt-egetrae-med-tal?variant... 

However - as soon as I change the variant through the swatches, the quantity doesn't change 😞

I can't figure out why - if it has to do with the swatch section?

EDIT: Well-well - not sure what I did but it seems to work now 🙂

martinR1
Shopify Partner
19 1 7
  • It works for me perfectly as described in my early post.
PureTime
Explorer
66 2 23

Yes sorry - I edited my post probably after you started writing yours.

Works great for me now.

exempt
Visitor
3 0 0

can someone tell me where to insert this code in the supply theme product-template.liquid file? Thanks in advance for any help you can supply...Mike

<div class="product-inventory-available">
<div id="variant-inventory">
{% if variant.inventory_management == "shopify" and variant.inventory_quantity > 0 %}
Amount Available: {{ variant.inventory_quantity }}
{% endif %}
</div>

Smeelah
Navigator
333 1 91

 

I placed it just after:

<div class="product-single__quantity{% unless section.settings.product_quantity_enable %} is-hidden{% endunless %}">
<label for="Quantity">{{ 'products.product.quantity' | t }}</label>
<input type="number" id="Quantity" name="quantity" value="1" min="1" class="quantity-selector">
</div>

exempt
Visitor
3 0 0
Thank you very much for helping.

Kind of you.

Before I do this I just want to make sure this code change will show a
quantity in stock for each product in a dropdown box of variants.

Thanks Again.Mike
exempt
Visitor
3 0 0

Thank you very much for helping. Kind of you.

Before I do this I just want to make sure this code change will show a quantity in stock for each product in a drop down box of variants.

Thanks Again…Mike

Smeelah
Navigator
333 1 91

It does for me but you will really need to test it.

 

My code is just a bit different btw.

<div style="color: red" class="product-inventory-available">
<div id="variant-inventory">
{% if variant.inventory_management == "shopify" and variant.inventory_quantity < 3 %}
Only {{ variant.inventory_quantity }} available.
{% else %}
{% endif %}
</div>
</div>

NattyIce311
Excursionist
32 0 4

@Smeelah This shows up but it doesn't change the quantity number when I select different size variants. I tested it on a product that had a different number of each size, one of them being sold out, and they all just said "2 available"

Was anyone able to figure out how to get each size/variant to display the correct stock amount?

I have tried every solution here 😕

JassbyMJ
Visitor
2 0 0

@EKeating

I used this code and followed all directions, however, the inventory doesn't change when variant changes. For instance, if I have  3 large shirts and 2 small, the amount available doesn't change between them. It stays at 2 available. Can you help me?

martinR1
Shopify Partner
19 1 7

Hi @EKeating, have you seen the accepted solution posted 11-21-2020 03:55 PM ?

Look also to the "context" differences (11-21-2020 04:37 PM)  in case your code is different.

And to the correction of quanrtity, it should be quantity ( 11-22-2020 11:49 AM)

 

Justin_MWMW
New Member
12 0 0

I am new to Shopify terminology, but I believe this product from my page has no variants:  https://midwestmealworms.com/collections/all/products/sifting-tray

and it works / shows inventory, as do my products w/ variants.

ledprofiles
New Member
5 0 0

Worked Great! Thank you! Appreciate!

How can we adjust the code to take it to the next level by adding multi stocking location. To show like availability on location A is X and location B is Y.

JET0403
New Member
8 0 0

Hi

Just to add to this thread. You can also do the following...

In  product-template.liquid add the following to line 159 using Minimal-Modern theme:

 

{% for variant in product.variants %}
<p>Only {{ variant.inventory_quantity }} left in stock.</p>
{% endfor %}

 

This will output "Only 5 (or whatever quantity) left in stock." below the product title.

 

NattyIce311
Excursionist
32 0 4

@JET0403

This just makes all the available quantities show up and doesn't differentiate by size.