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