Skip to content
aeropage-round-dark
Aeropage Documentation
Ecommerce

icon picker
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.

image.png

Add, Edit or Remove Items

Use the action : and Update Collection whenever you want to update (or add to) the cart.
image.png

Select the collection you created in the previous step.
image.png

Use the respective buttons to select the desired action:
Add: To add new data to the collection.
Edit: To modify existing data in the collection.
Delete: To remove data from the collection.
image.png

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.
image.png

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.

image.png

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.

image.png

image.png

Map the values to the action, refer to the reference below...

image.png

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
image.png

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.
image.png

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.

image.png

You can find premade shopping carts in the block library.

image.png




Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.