# Buttons

> Open the cart and add products or subscriptions to it.

## 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.

```html
<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](#opening-the-cart)

### Optional

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

```html
<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.

```html
<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`.

```html{6}
<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.

```html{6,9-14}
<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_frequency: "monthly",
      subscription_duration_prepaid: 1,
    },
  });
  function addSubscriptionToCart() {
    dispatchEvent(addSubscriptionEvent);
  }
</script>
```