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
244 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
244 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)