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>
Table of Contents