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