Liquid, JavaScript, themes, sales channels
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.
Theme is Showtime
Web URL; https://emfab.com.au/
Thanks in advance!!
Solved! Go to the solution
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
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
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
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024