# Add to cart button

**URL:** <https://community.weweb.io/t/add-to-cart-button/866>\
**Category:** How do I?\
**Created:** [July 25, 2022, 5:04pm UTC](https://community.weweb.io/t/add-to-cart-button/866 "2022-07-25T17:04:01Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![khairul](https://avatars.discourse-cdn.com/v4/letter/k/a88e4f/32.png) [@khairul](https://community.weweb.io/u/khairul)\
**Post date:** [July 25, 2022, 5:04pm UTC](https://community.weweb.io/t/add-to-cart-button/866/1 "2022-07-25T17:04:01Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![dorilama](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/dorilama/32/10403_2.png) [@dorilama](https://community.weweb.io/u/dorilama)\
**Post date:** [July 25, 2022, 6:30pm UTC](https://community.weweb.io/t/add-to-cart-button/866/2 "2022-07-25T18:30:30Z")

</div>

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.  
 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/f/fc94935a98834347b8c6c2460f623c607a24b762.png)  

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

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

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

result showing the value of the variable:  
 ![chrome_mZE5Hezawy](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/d/d1e04dcb6b84079868fd5e6518eed70a3346d819.gif)

---

<div class="post-metadata">

**Author:** ![khairul](https://avatars.discourse-cdn.com/v4/letter/k/a88e4f/32.png) [@khairul](https://community.weweb.io/u/khairul)\
**Post date:** [July 26, 2022, 2:48pm UTC](https://community.weweb.io/t/add-to-cart-button/866/3 "2022-07-26T14:48:59Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![dorilama](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/dorilama/32/10403_2.png) [@dorilama](https://community.weweb.io/u/dorilama)\
**Post date:** [July 26, 2022, 3:11pm UTC](https://community.weweb.io/t/add-to-cart-button/866/4 "2022-07-26T15:11:41Z")

</div>

Marvelous 🙂

---

<div class="post-metadata">

**Author:** ![khairul](https://avatars.discourse-cdn.com/v4/letter/k/a88e4f/32.png) [@khairul](https://community.weweb.io/u/khairul)\
**Post date:** [July 26, 2022, 5:14pm UTC](https://community.weweb.io/t/add-to-cart-button/866/5 "2022-07-26T17:14:38Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![dorilama](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/dorilama/32/10403_2.png) [@dorilama](https://community.weweb.io/u/dorilama)\
**Post date:** [July 26, 2022, 5:31pm UTC](https://community.weweb.io/t/add-to-cart-button/866/6 "2022-07-26T17:31:17Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![khairul](https://avatars.discourse-cdn.com/v4/letter/k/a88e4f/32.png) [@khairul](https://community.weweb.io/u/khairul)\
**Post date:** [July 26, 2022, 5:39pm UTC](https://community.weweb.io/t/add-to-cart-button/866/7 "2022-07-26T17:39:32Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![dorilama](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/dorilama/32/10403_2.png) [@dorilama](https://community.weweb.io/u/dorilama)\
**Post date:** [July 26, 2022, 6:35pm UTC](https://community.weweb.io/t/add-to-cart-button/866/8 "2022-07-26T18:35:43Z")

</div>

add one action with condition to the remove workflow:

 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/f/f1d452da0ef7905375c20a70875f90b5ea627a8f.png)  
 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/7/7e9487bc5edfdabc78da5600923398be1f0c88ec.png)

---

<div class="post-metadata">

**Author:** ![khairul](https://avatars.discourse-cdn.com/v4/letter/k/a88e4f/32.png) [@khairul](https://community.weweb.io/u/khairul)\
**Post date:** [July 26, 2022, 6:37pm UTC](https://community.weweb.io/t/add-to-cart-button/866/9 "2022-07-26T18:37:34Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![dorilama](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/dorilama/32/10403_2.png) [@dorilama](https://community.weweb.io/u/dorilama)\
**Post date:** [July 26, 2022, 7:21pm UTC](https://community.weweb.io/t/add-to-cart-button/866/10 "2022-07-26T19:21:21Z")

</div>

> [@khairul](#):
>
> thank you so much!

awesome! happy to help 🙂

---

<div class="post-metadata">

**Author:** ![khairul](https://avatars.discourse-cdn.com/v4/letter/k/a88e4f/32.png) [@khairul](https://community.weweb.io/u/khairul)\
**Post date:** [July 26, 2022, 7:51pm UTC](https://community.weweb.io/t/add-to-cart-button/866/11 "2022-07-26T19:51:45Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![dorilama](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/dorilama/32/10403_2.png) [@dorilama](https://community.weweb.io/u/dorilama)\
**Post date:** [July 26, 2022, 8:13pm UTC](https://community.weweb.io/t/add-to-cart-button/866/12 "2022-07-26T20:13:34Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![khairul](https://avatars.discourse-cdn.com/v4/letter/k/a88e4f/32.png) [@khairul](https://community.weweb.io/u/khairul)\
**Post date:** [July 26, 2022, 8:37pm UTC](https://community.weweb.io/t/add-to-cart-button/866/13 "2022-07-26T20:37:24Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Joyce](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/joyce/32/13232_2.png) [@Joyce](https://community.weweb.io/u/Joyce)\
**Post date:** [July 27, 2022, 2:03pm UTC](https://community.weweb.io/t/add-to-cart-button/866/14 "2022-07-27T14:03:27Z")

</div>

> [@khairul](#):
>
> you sir, are a hero. thank you so much!

Agreed! 🤩
