Quantity Selector / Multiples 2, 4, 10 etc

Highlighted
New Member
2 0 2

We have certain products that require purchase in quantity multiples of 2 or 4 such as speakers, or 10 such as raw wire. We have set up a metafield key that contain the "purchase_quantity" number. We are using the Supply Theme. We'd like for the quantity selector to adjust based on these values. We can set up multiple conditional statements for the quantity selector such as:

{% if metafield.purchase_quantity == 2 %} 
  {% if settings.product_quantity_enable %}
     <label for="quantity" class="quantity-selector">{{ 'products.product.quantity' | t }}</label>
     <input type="number" id="quantity" name="quantity" value="2" min="2" step="2" class="quantity-selector">
  {% endif %}
{% endif %}

{% if metafield.purchase_quantity == 4 %} 
  {% if settings.product_quantity_enable %}
     <label for="quantity" class="quantity-selector">{{ 'products.product.quantity' | t }}</label>
     <input type="number" id="quantity" name="quantity" value="2" min="2" step="4" class="quantity-selector">
  {% endif %}
{% endif %}

 

We would like the parse the step= field via the ajaxify.js.liquid file.  Not not completley versed in js, so some help would be appreciated.  The ajaxify file contains the quantitySelector code: qty = qty + 1 etc; and we need to set up a variable so that it's qty = qty + stepvalue, on change of the quantity selctor of both the product page and axajify cart.  Here is the code that has been edited, but it is not 100% working:

 

adjustCart = function () {
    // This function runs on load, and when the cart is reprinted

    // Create ajax friendly quantity fields and remove links in the ajax cart
    if (settings.useCartTemplate) {
      createQtySelectors();
    }

    // Update quantify selectors
    var qtyAdjust = $('.ajaxifyCart--qty span');

    // Add or remove from the quantity
    qtyAdjust.off('click');
    qtyAdjust.on('click', function() {
      var el = $(this),
          id = el.data('id'),
          qtySelector = el.siblings('.ajaxifyCart--num'),
          itemStep = el.siblings('.ajaxifyCart--num').attr('step'),
          qty = parseInt( qtySelector.val() );

      // Add or subtract from the current quantity
      if (el.hasClass('ajaxifyCart--add')) {
        qty = qty + itemStep;
      } else {
        qty = qty - itemStep;
        if (qty <= 0) qty = itemStep;
      }


and



 createQtySelectors = function() {
    // If there is a normal quantity number field in the ajax cart, replace it with our version
    if ($('input[type="number"]', $cartContainer).length) {
      $('input[type="number"]', $cartContainer).each(function() {
        var el = $(this),
            currentQty = el.val(),
            itemStep = el.attr('step');

        var itemAdd = currentQty + itemStep,
            itemMinus = currentQty - itemStep,
            itemQty = currentQty + ' x';

        var source   = $("#ajaxifyQty").html(),
            template = Handlebars.compile(source),
            data = {
              id: el.data('id'),
              itemQty: itemQty,
              itemAdd: itemAdd,
              itemMinus: itemMinus,
              itemStep: itemStep
            };

        // Append new quantity selector then remove original
        el.after(template(data)).remove();
      });
    }

    // If there is a regular link to remove an item, add attributes needed to ajaxify it
    if ($('a[href^="/cart/change"]', $cartContainer).length) {
      $('a[href^="/cart/change"]', $cartContainer).each(function() {
        var el = $(this).addClass('ajaxifyCart--remove');
      });
    }
  };


and


  qtySelectors = function() {
    // Change number inputs to JS ones, similar to ajax cart but without API integration.
    // Make sure to add the existing name and id to the new input element
    var numInputs = $('input[type="number"]');

    
    
    
    
    if (numInputs.length) {
      numInputs.each(function() {
        var el = $(this),
            currentQty = el.val(),
            inputName = el.attr('name'),
            inputId = el.attr('id'),
        	itemStep = el.attr('step');
        	
        
        var itemAdd = currentQty + itemStep,
            itemMinus = currentQty - itemStep,
            itemQty = currentQty;

        var source   = $("#jsQty").html(),
            template = Handlebars.compile(source),
            data = {
              id: el.data('id'),
              itemQty: itemQty,
              itemAdd: itemAdd,
              itemMinus: itemMinus,
              inputName: inputName,
              inputId: inputId,
              itemStep: itemStep
              
            };

        // Append new quantity selector then remove original
        el.after(template(data)).remove();
      });

      // Setup listeners to add/subtract from the input
      $('.js--qty-adjuster').on('click', function() {
        var el = $(this),
            id = el.data('id'),
            
            qtySelector = el.siblings('.js--num'),
            itemStep = el.siblings('.js--num').attr('step'),
            qty = parseInt( qtySelector.val() );

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

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

 

Any help or point us in the right direction would be appreciated.  If we are missing something, let us know.  Thanks!    

0 Likes
Highlighted
New Member
3 0 0

Hi,

Were you able to find a solution for the quanity selector ? I need to implement a similar fonction. 

0 Likes
Highlighted
New Member
3 0 0

I think you should try to change your If fonciton for this: {% if metafield.purchase_quantity == '2' %} with the 2 in ' ' (if you use a string as metafield type). If you used an integer for the meta type you should be good without the ' '. 

0 Likes
Highlighted
Shopify Expert
7 0 0

Hi,

Nice work.

Have you found a solution for the multiples in the quantity field for add to cart?

We have exact same need. We have not found any app to do that...

Thanks

Sebastien

0 Likes
Highlighted
New Member
1 0 0

Hi, 

Has anyone found a solution? We're looking for the same thing.

Thanks, Mani

0 Likes