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
Highlighted
Shopify Staff
Shopify Staff
5704 1 326

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;');
Highlighted
New Member
3 0 0

THANKS SO MUCH!!!!

0 Likes
Highlighted
Shopify Staff
Shopify Staff
5704 1 326

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:

0 Likes
Highlighted
Tourist
200 0 1

This works perfectly for me. Thanks!

Thomas N. Burg | http://twitter.com/thobu | http://facebook.com/burgWeine
0 Likes
Highlighted
Tourist
15 0 1

Great, thanks!

www.printfolio.pl
0 Likes
Highlighted
Shopify Partner
375 0 7

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
Highlighted
Shopify Partner
375 0 7

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
Highlighted
Tourist
200 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
Highlighted
Shopify Staff (Retired)
Shopify Staff (Retired)
5711 0 150

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