Cart v1

View as Markdown

Reference

Every add-to-cart key, cart option and styling option.

You're reading the docs for cart v1, the version in production. Cart v2 is in beta.

Interface

interface CartChildItemCreate {
  quantity: number;
  sku: string;
  subscription: boolean;
  subscription_duration: number | null;
  subscription_duration_prepaid: number;
  subscription_end: string | null;
  subscription_frequency: "daily" | "weekly" | "monthly" | "yearly" | null;
  subscription_start: string | null;
  subscription_type: "normal" | "consumable" | "digital" | null;
}

interface CartItemCreate {
  children: CartChildItemCreate | null;
  quantity: number;
  sku: string;
  subscription: boolean;
  subscription_duration: number | null;
  subscription_duration_prepaid: number;
  subscription_end: string | null;
  subscription_frequency: "daily" | "weekly" | "monthly" | "yearly" | null;
  subscription_start: string | null;
  subscription_type: "normal" | "consumable" | "digital"  | null;
}
Some keys were renamed: subscription_period is now subscription_frequency, subscription_interval is now subscription_duration_prepaid and subscription_length is now subscription_duration. The old names are still accepted. See Deprecated key names.

Keys

children

  • Type: array
  • Default: null

Manually add child items to a parent.

quantity

  • Type: number
  • Default: 1

Amount of products added.

sku

  • Type: string
  • Required

Stock keeping unit.

subscription

  • Type: boolean
  • Default: false

User to determine if the added product is a subscription or not.

subscription_duration

  • Type: number|null
  • Default: null

Specifies the subscription length.

subscription_duration_prepaid

  • Type: number
  • Default: 1

Specifies the prepaid length of a subscription. Previously subscription_interval.

subscription_end

  • Type: string|Date|null
  • Default: null

Subscription end date.

subscription_frequency

  • Type: string
  • Default: null

Specifies the instalment frequency. Previously subscription_period.

daily | weekly | monthly | yearly;

subscription_start

  • Type: string|Date|null
  • Default: null

Subscription start date.

subscription_type

  • Type: string|null
  • Default: null

Specifies the type of the subscription as normal or consumable.

normal | consumable | digital;

Deprecated key names

The old names are still accepted and translated by the API. If a payload has both, the new name wins.

UseInstead of
subscription_frequencysubscription_period
subscription_durationsubscription_length
subscription_duration_prepaidsubscription_interval or subscription_period_interval

Cart options

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.

detached

  • Type: boolean
  • Default: false

Detaches cart from window edges.

persistent

  • Type: boolean
  • Default: false

Opens cart on page load.

  • Type: boolean
  • Default: false

Position cart right or left.

tinted

  • Type: boolean
  • Default: false

Tinted backdrop when cart is open.

show_sum_purchases

  • Type: boolean
  • Default: true

Show sum of purchases.

show_sum_subscriptions

  • Type: boolean
  • Default: true

Show sum of subscriptions.

show_sum_total

  • Type: boolean
  • Default: true

Show sum total.


Styling options

CSS variables are used to style the cart. The following variables are available:

border

Influences border of buttons, inputs and product cards.

border_radius

Influences border radius of all elements.

box_shadow

Influences box shadow of buttons, inputs & product cards.

button_cart_primary

  • Type: <color>

Background color for the predefined "circuly-cart-button" element. (Buttons)

button_cart_text_primary

  • Type: <color>

Text color for the predefined "circuly-cart-button" element. (Buttons)

button_checkout_primary

  • Type: <color>

Checkout button background color.

button_checkout_text_primary

  • Type: <color>

Checkout button text color.

button_primary

  • Type: <color>

Button background color.

chip_primary

  • Type: <color>

Chip background color for the predefined "circuly-cart-button" element. (Buttons)

font_family

Font family.

font_weight

Font weight.

primary

  • Type: <color>

Influences the background color of the cart.

product_card_primary

  • Type: <color>

Product card background color.

secondary

  • Type: <color>

Influences the product sheet background color.

text_primary

  • Type: <color>

Text primary color.

text_secondary

  • Type: <color>

Text secondary color, used on buttons, and text such as subscription dates and attributes.