Order by Quantity Increments

Highlighted
Tourist
8 1 0

I have searched and searched to find a solution to a question that has been out there before. On my wholesale site, customers need to order in specific quantities--for example, 2 dozen twin fitted sheets, 6 dozen pillow cases, 8 queen blankets etc. I haven't been able to find this in apps either. 

Has anyone found a solution to this?

0 Likes
Highlighted
Shopify Partner
1353 24 226

If the price differs from quantity to quantity you can set up variants with that quantity and price. If not you can simply modify the quantity input to take as value an increase of 2 or follow a pattern.

https://sections.design tips, tricks & Shopify sections
0 Likes
Highlighted
Tourist
8 1 0

Prices do not change by quantities. I am not sure how to " simply modify the quantity input to take as value an increase of 2 or follow a pattern."

0 Likes
Highlighted
Shopify Partner
1353 24 226

I am not sure what quantity select you have there as the site is under password but here is an example: https://jsfiddle.net/gtf65vcd/

  <select id="quantity">
    <option>2</option>
    <option>4</option>
    <option>8</option>
    <option>16</option>
  </select>

 

https://sections.design tips, tricks & Shopify sections
0 Likes
Highlighted
Tourist
8 1 0

Here is a password: wlc2016

How do I have one type of increment for sheets (2, 4, 6, 8...) and a different increment for towels (3, 6, 9...)?

Would this go in the product.liquid?

0 Likes
Highlighted
Shopify Partner
1353 24 226

That should most likley, depending on your theme, go to product.liquid but will not work in your case. The quantity select is created in Javascript. You wil need to find this function in ajaxify.js:

      // Setup listeners to add/subtract from the input
      $('.js-qty__adjust').on('click', function() {
        var el = $(this),
            id = el.data('id'),
            qtySelector = el.siblings('.js-qty__num'),
            qty = parseInt(qtySelector.val().replace(/\D/g, ''));

        var qty = validateQty(qty);

        // Add or subtract from the current quantity
        if (el.hasClass('js-qty__adjust--plus')) {
          qty = qty + 1;
        } else {
          qty = qty - 1;
          if (qty <= 1) qty = 1;
        }

        // Update the input's number
        qtySelector.val(qty);
      });
    }
  };

and edit the "qty + 1", "qty - 1". Adding +2 will increase the value from 2 in 2

I would not recomand you to do the changes if you are not familiar with Javascript.

https://sections.design tips, tricks & Shopify sections
0 Likes
Highlighted
Tourist
8 1 0

So I am not sure that I have a solution yet I am not comfortable messing with the Java Script. Thanks for helping me though!

0 Likes
Highlighted
Excursionist
13 1 1

If this would help anyone, here is what I did:

I have a few products that I want to increment by 10, and the rest to increment by 1. 

I created a new product.liquid template for the ones with an increment of 10, and I added this to the quantity selector: value="10" min="10" step="10". This makes those products (which I set to use this product template) start at 10, and increase/decrease by 10, without messing up the rest of my store.

Then, I added a tag to those products called "minimum-10". 
I went to the cart.liquid, and I made an {% if %} that if any of the products in the cart have the tag of "minimum-10", the quantity selector should also run its increase/decrease by 10 (step="10"), and {% else %} it should work fine in regular increments.

This has worked beautifully for me. 

1 Like
Highlighted
New Member
1 0 0

Hi Web-Dev

Have you got images of your product template code that you could share as it may help us to overcome the same problem.

Kind regards

0 Likes
Highlighted
Excursionist
13 1 1

Sure. Here is the code I used.

Product page:

{% if product.tags contains "min-2" %}
          <label for="quantity" class="quantity-selector quantity-selector-{{ section.id }}">{{ 'products.product.quantity' | t }}</label>
      <h4>Minimum quantity for this product is 2</h4>
          <input type="number" id="quantity" name="quantity" value="2" min="2" step="2" class="quantity-selector">
      {% elsif product.tags contains "min-3" %}
     	 <label for="quantity" class="quantity-selector quantity-selector-{{ section.id }}">{{ 'products.product.quantity' | t }}</label>
      <h4>Minimum quantity for this product is 3</h4>
          <input type="number" id="quantity" name="quantity" value="3" min="3" step="3" class="quantity-selector">
      {% elsif product.tags contains "min-4" %}
     	 <label for="quantity" class="quantity-selector quantity-selector-{{ section.id }}">{{ 'products.product.quantity' | t }}</label>
      <h4>Minimum quantity for this product is 4</h4>
          <input type="number" id="quantity" name="quantity" value="4" min="4" step="4" class="quantity-selector">
      {% elsif product.tags contains "min-10" %}
    	  <label for="quantity" class="quantity-selector quantity-selector-{{ section.id }}">{{ 'products.product.quantity' | t }}</label>
      <h4>Minimum quantity for this product is 10</h4>
          <input type="number" id="quantity" name="quantity" value="10" min="10" step="10" class="quantity-selector">
      {% elsif product.tags contains "min-12" %}
    	  <label for="quantity" class="quantity-selector quantity-selector-{{ section.id }}">{{ 'products.product.quantity' | t }}</label>
      <h4>Minimum quantity for this product is 12</h4>
          <input type="number" id="quantity" name="quantity" value="12" min="12" step="12" class="quantity-selector">
      {% elsif product.tags contains "min-20" %}
    	  <label for="quantity" class="quantity-selector quantity-selector-{{ section.id }}">{{ 'products.product.quantity' | t }}</label>
      <h4>Minimum quantity for this product is 20</h4>
          <input type="number" id="quantity" name="quantity" value="20" min="20" step="20" class="quantity-selector">
      {% elsif product.tags contains "min-25" %}
     	 <label for="quantity" class="quantity-selector quantity-selector-{{ section.id }}">{{ 'products.product.quantity' | t }}</label>
      <h4>Minimum quantity for this product is 25</h4>
          <input type="number" id="quantity" name="quantity" value="25" min="25" step="25" class="quantity-selector">
      {% elsif product.tags contains "min-40" %}
     	 <label for="quantity" class="quantity-selector quantity-selector-{{ section.id }}">{{ 'products.product.quantity' | t }}</label>
      <h4>Minimum quantity for this product is 40</h4>
          <input type="number" id="quantity" name="quantity" value="40" min="40" step="40" class="quantity-selector">
      {% elsif product.tags contains "min-80" %}
     	 <label for="quantity" class="quantity-selector quantity-selector-{{ section.id }}">{{ 'products.product.quantity' | t }}</label>
      <h4>Minimum quantity for this product is 80</h4>
          <input type="number" id="quantity" name="quantity" value="80" min="80" step="80" class="quantity-selector">
      {% endif %}

Cart page:

{% if item.product.tags contains "min-2" %}
            <div class="grid-item one-half medium-down--one-third text-right">
              <input type="number" name="updates[]" id="updates_{{ item.key }}" data-id="{{ item.key }}" value="{{ item.quantity }}" min="2" step="2" data-line="{{ forloop.index }}">
            </div>
            {% elsif item.product.tags contains "min-3" %}
            <div class="grid-item one-half medium-down--one-third text-right">
              <input type="number" name="updates[]" id="updates_{{ item.key }}" data-id="{{ item.key }}" value="{{ item.quantity }}" min="3" step="3" data-line="{{ forloop.index }}">
            </div>
            {% elsif item.product.tags contains "min-4" %}
            <div class="grid-item one-half medium-down--one-third text-right">
              <input type="number" name="updates[]" id="updates_{{ item.key }}" data-id="{{ item.key }}" value="{{ item.quantity }}" min="4" step="4" data-line="{{ forloop.index }}">
            </div>
            {% elsif item.product.tags contains "min-10" %}
            <div class="grid-item one-half medium-down--one-third text-right">
              <input type="number" name="updates[]" id="updates_{{ item.key }}" data-id="{{ item.key }}" value="{{ item.quantity }}" min="10" step="10" data-line="{{ forloop.index }}">
            </div>
            {% elsif item.product.tags contains "min-12" %}
            <div class="grid-item one-half medium-down--one-third text-right">
              <input type="number" name="updates[]" id="updates_{{ item.key }}" data-id="{{ item.key }}" value="{{ item.quantity }}" min="12" step="12" data-line="{{ forloop.index }}">
            </div>
            {% elsif item.product.tags contains "min-20" %}
            <div class="grid-item one-half medium-down--one-third text-right">
              <input type="number" name="updates[]" id="updates_{{ item.key }}" data-id="{{ item.key }}" value="{{ item.quantity }}" min="20" step="20" data-line="{{ forloop.index }}">
            </div>
            {% elsif item.product.tags contains "min-25" %}
            <div class="grid-item one-half medium-down--one-third text-right">
              <input type="number" name="updates[]" id="updates_{{ item.key }}" data-id="{{ item.key }}" value="{{ item.quantity }}" min="25" step="25" data-line="{{ forloop.index }}">
            </div>
            {% elsif item.product.tags contains "min-40" %}
            <div class="grid-item one-half medium-down--one-third text-right">
              <input type="number" name="updates[]" id="updates_{{ item.key }}" data-id="{{ item.key }}" value="{{ item.quantity }}" min="40" step="40" data-line="{{ forloop.index }}">
            </div>
            {% elsif item.product.tags contains "min-80" %}
            <div class="grid-item one-half medium-down--one-third text-right">
              <input type="number" name="updates[]" id="updates_{{ item.key }}" data-id="{{ item.key }}" value="{{ item.quantity }}" min="80" step="80" data-line="{{ forloop.index }}">
            </div>
            {% else %}
            <div class="grid-item one-half medium-down--one-third text-right">
              <input type="number" name="updates[]" id="updates_{{ item.key }}" data-id="{{ item.key }}" value="{{ item.quantity }}" min="0" data-line="{{ forloop.index }}">
            </div>
            {% endif %}
0 Likes