Subscription-now

Appearance

Return to top
On this page

Drop-in Components

Drop-in components are UI elements that you can create to interact with Subscription-now.js library. They provide a very easy way to let you have most of your essential interactions with the cart.

The procedure is creating these elements with data-sn- prefix and Subscription-now.js will iterate over these items and convert them into working interaction elements.

This approach also lets you style your elements however you want. Just create the dom element and add any CSS classes or style attributes you want.

Add to Cart Buttons

Add-to-cart buttons are buttons that adds a certain product to the cart on click.

You can create an add-to-cart button by providing the following data attributes:

  • data-sn-component: The value must be addToCart
  • data-sn-product-id: The value must be the id of the product that you can take from your payment provider. For Billwerk, this must be a plan variant's ID (component IDs are incoming).

A <button> tag 

<button type="button" data-sn-component="addToCart" data-sn-product-id="productId" class="your-css-styles">
    Add to Cart
</button>
1
2
3

An <a href> tag 

<a href="#" data-sn-component="addToCart" data-sn-product-id="productId" class="your-css-styles">
    Add to Cart
</a>
1
2
3

Toggle Cart Buttons

Toggle-cart buttons shows and hides the cart sidebar on click.

You can create a toggle-cart button by providing the following data attributes:

  • data-sn-component: The value must be toggleCart

A <button> tag 

<button type="button" data-sn-component="toggleCart" class="your-css-styles">
    Toggle Cart
</button>
1
2
3
More features are in development and will arrive shortly.