> For the complete documentation index, see [llms.txt](https://cranford-tech.gitbook.io/stripe-checkout-shopping-cart-plugin/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://cranford-tech.gitbook.io/stripe-checkout-shopping-cart-plugin/adding-items-to-the-shopping-cart.md).

# Adding items to the shopping cart

The most straightforward implementation of a shopping cart involves the following steps:

1. Create a "Product" page that showcases a product and has an "Add to cart" button
2. Create a workflow on the "Add to cart" button that:
   * Creates a new "Cart Item"
   * Adds this "Cart Item" to the current user's shopping cart
     * I recommend putting on a conditional statement so that the workflow only runs when the current user is logged in

You can see an example of this in action in [my demo app](https://shopping-cart-demo-67649.bubbleapps.io/version-test/product/1688737812511x697129325935356800?debug_mode=true).

<figure><img src="https://2484116937-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5veFxRNePefac6Z9yAnL%2Fuploads%2FZ36Wwp0U6CeC955GcNJI%2FScreenshot%202023-07-21%20at%2011.44.42.png?alt=media&amp;token=1a573ffc-ab32-4a41-b983-16860f481fd0" alt=""><figcaption><p>Example of Product Page</p></figcaption></figure>

You'll then need to create a "Checkout" page where the current user's cart items are listed. ([demo app example](https://shopping-cart-demo-67649.bubbleapps.io/version-test/checkout?debug_mode=true)).

<figure><img src="https://2484116937-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5veFxRNePefac6Z9yAnL%2Fuploads%2Fa2CRMvqqJmvoupWQ5D2A%2FScreenshot%202023-07-21%20at%2011.43.53.png?alt=media&amp;token=c74f9926-5e14-4260-a3e2-4120dedf72a4" alt=""><figcaption><p>Example of Checkout Page</p></figcaption></figure>

In the above example I'm using a Repeating Group with the Type of contet set to "Cart Item" and the Data source to "Current User's shopping cart" (which is itself a list of cart items).

<figure><img src="https://2484116937-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5veFxRNePefac6Z9yAnL%2Fuploads%2F1ddlVtWwxQEBDXcbiFvj%2FScreenshot%202023-07-21%20at%2016.23.18.png?alt=media&amp;token=aa31d552-ad29-41ad-95b7-ac7a0a6ed130" alt=""><figcaption></figcaption></figure>
