Prestige Theme - Product Quantity Increments and Minimum

Prestige Theme - Product Quantity Increments and Minimum

MK78
Visitor
3 0 0

I am adding a number of products to my store which have a MOQ of 50 and must be purchased in increments of 10.

 

So far, I have cloned the product template to create a new one named product-favours, and set the current quantity value to 50.

 

How would I go about setting the quantity increase/decrease value to +10 / -10, ensuring it doesn't go below 50 (including when a quantity is manually entered).

 

I have found the following in the theme.js file, but am unsure how to update it so that the qty increments, MOQ and validate qty  only apply to the product-favours template and doesn't affect the other product templates.

 

Any assistance would be appreciated.

 

Quantity Selector.png

 

Replies 5 (5)

SocialAutoPost
Shopify Partner
434 59 104

To set the quantity increase/decrease value to +10 / -10 for a specific product template in your Shopify store, you will need to edit the theme's JavaScript file and add some custom code. Here are the steps you can follow to do this:

  1. In your Shopify admin, go to Online Store > Themes.

  2. Click on the Actions button for the theme you are using, and then click on Edit code.

  3. In the list of files on the left, find the file named theme.js and click on it to open it for editing.

  4. Scroll down to the bottom of the file, and add the following code:

 

 

$('.product-favours .quantity-wrapper').on('click', '.qty-up, .qty-down', function() {
  var $qty = $(this).closest('.quantity-wrapper').find('.qty');
  var currentVal = parseInt($qty.val());
  var minValue = 50;
  var maxValue = currentVal + 10;
  var step = 10;
  if ($(this).is('.qty-up')) {
    $qty.val(maxValue > minValue ? maxValue : minValue);
  } else {
    $qty.val(currentVal - step < minValue ? minValue : currentVal - step);
  }
});

$('.product-favours .quantity-wrapper').on('change', '.qty', function() {
  var $qty = $(this);
  var currentVal = parseInt($qty.val());
  var minValue = 50;
  var maxValue = currentVal + 10;
  var step = 10;
  if (currentVal < minValue || currentVal % step != 0) {
    $qty.val(minValue);
  }
});

 

 

5. Save the file and then close the editor.

 

This code will add event listeners to the quantity increase/decrease buttons and the quantity input field for the product-favours template. The code will update the quantity value to increment or decrement by 10, and will also ensure that the quantity does not go below 50 and is always a multiple of 10.

 

 

If you do not know coding, let me know I can help you with it.

Was the reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution
Auto post your Shopify products to Instagram, Facebook, Pinterest, LinkedIn and Twitter.
App: Social Schedular
MK78
Visitor
3 0 0

Thank you for your reply.

 

I have added the code to the theme.js file, but it is still increase/decreasing in increments of 1, and allowing me to decrease the quantity below 50.

Screenshot 2022-12-12 165506.png

https://shop.ms.org.au/products/celebration-ms-awareness-ribbon 

SocialAutoPost
Shopify Partner
434 59 104

Another solution is to edit input directly :

 

 <input type="number" id="Quantity-{{ section.id }}" name="quantity" value="10" min="10" step="10" class="product-form__input" data-quantity-input>

Your product template might have a code that controls the quantity box.

Was the reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution
Auto post your Shopify products to Instagram, Facebook, Pinterest, LinkedIn and Twitter.
App: Social Schedular
MK78
Visitor
3 0 0

I have the following in the product-favours-form.liquid file. Is there where I would add the code?

 

{%- if section.settings.show_quantity_selector -%}
{%- if show_option_label -%}
<span class="ProductForm__Label">{{ 'product.form.quantity' | t }}:</span>
{%- endif -%}

<div class="ProductForm__QuantitySelector">
<div class="QuantitySelector QuantitySelector--large">
{%- assign quantity_minus_one = line_item.quantity | minus: 1 -%}

<button type="button" class="QuantitySelector__Button Link Link--secondary" data-action="decrease-quantity">{% render 'icon' with 'minus' %}</button>
<input type="text" class="QuantitySelector__CurrentQuantity" pattern="[0-9]*" name="quantity" value="50" aria-label="{{ 'product.form.quantity' | t }}">
<button type="button" class="QuantitySelector__Button Link Link--secondary" data-action="increase-quantity">{% render 'icon' with 'plus' %}</button>
</div>
</div>
{%- else -%}
<input type="hidden" name="quantity" value="1">
{%- endif -%}

Nithin_Gowda
Shopify Partner
1 0 0
<input type="number" id="Quantity-{{ section.id }}" name="quantity" value="10" min="10" step="10" class="product-form__input" data-quantity-input>