How to do a functional + and - for product quantity

Design help Animations & Interactions
3

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

You can see it live and in action here.

8 Likes