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. Please note that the API key is essential for proper functionality. You can locate it in the circuly operational backend by navigating to Settings > Setup & Design > Checkout Setup > API Key.

Api key setting

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": {
        "default_locale": String,          // default null
        "detached": Boolean,               // default false
        "persistent": Boolean              // default false
        "right": Boolean,                  // default false
        "tinted": Boolean,                 // default false

        "show_billing_frequency": 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.

default_locale

  • Type: null | 'de' | 'el' | 'en' | 'es' | 'fr' | 'it' | 'nl' | 'no' | 'sv'
  • Default: null

Sets preferred cart locale in addition to localized redirect url to checkout. NB! This option will override the "preferred language of the user". Only use this option if you want to force a specific language on initial page load.

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",
            "consumableProduct": "This item is a recurring delivery",
            "empty_cart": "Your cart is currently empty",
            "items": "Items | Item | Items",
            "outOfStock": "Out of stock",
            "purchases": "Purchases | Purchase | Purchases",
            "subscription_frequencies": {
                "daily": "Daily",
                "weekly": "Weekly",
                "monthly": "Monthly",
                "yearly": "Yearly"
            },
            "subscriptions": "Subscriptions | Subscription | Subscriptions",
            "total": "Total",
            "your_cart": "Your cart"
        }
      }
    }
  </script>
</div>

Natively supported locales: de,el,en,es,fr,it,nl,no & sv

Make note of the pattern zero | singular | plural for certain key values.
Table of Contents