Interacting with the cart

To open the basket. Add the data-embed="circuly-cart-button" attribute to the html element. This button contain both a basket icon, and an item count.

<div data-embed="circuly-cart-button"></div>


For the cart button to be visible on page load. Add the persistent attribute

<div data-embed="circuly-cart-button" persistent></div>

Opening the Cart

To open and close the basket, a data-embed attribute "circuly-open-cart" can be used.

<button data-embed="circuly-open-cart"></button>

Adding items to the cart

The cart supports two types of buying options. As a subscription or as a normal purchase. Make sure to supply the correct SKU (Stock Keeping Unit) or SKU variation. Incase of a buying product, set the subscription option to false.

<button onclick="addProductToCart()">add product</button><script>  let addProductEvent = new CustomEvent("circuly-add-to-cart", {    detail: {      sku: "product-1",    },  });  function addProductToCart() {    dispatchEvent(addProductEvent);  }</script>

In order to add a product as a subscription set the subscription option to true . Optionally set the subscription start and end-date.

<button onclick="addSubscriptionToCart()">add product</button><script>  let addSubscriptionEvent = new CustomEvent("circuly-add-to-cart", {    detail: {      sku: "product-2",      // Optional Fields      subscription: true,      subscription_start: null,      subscription_end: null,      quantity: 1,      subscription_duration: null,      subscription_period: "monthly",      subscription_interval: 1,    },  });  function addSubscriptionToCart() {    dispatchEvent(addSubscriptionEvent);  }</script>