Skip to content
Aeropage Documentation
Ecommerce
Multiple / Line Items
Allow users to collect multiple items and define quantities before checking out.
Carts
This guide will show you how to make a shopping cart system that can be sent to a stripe checkout with line items.
Create a Collection
To store the user’s shopping cart we a that will be persistent between pages and sessions → create a new data source and under collections choose Stripe Cart.
Add, Edit or Remove Items
Select the collection you created in the previous step.
Use the respective buttons to select the desired action:
Example (Add)
Click the plus (+) button next to "Values" to open the "Choose Fields" pane.
Select the fields you want to include, such as Product ID, Product Price, Product Name, etc.
Input the corresponding values for each selected field.
After selecting the "Edit" action, you will need to specify which entry in the collection you want to update.
An additional field "Data ID" will appear. Select the ID of the data you wish to edit.
Similar to the 'Add' action, click the plus (+) button under "Values".
Select the fields you want to update from the "Choose Fields" list.
Enter the new values for each selected field.
Ensure that the "Data ID" matches the entry you intend to update.
After selecting the "Delete" action, you will only need to specify the "Data ID".
Enter or select the ID of the data you wish to delete from the collection.
There is no need to choose additional fields or values for deletion; specifying the correct "Data ID" is sufficient.
Display the Cart Contents
Because collections are a type of data source, you can query them and connect repeating components such as cards - then add input components and actions to change the values as seen below.
Remove an Item
Button for removing an item from the cart
Change Quantity
Button for subtracting\adding quantity of an item using
First action → to calculate the new quantity by adding or subtracting from the current value.
Second action → to Update an item in the cart, by referencing it’s ID and updating the value using the custom variable from the previous action.
You can find premade shopping carts in the block library.
Want to print your doc?
This is not the way.
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.