Add to cart button

[khairul]

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.

[dorilama]

A very basic example:

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

  

• 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.
  
  

  

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

  1. return value, where you calculate the new amount
     
     
  2. change simple-cart variable, with the updated value
     
     

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

  1. return value, where you calculate the new amount
     
     
  2. change simple-cart variable, with the updated value
     
     

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

  

result showing the value of the variable:

[khairul]

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

[dorilama]

Marvelous

[khairul]

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

[dorilama]

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.

[khairul]

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

[dorilama]

add one action with condition to the remove workflow:

[khairul]

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

[dorilama]

@khairul

thank you so much!

awesome! happy to help

[khairul]

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

[dorilama]

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.

[khairul]

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

[Joyce]

@khairul

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

Agreed!