Add to cart button

Ask us anything How do I?
1

Hi guys. I just found out about weweb and just in awe how amazing the product is. I think we will be so close to everyone can build web app now and am so excited about the future.

I need some help, I can’t code and I am figuring out how to make an add to cart button instacart-like, with add and subtract function right at the product. I hope someone can enlighten me. Thank you so much weweb and everyone.

1 Like
2

A very basic example:

  • create a variable “simple-cart” of type Object default to {}

    image
    image577×732 25.2 KB

  • create a list of cards binding the items to a list of products (you need a unique id for every product). In the example I am using an array of data directly in the formula but this should be from a collection or another data source.
    image

    image
    image983×572 59.8 KB

  • to add a product create a workflow with two actions:

    1. return value, where you calculate the new amount
      image
      image1604×734 93.9 KB
    2. change simple-cart variable, with the updated value
      image
      image1217×720 87 KB

  • to remove a product create a workflow with two actions:

    1. return value, where you calculate the new amount
      image
      image1613×727 107 KB
    2. change simple-cart variable, with the updated value
      image
      image1611×738 99.4 KB

  • to get the total amount of a product in a cart:

    image
    image989×829 81.3 KB

result showing the value of the variable:
chrome_mZE5Hezawy

4 Likes
3

Thank you so much, this means very much to me. Cheers!

1 Like
4

Marvelous :slight_smile:

5

Hi sir sorry to bother, I came with another obstacle. How do I remove the empty products from the cart?

6

Either you do not consider an element in the cart if the value is 0 or you need to add other actions to remove the value from the cart object when the calculated new value is 0.
This will be eqsier to do with nocode once the team add the conditional workflows.

7

I think removing would be better, but I can’t figure out how.

8

add one action with condition to the remove workflow:

image
image1573×826 80.9 KB

image
image1207×923 124 KB

3 Likes
9

you sir, are a hero. thank you so much!

3 Likes
10

awesome! happy to help :slight_smile:

1 Like
11

dorilama sorry if i am bothering you. I made an array containing the objects just now to make the cart, my array just content the id and quantity of the product, how do I show the product’s name, or price in the cart and also to push through the database

12

You have the id of the product, you can retrieve the product informations with that. Try exploring the other formulas available.

For the database it depends by your backend, what data you want to save and when you want to update the data.
There are a lot of different ways of doing it. Try one, see how it works for you and then iterate.

1 Like
13

Alright, will do! Thank you so much for your help

14

Agreed! :star_struck:

1 Like