Quantity multiply by 5 ( like 5, 10, 15 , 20)

[Anassdjs]

Hy guys I'm new in shopify ans I want to do the quantity multiplied by 5 like 5, 10, 15, 20...

[logangelzer]

Hi @Anassdjs you would need some custom javascript in order to accomplish this functionality, there should be a click listener to increment the quantity when clicking the plus or minus button so for this function it would need to be changed to increment and decrement by 5 as well as set the minimum quantity number of the quantity selector to 5.

[Anassdjs]

Thank you @logangelzer how can i do it ?

[logangelzer]

Which theme are you using? 

[Anassdjs]

Im using Down theme

[logangelzer · Accepted solution]

Ok so there is two areas you need to edit, in the section file main-product.liquid around line 234 you will see this:

 <input
                      class="quantity__input"
                      type="number"
                      name="quantity"
                      id="Quantity-{{ section.id }}"
                      data-cart-quantity="{{ cart_qty }}"
                      data-min="{{ product.selected_or_first_available_variant.quantity_rule.min }}"
                      min="{{ product.selected_or_first_available_variant.quantity_rule.min }}"
                      {% if product.selected_or_first_available_variant.quantity_rule.max != null %}
                        data-max="{{ product.selected_or_first_available_variant.quantity_rule.max }}"
                        max="{{ product.selected_or_first_available_variant.quantity_rule.max }}"
                      {% endif %}
                      step="{{ product.selected_or_first_available_variant.quantity_rule.increment }}"
                      value="{{ product.selected_or_first_available_variant.quantity_rule.min }}"
                      form="{{ product_form_id }}"
                    />

 You will need to change it to this:

 <input
                      class="quantity__input"
                      type="number"
                      name="quantity"
                      id="Quantity-{{ section.id }}"
                      data-cart-quantity="{{ cart_qty }}"
                      data-min="5"
                      min="5"
                      {% if product.selected_or_first_available_variant.quantity_rule.max != null %}
                        data-max="{{ product.selected_or_first_available_variant.quantity_rule.max }}"
                        max="{{ product.selected_or_first_available_variant.quantity_rule.max }}"
                      {% endif %}
                      step="5"
                      value="{{ product.selected_or_first_available_variant.quantity_rule.min }}"
                      form="{{ product_form_id }}"
                    />

The next file is product-info.js on line 41 you will see this function:

 setQuantityBoundries() {
        const data = {
          cartQuantity: this.input.dataset.cartQuantity ? parseInt(this.input.dataset.cartQuantity) : 0,
          min: this.input.dataset.min ? parseInt(this.input.dataset.min) : 1,
          max: this.input.dataset.max ? parseInt(this.input.dataset.max) : null,
          step: this.input.step ? parseInt(this.input.step) : 1,
        };

        let min = data.min;
        const max = data.max === null ? data.max : data.max - data.cartQuantity;
        if (max !== null) min = Math.min(min, max);
        if (data.cartQuantity >= data.min) min = Math.min(min, data.step);

        this.input.min = min;
        this.input.max = max;
        this.input.value = min;
        publish(PUB_SUB_EVENTS.quantityUpdate, undefined);
      }

You should update it to this:

 setQuantityBoundries() {
        const data = {
          cartQuantity: this.input.dataset.cartQuantity ? parseInt(this.input.dataset.cartQuantity) : 0,
          min: this.input.dataset.min ? parseInt(this.input.dataset.min) : 5,
          max: this.input.dataset.max ? parseInt(this.input.dataset.max) : null,
          step: this.input.step ? parseInt(this.input.step) : 5,
        };

        let min = data.min;
        const max = data.max === null ? data.max : data.max - data.cartQuantity;
        if (max !== null) min = Math.min(min, max);
        if (data.cartQuantity >= data.min) min = Math.min(min, data.step);

        this.input.min = min;
        this.input.max = max;
        this.input.value = min;
        publish(PUB_SUB_EVENTS.quantityUpdate, undefined);
      }

[Anassdjs]

Thank you so much friend 

[Anassdjs]

Hi again @logangelzer the solution you provide me it worked so fine and I'm satisfied...I have a little problem on my add to card page that the quantity selector goes 5 6 7 8 and not 5 10 15 20....can you provide me a solution for it...I will be grateful and thank you in advance