Solved

Selling products in minimum of 5 and multiple of 5

Emfab
Tourist
11 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!!

Accepted Solutions (2)
tewe
Shopify Partner
243 46 102

This is an accepted solution.

Dear @Emfab,

maybe the following will solve the problem:

1. In your product.liquid you should have

<input type="text" id="quantity" name="quantity" class="txtbox" value="5" min="5" step="5">

multiple is for other purposes.

2. The button is tied some javascript code in the file assets/scripts.js. There the in- and decrements are happening. If you search for

$container.find(".product-page-qty .minus_btn").click
$container.find(".product-page-qty .minus_btn").click

you will find the code which you need to modify. I copied my suggestion below. It just replaces the -- operator with -=5.

$container.find(".product-page-qty .minus_btn").click(function () {
var inputEl = jQuery(this).parent().children().next();
var qty = inputEl.val();
if (jQuery(this).parent().hasClass("minus_btn")) qty+=5;
else qty-=5;
if (qty <= 5) qty = 5;
inputEl.val(qty);
});

For the plus_btn the code should end like

$container.find(".product-page-qty .plus_btn").click(function () {
...
} else {
qty+=5;
inputEl.val(qty);
}
});

but I could not test it. Please let me know if this solved your problem.

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

View solution in original post

tewe
Shopify Partner
243 46 102

This is an accepted solution.

Hi @Emfab,

you are right.

Search for #content .pro_main_c .desc_blk .desc_blk_bot .minus_btn and copy the content to the end of the file styles.scss.liquid. (You could edit the section in place but I prefer to either put it into a separate file or at the end of the main style file with additional comments.)

Then replace .plus_btn with .plus_5_btn and .minus_5_btn

It should like somehow similar to the lines below, but here I used your .css file after the Liquid engine worked on it. So in the file styles.scss.liquid you should find some liquid code in these declarations.

 

#content .pro_main_c .desc_blk .desc_blk_bot .plus_5_btn {
 width:30px;
 height:30px;
 border:1px solid #d7dbdb;
 text-align:center;
 border-radius:0px 13px 13px 0;
 display:block;
 background:url(plus.png) no-repeat center center;
 float:left;
 border-left:none;
 cursor:pointer
}
#content .pro_main_c .desc_blk .desc_blk_bot .minus_5_btn {
 width:30px;
 height:30px;
 border:1px solid #d7dbdb;
 border-right:none;
 border-radius:13px 0px 0px 13px;
 display:block;
 background:url(minus.png) no-repeat center center;
 float:left;
 cursor:pointer
}

 

Hope that this finally resolves the issue.

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

View solution in original post

Replies 26 (26)

Wahab_Ahmad
Shopify Partner
773 114 200

Dear @Emfab
                    Thank you for sharing your problem in the Shopify community.
          I have visited your webshop. Your problem can be resolved using javascript.
If you are not able to do this. I can resolve this problem.
For this purpose, you have to provide me Access in store.

I have sent you an access request from my Shopify partner account. Kindly accept my request.

I will not charge any cost for this service.


Regards,
Wahab Ahmad

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Chat on WhatsApp .
Feel free to contact me Email : wahabahmadghori@gmail.com |
Buy Me A Coffee
tewe
Shopify Partner
243 46 102

This is an accepted solution.

Dear @Emfab,

maybe the following will solve the problem:

1. In your product.liquid you should have

<input type="text" id="quantity" name="quantity" class="txtbox" value="5" min="5" step="5">

multiple is for other purposes.

2. The button is tied some javascript code in the file assets/scripts.js. There the in- and decrements are happening. If you search for

$container.find(".product-page-qty .minus_btn").click
$container.find(".product-page-qty .minus_btn").click

you will find the code which you need to modify. I copied my suggestion below. It just replaces the -- operator with -=5.

$container.find(".product-page-qty .minus_btn").click(function () {
var inputEl = jQuery(this).parent().children().next();
var qty = inputEl.val();
if (jQuery(this).parent().hasClass("minus_btn")) qty+=5;
else qty-=5;
if (qty <= 5) qty = 5;
inputEl.val(qty);
});

For the plus_btn the code should end like

$container.find(".product-page-qty .plus_btn").click(function () {
...
} else {
qty+=5;
inputEl.val(qty);
}
});

but I could not test it. Please let me know if this solved your problem.

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
Emfab
Tourist
11 0 4
Hi Thomas,

Thanks for your response. I implemented your code changes and it worked
fine, thanks.

To be able to use it on some products only I need to pass the variable
product.vendor from product.liquid to the scripts.js file.

I have tried the following without success

var productVendor = "{{ product.vendor | json }}";

$container.find(".product-page-qty .minus_btn").click(function () {

var inputEl = jQuery(this).parent().children().next();

var qty = inputEl.val();

{% if productVendor == 'Emerald Fabric Boutique' %}

if
(jQuery(this).parent().hasClass("minus_btn"))

qty+=5;

else

qty-=5;

if (qty <= 5)

qty = 5;

inputEl.val(qty);

{% else %}

if
(jQuery(this).parent().hasClass("minus_btn"))

qty++;

else

qty--;

if (qty <= 1)

qty = 1;

inputEl.val(qty);

{% endif %}

})



Any help is appreciated.


tewe
Shopify Partner
243 46 102

Hi @Emfab,

sorry, I should have warned you about this side effect.

Probably the preferred way to go is to use an alternative product template for the product where you want to increase by five.

1. Move to the template section in your theme code and create a new template named maybe product.inc5.liquid and copy the content of the file product.liquid into it. Replace {% section 'product-template' %} with {%section 'product-inc5-template' %}. (I have not your theme in front of me, but maybe it still applies or you get the idea. Later you can select for the products where you require the increments of 5 the template product-inc5 see below step 4).

2. Create a new file product-inc5-template.liquid in the sections folder. This is the file which will be used in the product.inc5.liquid file you created in step 1. Now copy the content of product-template.liquid in the sections folder into your new file. Now search for "product-page-qty .minus_btn" and replace .minus_btn with .minus_5_btn. Do the same to the .plus_btn. This way you have new classes to which you can assign functions.

3. Go to the script.js file in the assets folder. Now replace the $container.find("product-page-qty .minus_btn) with $contabutiner.find("product-page-qty .minus_5_btn) which will tie the function on the buttons you modified in your file product-inc5-template.liquid. If you now also add the original definition of $container.find("product-page-qty .minus_btn) (and .plus_btn).  The function tied to .minus_5_btn will now work on buttons identified with .minus_5_btn and the functions tied to the original ".minus_btn"  will work as before.

4. Do not forget to select the template product.inc5 on the Shopify admin for the products the 5 step in- and decrements apply.

Please let me know if this works - again I did not test it.

It it works I would appreciate if you accept my solution.

Kind regards from Heidelberg, Germany

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
Emfab
Tourist
11 0 4

Hi Thomas,

The product page does not render the new buttons, do they need to be defined in styles.scss.liquid

Thanks for your help

tewe
Shopify Partner
243 46 102

This is an accepted solution.

Hi @Emfab,

you are right.

Search for #content .pro_main_c .desc_blk .desc_blk_bot .minus_btn and copy the content to the end of the file styles.scss.liquid. (You could edit the section in place but I prefer to either put it into a separate file or at the end of the main style file with additional comments.)

Then replace .plus_btn with .plus_5_btn and .minus_5_btn

It should like somehow similar to the lines below, but here I used your .css file after the Liquid engine worked on it. So in the file styles.scss.liquid you should find some liquid code in these declarations.

 

#content .pro_main_c .desc_blk .desc_blk_bot .plus_5_btn {
 width:30px;
 height:30px;
 border:1px solid #d7dbdb;
 text-align:center;
 border-radius:0px 13px 13px 0;
 display:block;
 background:url(plus.png) no-repeat center center;
 float:left;
 border-left:none;
 cursor:pointer
}
#content .pro_main_c .desc_blk .desc_blk_bot .minus_5_btn {
 width:30px;
 height:30px;
 border:1px solid #d7dbdb;
 border-right:none;
 border-radius:13px 0px 0px 13px;
 display:block;
 background:url(minus.png) no-repeat center center;
 float:left;
 cursor:pointer
}

 

Hope that this finally resolves the issue.

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
Emfab
Tourist
11 0 4

Hi Thomas,

I have implemented your changes and is all working fine.

Thank you so much for helping.

I still need to do the cart popup and the shopping cart page, I should be ok from here.

Thanks again.

Shayne

dedeeren88
Tourist
12 0 2

I have the exact same problem. I am listing the product on per kilogram price but my packages are 25 and 30 kg. My product's quantity should start from 25 or 30 and should increase on their times. 

I have zero experince on shopify and programming. How can I apply these modifications.

Thanks,

Eren

tewe
Shopify Partner
243 46 102

Hi @dedeeren88 ,

maybe you can share a link to your shop.

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
dedeeren88
Tourist
12 0 2

Thanks for answer,

Please find my shop below;

https://kimyasalburada.com/en/products

It hasn't finished even not translated yet, sorry for that.

I have tried different variations to solve my problem on each product but in this topic I have found what I need actually.

Regards,

Eren

 

tewe
Shopify Partner
243 46 102

Hi @dedeeren88 ,

you are using the theme Minimal. It is much simpler there. In the Shopify Admin just go to your Online Store->Themes->Actions->Edit Code. Then in the folder 'Sections' open the file 'product-template.liquid' and search for  product-single__quantity. Then add to the input tag the attribute step=30 so that it looks like

<input type="number" id="Quantity" name="quantity" value="30" min="30" step="30" class="quantity-selector">

Be aware that this will applied to all of your products. If this is a problem you have to set up different templates for the products which you can then select when you add products.

Hope this will help.

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
dedeeren88
Tourist
12 0 2

Dear Thomas,

Yes it is worked thanks a lot and yes I have different variations(1,20,25,30,50) but I don't really know how to set up different templates.

 

And also with this change I need another small change like I have to add every products price "/kg".

for example:

dedeeren88_0-1614251357224.png it should be shown $3.00/kg

Thanks again,

Eren

 

Emfab
Tourist
11 0 4

Hi Eren,

If you are only selling whole bags, another way you could do it would be to have quantity set to 1 (1 bag), display a price per bag and also display price per kg. This way you won't need different product templates. You can display 2 prices using sections of the code below.

                    {% assign productPriceMetre = product.selected_or_first_available_variant.price | times: 10 %}
                    {% assign productPriceMetreCompare = product.selected_or_first_available_variant.compare_at_price | times: 10 %}
                    
                    <div class="price  {% if section.settings.show_smart_checkout %} smart_checkout_price_pos {% endif %}">
                      {% unless product.price_max == 0 and settings.custom_price0_text != blank %}
                      	{% if product.vendor != 'Unit' %}
                      		AU {{ productPriceMetre | money }} per metre
                      		<p>AU {{ product.selected_or_first_available_variant.price | money }} per 0.1 metre
                      	{% else %}
                        	<span id="productPrice"  class="money">AU {{ product.selected_or_first_available_variant.price | money }}</span>                      		                    
     					{% endif %}
                     {% else %}
          					<p><span id="productPrice"  class="money">{{settings.custom_price0_text }} per 0.1 metre</span></p>   
                     {% endunless %}                      
                      {% if product.selected_or_first_available_variant.price < product.selected_or_first_available_variant.compare_at_price %}
                      <p><span id="comparePrice" class="money">
                        {% if product.vendor != 'Unit' %}
                        	AU {{ productPriceMetreCompare | money }} per metre
                        {% else %}
                        	AU {{ product.selected_or_first_available_variant.compare_at_price | money }}
                        {% endif %}
                        </span></p>
                      {% endif %}
                    </div>

In your case you can use the product.vendor to set the different bag weights to the different products. Eg. product.vendor = "Bag 25" would divide the price per bag by 25 and product.vendor = "Bag 30" would divide the price per bag by 30 to give you price per kg.

Hope this helps

Shayne

tewe
Shopify Partner
243 46 102

Hi @dedeeren88 ,

maybe you start another thread with the new question:


@dedeeren88  wrote:

tewe_0-1614329585545.png

 it should be shown $3.00/kg


See https://help.shopify.com/en/manual/intro-to-shopify/initial-setup/sell-in-germany/price-per-unit

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 there,

I am trying to do the exact same thing for my store.

My theme is Venture and I dont see the script.js file so assume this is theme related.

I have created a new product template, and have linked it to a new section. The page is loading as expected but the multiples requirement is NOT working as expected. Below is an extract of the coding from the section:

<div class="product-form__item product-form__item--quantity">
<label for="Quantity">{{ 'products.product.quantity' | t }}</label>
<input type="number" id="Quantity" name="quantity" value="3" min="3" step="3" class="product-form__input product-form__quantity" >
</div>

When I load the page the qty starts on 3 unit, but clicking the + or - button allows you to move 1 unit, I would like this to move 3 units.

Im guessing this now links to some java script somewhere as well?

Thanks in advance!

tewe
Shopify Partner
243 46 102

Hi @AlexB87 ,

the code is in the file theme.js and it is attached to the buttons.

  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');

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

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

But it might be better to leave that part untouched and define your own style class and functionality.

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

Thanks Thomas,

Surely this would change the button settings for all of my products? I just want it specifically for this template, the rest of my products will utilize the original template.

tewe
Shopify Partner
243 46 102

Hi @AlexB87 ,

yes, that is the reason I wrote "define your own style class and functionality".  So just make a copy of the code  define your own class and put it into your template. If your are not comfortable with that let me know.

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, I think I understand.

One concern, I've tried another method which essentially worked, but when added it to the cart, and then moved to the shopping cart I was then able to make changes to the qty 1 unit at a time, which essentially defeats the purpose of the change. So the product page worked but the shopping cart didn't recognize the change - if that makes sense?

tewe
Shopify Partner
243 46 102

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
243 46 102

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
243 46 102

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
243 46 102

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!