Bulk Add to Cart

Let customers add multiple items to their cart—all at once.

Code Level

Advanced

Published

 

Example Description

In this example, a site visitor can design a charm bracelet with up to five charms. The bracelet and the charms are added to the cart at the same time.​

Example Code

How We Built It

Choosing the Bracelet and Charms

On the Charm Bracelet page, containers hold the elements that let visitors select a bracelet’s material and charms. These containers collapse or expand as visitors progress through the steps. Visitors can click on the heading text for any step to expand that step and collapse the others. Above these containers is the bracelet’s description, which is connected to the Description field in the Products collection.

 

After a visitor selects a bracelet material, the preview image on the left displays the color of that material. When the visitor clicks Next, the Choose charms container expands. A repeater in the container displays the available charms from the Products collection. When a visitor selects a charm, a black border appears around it and the charm is added to the preview image. After five charms are selected, an overlay covers the remaining charms so they can’t be selected.

 

If a visitor clicks on a charm they previously selected, the border disappears and the charm is removed from the preview image. If five charms were selected, then clicking one removes the overlay from the remaining charms, enabling their selection.

 

When a visitor clicks Finish, the Review custom bracelet section expands, displaying the selected material for the bracelet, the selected charms, and the total price.

 

Clicking Add to Cart adds the selected bracelet and charms to the shopping cart.

Next Steps

  1. Open this example in the Editor to work with the template.

  2. Publish the site and refresh your browser so the Stores collections appear in the Database.

  3. Learn how to work with examples in Corvid.

APIs We Used

Related Articles

Related Examples

Add to Cart Gallery

Let customers to add products to their cart

INTERMEDIATE

Hide and Show Elements

Hide and show elements in response to user interactions

BEGGINER

Hide and Show Elements

Hide and show elements in response to user interactions

BEGGINER