The Basket
Embedding the Basket
The basket is used to display the cart.
To ensure interaction with the cart, a data-embed
attribute is needed with the value of circuly-basket
.
<div data-embed="circuly-basket"> <script type="application/json"> { "api_key": String } </script></div>
The <script>
element must be a child of the basket, and have the type of application/json
.
The api key is required.
Options
Further options are available but not necessary. Either via attributes.
<div data-embed="circuly-basket" right detached tinted persistent></div>
Or as a part of the json object.
<div data-embed="circuly-basket"> <script type="application/json"> { "options": { "right": Boolean, // default false "detached": Boolean, // default false "tinted": Boolean, // default false "persistent": Boolean // default false "show_sum_purchases": Boolean // default false "show_sum_subscriptions": Boolean // default false "show_sum_total": Boolean // default true } } </script></div>
Make sure the JSON object is valid.
Styling Options
A set of style overrides are also available.
<div data-embed="circuly-basket"> <script type="application/json"> { "style": { "primary": String, "secondary": String, "button_primary": String, "chip_primary": String, "text_primary": String, "text_secondary": String, "text_disabled": String, "font_family": String, "font_weight": String, "border_radius": String, "border": String, "box_shadow": String, // Component specific overrides "button_checkout_primary": String, "button_checkout_text_primary": String, "button_cart_primary": String, "button_cart_text_primary": String "product_card_primary": String, } } </script></div>
Locale Options
[^1.8]
Override locales by setting new key-value pairs.
Also, extending available locales by adding new locale objects.
<div data-embed="circuly-basket"> <script type="application/json"> { "locales": { "en": { // All key-value pairs are optional "checkout": "Checkout", "empty_cart": "Your cart is currently empty", "items": "Items | Item | Items", "purchases": "Purchases | Purchase | Purchases", "subscriptions": "Subscriptions | Subscription | Subscriptions", "total": "Total", "your_cart": "Your cart" } } } </script></div>
Natively supported locales: de
,en
,fr
,no
& sv
.
Make note of the pattern
zero | singular | plural
for certain key values.Table of Contents