Sell quantities only by multiples of 6

[ElManu]

Hi, I would like to know if there is a way to sell quantities only by multiples of 6 (6, 12, 18, 24...) and not using an app.

Here is my shop link : https://champagnelacroix.com

Thank You in advance ! 

Have a nice day !

[JohnE10 · Accepted solution]

You bet. 

The pattern attribute that you mentioned as being in the input tag may be the (or a) culprit.

The reason the value attribute may not be having any effect is because it, the value attribute, gets checked and validated against the pattern expression, and if the value attribute is not a match for what the pattern expression requires, then the value attribute won't apply.

Try removing the pattern attribute altogether and see what you get. 

[JohnE10]

Hi,

Yes, it can be done.

If you have some basic knowledge of coding, it's pretty simple. all you have to do is make a slight code modification in two places: the main product file and the cart file.

In the Dawn theme, these are called main-product.liquid and main-cart-items.liquid respectively, I’m not sure what they’re called in the theme that your site is using, but there should be equivalent files.

In each of the files, you’ll just need to look for the input tag that corresponds to the quantity field and add in a “min” attribute (min = “6” in this case), a step attribute (step = “6” in this case), and a value attribute (value = “6”).

This will make it so that “6” is what appears in the quantity box initially and only multiples of 6 will appear in the quantity box when your visitor clicks the + or - buttons.

However, this will not prevent the user from manually typing in any quantity, for that you’ll need to add an “onkeydown” attribute and set that to “return false” (onkeydown = “return false").

This will make all products behave this way, if there are products that can be sold without the quantity restriction, then that can be achieved as well with the addition of a line or 2 of code.

If you’d rather not deal with any code, then you can hire a freelancer who will take care of it for you for a few bucks.

Cheers,

[ElManu]

You helped me a lot ! Thing is, I don't have the "value" nor the "step" attributes. I have the "min" and a "pattern". I've dialed both input but only the min seems to work. I tried adding value and steps but it seems like it has no effect... You still gave me half the answer so thanks a lot ! 

[JohnE10 · Accepted solution]

You bet. 

The pattern attribute that you mentioned as being in the input tag may be the (or a) culprit.

The reason the value attribute may not be having any effect is because it, the value attribute, gets checked and validated against the pattern expression, and if the value attribute is not a match for what the pattern expression requires, then the value attribute won't apply.

Try removing the pattern attribute altogether and see what you get. 

[ElManu]

Well, again thanks, a lot ! I have my min and it seems to work fine but the incrementation by 6 not so much... I might have to bring out the bigger g*uns.

Here is the code if you see anything that rings a bell 🙂 

Thanks for your help John ! Hope you have a wonderful day !

   <div class="cart__item-sub">
      <div>
        <div class="js-qty__wrapper">
          <label for="cart_updates_{{ product.key }}" class="hidden-label">{{ 'cart.label.quantity' | t }}</label>
          <input type="text"
            id="cart_updates_{{ product.key }}"
            name="updates[]"
            class="js-qty__num"
            value="{{ product.quantity }}"
            min="0"
            pattern="[0-9]*"
            data-id="{{ product.key }}">
          
          <button type="button"
            class="js-qty__adjust js-qty__adjust--minus"
            aria-label="{{ 'cart.general.reduce_quantity' | t }}">
              <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-minus" viewBox="0 0 64 64"><path class="cls-1" d="M55 32H9"/></svg>
              <span class="icon__fallback-text" aria-hidden="true">&minus;</span>
          </button>
          <button type="button"
            class="js-qty__adjust js-qty__adjust--plus"
            aria-label="{{ 'cart.general.increase_quantity' | t }}">
              <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-plus" viewBox="0 0 64 64"><path class="cls-1" d="M32 9v46m23-23H9"/></svg>
              <span class="icon__fallback-text" aria-hidden="true">+</span>
          </button>
        </div>

[ElManu]

I've also found this code that is actually doing exactly what I want but it doesn't update the quantity of the cart...

<input id="product-quantity-{{ product_form_id }}" type="number" name="quantity" value="3" min="3" step="3"
      form="{{ product_form_id }}" aria-label="{{ 'products.product.quantity.label' | t }}">

[ElManu · Accepted solution]

Finally found the solution : here are the results in case anyone needs the code ! 

    <input 
        id="cart_updates_{{ product.key }}"
        class="js-qty__num"
        type="number"
        name="updates[]"
        value="6"
        min="6" 
        step="6" 
    >

[blackw]

Awesome. Where do you paste this? Also using Dawn theme...