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>

This is an optional element with predefined styling. The cart can be opened by other means. See Opening the cart

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