Streaming live at 10am (PST)

Button Count and Total Sum (Up for a challenge)


#1

I'd like to place functional "+" and "-" buttons which upon clicking add to a count and integrating a whole count to total sum number.

This is exactly what I'm looking for:
https://drift-light.com/checkout.aspx

Any help would be appreciated.


#2

Can only be done in custom code. Do you have an existing design?


#3

I've used a template so far but don't have any clear ideas on how to do it.

Here's what we're looking at:
Checkout
Do you have any other forum posts or outside Webflow guidance you would recommend?

Thanks for your help


#4

Paste this in Page Settings > Footer Code, and publish:

<script>
$(function() {
  $('.packages-container').on('click', '.buttonup', function() { $(this).parents('form').find('.amount').val(function(i,v) { return Number(v)+1; }); return false; });
  $('.packages-container').on('click', '.buttondown', function() { $(this).parents('form').find('.amount').val(function(i,v) { return Math.max(Number(v)-1,0); }); return false; });
});
</script>

Works on published site only.


#5

Mate, you're a legend!

Just had a quick question:

I copied and pasted the "+" and "-" buttons on the left to the two remaining columns to the right but the code isn't working for them.

Is there any way to make it work for the remaining two buttons?


#6

The first has a form. Buttons look for an element with class amount in same form.


#7

Miracle worker! Thanks again


#8

Hi Samliew. Everything's looking super amazing with the button counting function.

Is there any possibility of making the numbers not go below "0" and not show negative numbers such is this?

Thank you so much once again.


#9

Change Number(v)-1 to Math.max(Number(v)-1,0), or just copy the edited code above.


#10

Hi Samliew. Thanks so much for the help so far I've just one more question to ask.

Is there any possibility of generating a value on each of the buttons and making it functional so a total $ dollar sign appears to show how much the customer is spending?

Here's what the webpage looks like so far
https://preview.webflow.com/preview/he-stays-com-au-11268afdbad9c4444f33ff6?preview=94bda58ccfe006a2d61e7f9e4b3d1347

Thanks again


#11

Hi @norvin_mago, for complex requests, I am available for hire here.


#12

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.