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>