d
Topic
rohindhar Member
Posts:
3
Last edited February 22, 2011

How to display variant.inventory_quantity This post is outdated

 

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!

 

i
Replies
Posts:
5840
Last edited February 22, 2011

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
rohindhar Member
Posts:
3
February 22, 2011

THANKS SO MUCH!!!!

Posts:
5840
February 22, 2011

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
thob Member burg.cx
Posts:
203
February 22, 2011

This works perfectly for me. Thanks!

Thomas N. Burg | http://twitter.com/thobu | http://facebook.com/burgWeine
Posts:
16
March 09, 2011

Great, thanks!

www.printfolio.pl
mattmikulla Shopify Partner mattmikulla.com
Posts:
390
Last edited March 15, 2011

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 --&gt; http://mattmikulla.com
mattmikulla Shopify Partner mattmikulla.com
Posts:
390
March 15, 2011

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 --&gt; http://mattmikulla.com
thob Member burg.cx
Posts:
203
March 29, 2011

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
Jamie Chief Officer of Funness shopify.com/plus
Posts:
5852
March 29, 2011

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
thob Member burg.cx
Posts:
203
Last edited March 29, 2011

I think the challenge is because I need 3 different answers.

  1. if there is no inventory  = display "Sold Out"
  2. if there are more than 6 items = display nothing
  3. if there are less than 6 items = display "5 items available"

How to resolve this? I'm clueless and really need some help there.

~ Thomas

Thomas N. Burg | http://twitter.com/thobu | http://facebook.com/burgWeine