Display stock quantities on product page and limit amout in cart to stock - Minimal Theme

[EstherD]

Hi,

I'm really sorry to ask, but I am not finding the solution I am looking for. I have read similar posts on the forum, but they do not seem to have the solution I am looking for.

I want the following on my product pages:

1. Display the number of items currently in stock on the product page
2. Change the quantity selector to a dropdown list, in which the maximum number in the list corresponds to the maximum amount in stock
3. Users are not allowed to add more than the maximum number of items in stock to their cart, also not if they are in their cart and change the number there manually before checkout.

I want my products to remain visible, even if not in stock. They are usually part of a collection, and it is not a problem if one item in the collection is not in stock.

I am using the Minimal theme. 

I have tried varies pieces of code that I have found on the forum here, particularly this piece of code that I added to my product.liquid file, but it did not seem to do anything. Nothing happened. I also tried adding it to my product-template.liquid file, but that also had no affect. 

{% comment %} Inventory tracking on product page {% endcomment %}
<div id="variant-inventory" class="{% unless current_variant.available %} hide {% endunless %}">
{% if current_variant.inventory_management == "shopify" and current_variant.inventory_policy != "continue" %}
We have {{ current_variant.inventory_quantity }} left in stock.
{% else %}
This product is available.
{% endif %}
</div>

I really hope someone can help me 🙂

Kindest regards,

Esther

[EstherD · Accepted solution]

I added this bit of code to my minimal theme product-template.liquid file at line 208. It worked for me to fix my issue of displaying the stock on each product page, point 1 of my original question.

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

[EstherD · Accepted solution]

I added this bit of code to my minimal theme product-template.liquid file at line 208. It worked for me to fix my issue of displaying the stock on each product page, point 1 of my original question.

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

[ruheeaggarwal]

Thanks! This solution works. However, how do you tackle if products have variants in this case?

My product has a variant as Size. After adding the code it shows as below:

2 in stock.

1 in stock.

The only problem is it doesnt show which variant has 2 in stock and which one has 1 in stock?

[hash777]

@ruheeaggarwal  Hi there If helpful then please Like and Accept Solution.
THANKS 

When you managing variant, do you man like this

If helpful then please Like and Accept Solution.
THANKS

[EstherD · Accepted solution]

I changed this bit of code in my product-template.liquid file. It maximized the amout people can select to the maximum stock and fixes point 3 of my original question above.

OLD CODE:

<input type="number" id="Quantity" name="quantity" value="1" min="1"  class="quantity-selector">

NEW CODE:

<input type="number" id="Quantity" name="quantity" value="1" min="1" max="{{ variant.inventory_quantity }}" class="quantity-selector">

[Lionelbbt]

How do I change it on the cart page to do the same and not add more items than stock?

[Gi511]

Can you tell me where exactly to put this code, please?

[EstherD]

product-template.liquid file is where I put the code, see my comment above.

[Gi511]

Thank you for your great help! It solved my problem.

[simonski]

@EstherD thank you for sharing your solution! I'm using Minimal theme, and implemented that solution a while ago. Unfortunately I found out that costumers in cart can still exceed the limit of items in stock by changing the number with their keyboard, if they don't use the item up / down buttons. As on mobile devices, there is no increase / decrease buttons, it doesn't work. So I implemented an additional solution as well. My number input field looks like this

<input onblur="this.form.submit();" type="number" class="cart__quantity-selector" name="updates[]" id="updates_{{ item.id }}" value="{{ item.quantity }}"  max="{{ item.variant.inventory_quantity }}"  min="0" aria-label="{{ 'cart.label.quantity' | t }}">

 "onblur" stands for automatic update of the cart when unfocus the input field. After the schema, at the bottom of the cart-template.liquid, I implemented this:

<script>
jQuery('[max]').change(function() {
  var max = parseInt(jQuery(this).attr('max'), 10) || 10000;
  var value = parseInt(jQuery(this).val(), 10) || 0;
  if (value > max) {
    alert('We only have ' + max + ' items of this product available in stock');
    jQuery(this).val(max);
  }
});
</script>

So if a cosumer is manually (with keyboard or mobile keyboard) exceeding the number of items that are in stock, an alert is coming, and the amount of items is changed to max inventory. It worked for a while, but stopped maybe a few weeks ago (?). The JQuery Code is not running anymore, the console say "max" is not defined. But if I check the input field, max and value is defined correctly (eg max = "8" and number ="2").

It's not my solutions, I found them in different posts. 

Can anybody share this behaviour, or even add information to find a solution?

Thank you community!

[simonski]

Ok, I found the problem. I had the execution of JQuery in the <head> in my theme.liquid, but moved it down in the <body> due to execution blocking. This was the problem, JQuery did not execute before the JQuery change function.

[RogeroK]

Thank you for sharing this, i was implementing the same functionality and your code helped me fix my theme.

[Eugene_RF]

<div class="chart-group{% if product.available %}{% else %} sold_out{% endif %}">
{% if product.available %}
<label for="quantity" {% if settings.enable_multilang %}data-translate="cart.label.quantity"{%endif%}>
{{ 'cart.label.quantity' | t }}
</label>
<div class="qty-group">
<button class="des button" type="button">
</button>
<input type="text" class="number" id="quantity" name="quantity" value="1">
<button class="inc button" type="button">
</button>
</div>

I am having the same issue.. Consumers cannot price my products unless i allow them to continue selling when out of stock.. this enabled the issue your having where people add more to cart than whats carried... when a product is out of stock the button is disabled but i want the quantity selector to be limited. could you possibly help me modify my code here to implement what you did ? i tried using your code but i dont think my them is supporting it exactly