Reference

Interface

interface CartChildItemCreate {
  quantity: number;
  sku: string;
  subscription: boolean;
  subscription_duration: number | null;
  subscription_end: string | null;
  subscription_interval: number;
  subscription_period: "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_end: string | null;
  subscription_interval: number;
  subscription_period: "daily" | "weekly" | "monthly" | "yearly" | null;
  subscription_start: string | null;
  subscription_type: "normal" | "consumable" | "digital"  | null;
}

Keys

children

  • Type: array
  • Default: null

Manually add child items to a parent.

quantity

  • Type: number
  • Default: 1

Amount of products added.

sku

  • Type: boolean
  • Default: false

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_end

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

Subscription end date.

subscription_interval

  • Type: number
  • Default: 1

Specifies the prepaid length of a subscription.

subscription_period

  • Type: string
  • Default: null

Specifies the instalment frequency.

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;

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.