Selling products in minimum of 5 and multiple of 5

[Emfab]

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

[Wahab_Ahmad]

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

[tewe · 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

[Emfab]

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]

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

[Emfab]

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

[Emfab]

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]

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]

Hi @dedeeren88 ,

maybe you can share a link to your shop.

Regards
Thomas