How to display variant.inventory_quantity

Highlighted
New Member
3 0 0

 

I'm using the "Vogue" theme and I'm trying to display the inventory quantity on the product pages. (www.wallsushi.com)

The javascript is set up to display the price based on the variant (i.e. "Print Only" vs "Framed Version") chosen in the drop-down select box, but I can't figure out how to also display the variant's inventory quantity, or where to place this suggested code (below) from the variable reference pages to make it show up. I have looked at the forum and there doesn't seem to be any advice on how to go about this.

 

{% if variant.available == true %}

   We currently have {{ variant.inventory_quantity }} in stock.

{% else %}

   Sold out!

{% endif %}

 

Thanks!

 

0 Likes
Shopify Staff
Shopify Staff
5826 0 252

Hi there,

In product.liquid, locate this code:

{{ product.description }}

Below that, add this:

<p id="inventory">{% assign variant = product.variants.first %}
  {% if variant.available %}
  {% if variant.inventory_management != '' %}
  {{ variant.inventory_quantity }} in stock
  {% else %}
  In stock
  {% endif %}
{% endif %}</p>

Then locate this line of JavaScript code in the same template:

jQuery('#price-field').html(Shopify.formatMoney(variant.price, "{{shop.money_with_currency_format}}"));  // update price field

Right below, add this code:

if (variant.inventory_management !== '') {
  jQuery('#inventory').text(variant.inventory_quantity + ' in stock');
}
else {
 jQuery('#inventory').text('In stock');
}

Then locate this:

jQuery('#price-field').text(message); // update price-field message

On the next line, add this:

jQuery('#inventory').html('&nbsp;');
Caroline from http://11heavens.com ∴ mllegeorgesand AT gmail DOT com
1 Like
New Member
3 0 0

THANKS SO MUCH!!!!

0 Likes
Shopify Staff
Shopify Staff
5826 0 252

You're welcome :) I did not test any of this, so you probably had to fix some typos in the code.

I like the phrasing very much:

Caroline from http://11heavens.com ∴ mllegeorgesand AT gmail DOT com
0 Likes
Tourist
202 0 1

This works perfectly for me. Thanks!

Thomas N. Burg | http://twitter.com/thobu | http://facebook.com/burgWeine
0 Likes
New Member
16 0 0

Great, thanks!

www.printfolio.pl
0 Likes
Shopify Partner
388 0 2

I'm not so great with jquery and js. Did I misplace the code within brackets? I'm currently not getting a message to display when a product is unavailable.

 

{% unless product.variants.size == 1 %}

<script type="text/javascript">
// <![CDATA[
var selectCallback = function(variant, selector) {
if (variant && variant.available == true) {
// selected a valid variant
jQuery('#purchase').removeClass('disabled').removeAttr('disabled'); // remove unavailable class from add-to-cart button, and re-enable button
jQuery('#price-field').html(Shopify.formatMoney(variant.price, "{{shop.money_with_currency_format}}")); // update price field
if (variant.inventory_management !== '') {
jQuery('#inventory').text(variant.inventory_quantity + ' in stock');
}
else {
jQuery('#inventory').text('In stock');
}
} else {
// variant doesn't exist
jQuery('#purchase').addClass('disabled').attr('disabled', 'disabled'); // set add-to-cart button to unavailable class and disable button
var message = variant ? "Sold Out" : "Unavailable";
jQuery('#price-field').text(message); // update price-field message
jQuery('#inventory').html('&nbsp;');
}
};

// initialize multi selector for product
jQuery(function() {
new Shopify.OptionSelectors("product-select", { product: {{ product | json }}, onVariantSelected: selectCallback });
});
// ]]>
</script>

{% endunless %}

 

 

 

Fine Art and Photography by Matt Mikulla --> http://mattmikulla.com
0 Likes
Shopify Partner
388 0 2

Figured it out. Just add an if.product available conditional around the display code:

{% if product.available %}
<p id="inventory">
{% assign variant = product.variants.first %}
{% if variant.available %}
{% if variant.inventory_management != '' %}
{{ variant.inventory_quantity }} available
In stock
{% endif %}
{% endif %}
</p>
{% else %}
<p id="inventory-na">  
Sorry, this product is not available
</p>
{% endif %}

Fine Art and Photography by Matt Mikulla --> http://mattmikulla.com
0 Likes
Tourist
202 0 1

Any idea how to display the quantity of inventorty only if there are less then - say - 6? 

Thomas

Thomas N. Burg | http://twitter.com/thobu | http://facebook.com/burgWeine
0 Likes
Shopify Staff
Shopify Staff
5841 0 114

Thomas I think your issue is the javascript in your callback for the options.js. You will need to add the logic there.

http://shopifyplus.com ::: http://twitter.com/bacchus
0 Likes