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!!

Accepted Solutions (2)

Accepted Solutions
tewe
Shopify Partner
232 44 100

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
232 44 100

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
748 113 185

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 Hire me.
Shopify Custom Theme Development and Design | Custom Modifications In to Shopify Theme

- Feel free to contact me
Mail : wahabahmadghori@gmail.com | Skype : live:17296c31bc2edbdf
tewe
Shopify Partner
232 44 100

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
10 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
232 44 100

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
10 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
232 44 100

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
10 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
232 44 100

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
232 44 100

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
10 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
232 44 100

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
232 44 100

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
232 44 100

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?