Buttons
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>Optional
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>