Streaming live at 10am (PST)

How to do a functional + and - for product quantity

Hello,
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:
https://preview.webflow.com/preview/midwestmuttshop?utm_medium=showcase&utm_source=midwestmuttshop&preview=86b075a9b6790f36ec589ae8d8aaaa02&pageId=5be709f5be33e4a31a1699dd&itemId=5bf992f20913630b0488436c

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

<script>
$('.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));
})

</script>

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.

1 Like

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?
https://preview.webflow.com/preview/batu-bali?utm_medium=preview_link&utm_source=designer&utm_content=batu-bali&preview=31b44734d0945f7f88855573cc5212c6&pageId=5cfba36671000a08cb4e6ef6&itemId=5cfba36671000a9c934e6f14&mode=preview

@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: