Adding plus or minus button for quantity in add to cart

is there a way to add the plus and minus button for quantity in add to cart functionality without using plugin. i search yt for any tutorial on how to do this but found it can only be done using plugin.

thanks

Totally doable with Bubble functionality

On +click or -click build logic to add or substract to a count placed as a state value on the page

I wanted to see how easy would that be so I gave it a shot.

I have two data types: product and cart item. Product just has a name and price and cart Item has a product and amount (number). The behavior is below can easily be done by using native bubble things and elements.

cart

thats my only problem.how to add value in quantity when i click +/- sign. did you use custom state? how?

It’s with custom states, you create a custom state, type number, and a default value as 0, or 1 depending how you prefer to present the input to the final user, then create a workflow for each button:

When click on the “+” button => set custom state => Value will be the custom state value or the input value (the data type of the input must be intenger) + 1

For the “-” the same but instead of plus you will use - 1.

After that you can create conditionals, for example the “-1” button only triggers when the custom state value or the input (depends of how you are building your logic) > 0, so you will not have negative numbers.

1 Like

It can be done with custom states. But if you create it in a separate data type, it will be there no matter what and synchronized between sessions easily. Below are my two data types for product and cart item:

image
image

You can easily show them in a repeating group, both of these, just do a search for.

I added a “add to cart” button to the product repeating group:

It is just creating a new cart item with the current cell’s product.
image

Then, the cart repeating group is just displaying the cart items, nothing special. But with +, -, X buttons added. It just display’s current cell’s cart item’s name and amount.

And this is what + button does:

It is just decreasing the amount of the current cell’s cart item.

  • button is similar, and X button removes the current cell’s cart item.

Of course, you should have these data structured better. For example, current user will have the list of cart items instead of showing all cart items.

1 Like

in your case you add the item to the cart first before selecting the quantity. how about if i select first the quantity before adding it to cart.

which means that in my list of product the plus/minus sign, quantity box and the add to cart button is already showing besides the product which is different from yours wherein the plus/minus sign will only appear after you click the add to cart button.

so can you show me the procedure where i click first the plus/minus sign to get the quantity and after that i will click the add to cart.

thanks for the help.

You can just get another quantity and set it here. I defaulted it to 1. But you can change this and make it dynamic from your page:
image

yes i was able to create a thing in my database. however my problem is the quantity value doesnt appear in quantity element when i click the +/- sign. may i see how you set your initial content in your quantity element.

thanks.