Streaming live at 10am (PST)

How to do a functional + and - for product quantity

i would like to design something like this:

If i tap the plus the number goes up and if i tap - the number goes down, but not more than 1

Here is my public share link: LINK
(how to access public share link)

Custom code :). I will help you as soon as I get back to my office. Just please leave a read-only for your website down below

Here is how to find your read-only link:

@Fabian_Gmeindl great question!

I added one to my site here:

It requires a little custom code and adding classes to the + and - buttons:

$('.input-number-increment').click(function() {
  var $input = $(this).parents('.input-number-group').find('.input-number');
  var val = parseInt($input.val(), 10);
  $input.val(val + 1);

$('.input-number-decrement').click(function() {
  var $input = $(this).parents('.input-number-group').find('.input-number');
  var val = parseInt($input.val(), 10);
  $input.val(Math.max(val - 1, 1));


They’re each text elements with a specific class applied to achieve that behavior.

Please let me know if you have any questions :bowing_man:‍♂

You can see it live and in action here.


I guess I’m too late for the party haha. @Waldo as always doing a great job. Let us know if you need any help :slight_smile:

Thank you so much for the help

It seems like i fucked up something :frowning: . The code is the same as you posted here and i used all the classes, i checked 2 times but i just dont get the mistake Also how do I let 1 be my predefined value for the input field?

@Waldo I’m also having trouble getting this to work. It seems like maybe your class names in the sample project are different from the code you supplied? Also, looks like you might be using Jquery? I couldn’t find where you put the code on the demo project you supplied so it’s a bit harder to troubleshoot. Assumed you’ve put it in project settings which unfortunately I don’t think we can access :frowning: is there any way you could move the code to be somewhere we can see in the live project? Thanks so much!

Nevermind, just solved it! I hadn’t noticed Waldo has put the .input-number-group class on input-group which allowed the code to work for me :slight_smile:

Hey guys, this was exactly what i was looking for! The code works for but only on the condition that I enter a number and then click the ‘-’ or ‘+’ buttons.

I noticed in @Waldo site and read only, there already is a defined value, but i cant find how to replicate this to see if it solves my problem!

Any help would be great thanks! :vulcan_salute:

Hi! Thanks a lot for the tip… I’m not getting it to work:

  • I have created the elements as shown in the example
  • I have created the classes as shown in the example, including the combo class with input-group and input-number-group
  • I have added the script

But when I post and test, the texts don’t act as buttons and obviously I can’t add or subtract values in the quantity box

Any idea what may be failing?