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.
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?
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
>
>
207a215,227
>
>
> {% if variant.inventory_management == "shopify" and variant.inventory_quantity > 0 %}
> In Stock ( {{ variant.inventory_quantity }} )
> {% else %}
> Print On Demand ( {{ variant.inventory_quantity }} )
> {% endif %}
>
>
> Delivered next week.
>
>
>
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) {
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:/
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
...
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.
@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.
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
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 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!!
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.
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).
I scrolled to the “sections” category on the left and chose "product-template.liquid"
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.
{% if variant.inventory_management == “shopify” and variant.inventory_quantity > 0 %} Amount Available: {{ variant.inventory_quantity }} {% endif %}
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!
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.
