Ecommerce Shopify WordPress Discussion

How to increase and decrease the product's quantity based on the "increment" value from the b2b catalog in Shopify Plus?

I am searching for a way to force the product's quantity field to increase and decrease based on the minimum and increment for that product as set in its containing B2B catalog. For example, I have a product that is sold in increments of 6, and whose minimum is 6. When I click "plus" in the quantity box, I want it to increase to 12, 18, 24, etc. Likewise, when I click minus, it should then decrease from 24 to 18, 12, and back down to 6. It should also start at 6, not 1, since 6 is the minimum for that product. It should not be able to decrease to 0. Some products may be 6, others may be 4, 12, etc. Therefore, I must use a dynamic field for the data. This increment code works, but the decrement code decrements it all the way back down to the minimum value, instead of decreasing it by the increment value. If I can fix the decrement error, I think I will be good to go. Any ideas? {% comment %}Increment code{% endcomment %} {% if customer.b2b? %} <script> document.addEventListener('DOMContentLoaded', function () { var quantityInput = document.querySelector('quantity-input input[name="quantity"]'); {% assign minimumQuantity = product.variants.first.quantity_rule.min | default: 1 %} {% assign incrementQuantity = product.variants.first.quantity_rule.increment | default: 1 %} if (quantityInput) { // Ensure the initial value is set correctly quantityInput.value = "{{ minimumQuantity }}"; // Update quantity on input change quantityInput.addEventListener('input', function () { var currentQuantity = parseInt(quantityInput.value); // Check if the entered quantity is less than the minimum if (currentQuantity < {{ minimumQuantity }}) { quantityInput.value = "{{ minimumQuantity }}"; } }); // Allow incrementing based on the product's "Increment" field var incrementButton = document.querySelector('quantity-input-plus'); if (incrementButton) { incrementButton.addEventListener('click', function () { // Introduce a small delay to avoid the initial increment by 1 setTimeout(function () { var currentQuantity = parseInt(quantityInput.value); // Skip the first increment by 1 if (currentQuantity !== parseInt("{{ minimumQuantity }}")) { var remainder = currentQuantity % parseInt("{{ incrementQuantity }}"); var nextQuantity = remainder === 0 ? currentQuantity : currentQuantity - remainder + parseInt("{{ incrementQuantity }}"); quantityInput.value = nextQuantity; } }, 10); }); } } }); </script> {% endif %} {% comment %}Decrement code{% endcomment %} {% if customer.b2b? %} <script> document.addEventListener('DOMContentLoaded', function () { var quantityInput = document.querySelector('quantity-input input[name="quantity"]'); var decrementButton = document.querySelector('quantity-input-minus'); {% assign minimumQuantity = product.variants.first.quantity_rule.min | default: 1 %} {% assign incrementQuantity = product.variants.first.quantity_rule.increment | default: 1 %} if (quantityInput && decrementButton) { // Ensure the initial value is set correctly quantityInput.value = "{{ minimumQuantity }}"; decrementButton.addEventListener('click', function () { var currentQuantity = parseInt(quantityInput.value); var decrementAmount = parseInt("{{ incrementQuantity }}"); var nextQuantity = Math.max(currentQuantity - decrementAmount, {{ minimumQuantity }}); quantityInput.value = nextQuantity; }); } }); </script> {% endif %}
TurboCommerce make the better internet purchasing globaly

Turbo Multi-language Translator

Make the better internet purchasing globaly

Turbosify SEO Speed Booster

5.0 (7) Free plan available
Get better conversions by improving store loading speed Installed

Turbo Multi-language Chat - AI Customer service in one hand

TurboCommerce make the better internet purchasing globaly
Our products

The help you need, when you need it

App by Turbo Engine

3 apps • 5.0 average rating

Turbosify Speed Booster

5.0 (7)
Get better conversions by optimizing shopify store Google page speed Installed

Turbosify Translator for Wordpress Woocommerce

5.0 (74) Free Wordpress Woocommerce Plugin
Translate your wordpress website to multiple language within 1 click, no configuration needed, no No technical required

Grow your business here

Whether you want to sell products down the street or around the world, we have all the tools you need.