All things Shopify and commerce
We're moving the community! Starting July 7, the current community will be read-only for approx. 2 weeks. You can browse content, but posting will be temporarily unavailable. Learn more
<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>
If been trying to alter this so that consumers cannot add more stock to there cart than whats available, please let me know if there is anything i can implement i've tried multiple scenarios across the forum.
for example data-max="{{product.selected_or_first_available_variant.inventory_quantity}}"
max="{{product.selected_or_first_available_variant.inventory_quantity}}"
but i don't know exactly where to place these lines.
Hi @Eugene_RF,
You're on the right track. Be sure to include the max and data-max attributes on the input element.
You might also want to consider using JavaScript to improve the user experience by preventing values beyond the available stock from being entered and providing real-time validation.
<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"
{% if product.selected_or_first_available_variant.inventory_management == 'shopify' %}
max="{{ product.selected_or_first_available_variant.inventory_quantity }}"
data-max="{{ product.selected_or_first_available_variant.inventory_quantity }}"
{% endif %}>
<button class="inc button" type="button"></button>
</div>
{% endif %}
</div>
I implemented this and it does not seem to be limiting my quantity selector
In which file to put it?
I need a solution, so that no matter where + selector for item is clicked, it validates against stock.
Hi @Eugene_RF,
Maybe I'm missing something, or maybe my website backend is completely different from yours, but the product posting itself gives you the option of whether you want to continue selling or not. Just make sure to uncheck the option 'continue selling when out of stock'.