Selling products in minimum of 5 and multiple of 5

Solved
Emfab
Tourist
10 0 4

Hi All,

I wish to sell certain  products in minimum of 5 and multiple of 5.

I have edited the code in [Sections]product.liquid as follows.

In the code below the product.vendor not = to "Unit" defines the products I wish to set the above min  max, this is ok.

I have changed the values of class="txtbox" value="1" min="1">  to  class="txtbox" value="5" min="5" multiple= "5">

This set the minimum qty to 5 but the multiple qty stayed on 1 when I use the increment buttons.

Do I need to define the increments of class="plus_btn" and class="minus_btn" to 5 to achieve this.

If this is so where is this defined.

                  <div class="desc_blk_bot clearfix">
                    {% unless product.price_max == 0 and settings.hide_price0_box_and_button %}
                    <div class="qty product-page-qty"> <a class="minus_btn" ></a>
                      {% if product.vendor != 'Unit' %}
                      <input type="text" id="quantity" name="quantity" class="txtbox" value="5" min="5" multiple="5">
                      {% else %}
                      <input type="text" id="quantity" name="quantity" class="txtbox" value="1" min="1">
                      {% endif %}
                      <a class="plus_btn" ></a>             
                    </div>
                    {% endunless %}
 

Theme is Showtime

Web URL; https://emfab.com.au/

Thanks in advance!!

Replies 26 (26)
tewe
Shopify Partner
234 44 100

Yes, you have to make the adjustment for the cart as well, but whenever you have a product assigned to a template, you can check for each product what template it is assigned to and have template specific HTML code generated.

Regards
Thomas

• Was my reply helpful? Click Like to let me know!
• Was your question answered? Mark it as an Accepted Solution
• Check out our Price Updater App
AlexB87
Excursionist
12 0 2

Ok that would be a little to advance for me at this stage.

This is my current code which has changed the qty +/- buttons to a drop down with 3 x multiples.

</select>
<div class="product-form__item product-form__item--quantity">
<label for="Quantity">{{ 'products.product.quantity' | t }}</label>

<select id="quantity" name="quantity">
{% for i in (1..10) %}
<optio value="1">1</option>
<option value="{{ i | times:3 }}">{{ i | times:3 }}</option>
{% endfor %}
</select>

How would I now make the adjustments to the cart for this specific product?

tewe
Shopify Partner
234 44 100

Hi @AlexB87 ,

a drop down very often does not really fit for the cart so we made in one case the following adjustment in the cart-template liquid file for the input of the quantity:

                {% assign inc_unit = item.variant.weight | divided_by: 1000 %}
                <div class="grid__item one-quarter one-half medium-down--one-third text-center">
                  <label for="updates_{{ item.key }}" class="cart__mini-labels">{{ 'cart.label.quantity' | t }}</label>
                  <input type="number" class="cart__quantity-selector" name="updates[]" id="updates_{{ item.key }}" value="{{ item.quantity }}" min={{inc_unit}} step={{inc_unit}} aria-label="{{ 'cart.label.quantity' | t }}">    
                </div>

This was for the theme Minimal but it looks for me identical in the Venture theme.

We took the product and/or the product variant weight to steer this behavior because for the customer this was actually the value which steered his need. Hope this helps.

Regards

Thomas

 

• Was my reply helpful? Click Like to let me know!
• Was your question answered? Mark it as an Accepted Solution
• Check out our Price Updater App
AlexB87
Excursionist
12 0 2

Hi Thomas,

I think I am confusing things a little.

I have the product template and section setup and working as Id like it to. I replaced the +/- buttons with a drop down with 3 x multiples, min order of 3 units ( I CANNOT choose anything other than 3,6,9 etc) - pic below:

AlexB87_0-1616075641784.png

When added to the cart, I am able to then change the qty within the cart by a single unit, both up and down, so now my minimum no longer works, and my 3 x multiples dont work either. See below. This is what I want to fix, i dont want to change the shopping cart to a drop down. Im happy with the +/- functionality here. Just need my qtys adhered to - make sense?

AlexB87_1-1616075929662.png

 

 

tewe
Shopify Partner
234 44 100

Hi @AlexB87 ,

makes sense to me.I thought I provided the solution - but sometimes it is difficult without actually seeing the code.

Regards

Thomas

• Was my reply helpful? Click Like to let me know!
• Was your question answered? Mark it as an Accepted Solution
• Check out our Price Updater App
tewe
Shopify Partner
234 44 100

Hi @AlexB87 

after having looked at your code, I see why my first suggestion does not work.

When the cart opens within the venture theme the input element is replaced with a template 'QuantityTemplate' which is in theme.liquid. This is the reason you see the buttons next to the input field which are not present in the file cart-template.liquid. So when you set the step parameter at the input field in the cart-template.liquid it will be lost after the replacement. To pass this paramter on to the template you have to add a step attribute to the above mentioned template.

The replacement of the original input field with the template is done in the function QtySelector.prototype.createInputs in the file theme.js. Here you can get the step element from the original input parameter by extending the data with a line

step: $el.attr('step')

You also have to modify the function QtySelector.prototype.adjustQty

  QtySelector.prototype.adjustQty = function(evt) {
    var $el = $(evt.currentTarget);
    var $input = $el.siblings('.js-qty__input');
    var qty = this.validateQty($input.val());
    var line = $input.attr('data-line');
   // tw, added the step parameter
    var step = parseInt($input.attr('step'))||1;

    if ($el.hasClass('js-qty__adjust--minus')) {
      qty -= step;
      if (qty <= this.settings.minQty) {
        qty = this.settings.minQty;
      }
    } else {
      qty += step;
    }

    if (this.settings.isCartTemplate) {
      $el.parent().addClass(this.settings.loadingClass);
      this.updateCartItemPrice(line, qty);
    } else {
      $input.val(qty);
    }
  };

Now it works - almost. If you increase the quantity a second time, the step parameter is lost again, when the shopping cart is re-rendered. Now, a little bit surprising, it takes the template QuantityTemplate from the file 'cart-template.liquid as a base for the re-rendering, but there is no way to refer to the product template there because the rendering not done based on the products. Here you only have the cart items and their properties and the product is not available there. The rendering is done through the function ...

QtySelector.prototype.updateCartItemCallback = function(cart) {
...
      // Create item's data object and add to 'items' array
      item = {
      ...
        // tw: I added here
        step: cartItem.product_type.indexOf('Balls')>=0 ? 3 : 1
      };

 

It would have been nicer to use another property of cartItem, e.g. the unit_price_measurement but it is claimed that the unit prices are only available in Germany and France.

Hope that this solves this issue for the theme Venture.

Regards
Thomas

 

 

• Was my reply helpful? Click Like to let me know!
• Was your question answered? Mark it as an Accepted Solution
• Check out our Price Updater App
AlexB87
Excursionist
12 0 2

Hi Thomas,

Apologies for the delay in response.

I have finally tested this and it seems to be working 100% as expected, so the product page limits the qty drop down to multiples of 3, and the cart update also limits the qty options to multiples of 3!

Your assistance is greatly appreciated!