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.
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.
Open this example in the Editor to work with the template.
Publish the site and refresh your browser so the Stores collections appear in the Database.
Learn how to work with examples in Corvid.