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

collection⁠

that will be persistent between pages and sessions → create a new data source and under collections choose Stripe Cart.

⁠

Add, Edit or Remove Items

Use the action :

Send Data⁠

and Update Collection whenever you want to update (or add to) the cart.

⁠

Select the collection you created in the previous step.

⁠

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.

⁠

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.

⁠

Map the values

Send Data⁠

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

⁠

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 →

Run a Function⁠

to calculate the new quantity by adding or subtracting from the current value.

⁠

Second action →

Send Data⁠

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.

⁠

Carts

Create a Collection

Add, Edit or Remove Items

Example (Add)

Display the Cart Contents

Remove an Item

Change Quantity

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.