Usage

Overview of Launch Elements

A library built on Web Components and LiveState that makes injecting interactivity into static HTML sites simple.

  • Works with all frameworks and static site generators
  • Fully customizable with CSS and slots
  • Built with accessibility in mind
  • Open Source

Designed and built by Launch Scout

What are Web Components?

TLDR; They are a set of standard libraries build into web browsers that allow us to build custom HTML elements that can be used in any framework we'd like! Read more here.

Component-driven development has become the norm thanks to a variety of popular frameworks. The beauty of web components, though, is that they are not tied to a specific framework, are supported by all modern browsers, and are part of the standard. So, we know they'll be around for a while.

What Problem does this Solve?

The goal of Launch Elements is to make it stupid-simple to inject web-app funcitonality into your static HTML site.

Most existing platforms for building sites with web-app features force you to use a specific hosting environment and templating language. Some of those might give you access to customize those templates. Launch Elements gives you free reign to control the look and feel of not only your site, but also our web components. And rather than force you to choose a proprietary environment or template language, Launch Elements work with standard HTML: because the Launch Elements themselves are HTML elements.

Accessibility

Launch Elements has been built with accessibilty in mind. We've taken time to test keyboard accessibility and to meet WCAG AA success criterion.

If you notice something we've missed, please let us know so that we can ensure Launch Elements is as inclusive as possible.

Installation

Installation is easy. Before you can start using the cart element, you'll need to:

  • Register for an account
  • Set up a Stripe account and add products to it
  • Connect your Stripe account to Launch Elements
  • Create your Launch Elements store

Once you've complete those steps, installation is easy peasy. Here are the installation steps using generic ids.

  1. Include Launch Elements in your project

    First, you'll need to add the Launch Elements library to your page. Copy + Paste this script tag into your head block:

And that's it! That's literally all you need to do to install the Launch Elements Cart in your site. Next we'll talk about using it.

Usage

The Web Components

To start using the Launch Elements Cart, you just need to add the HTML elements to your site and pass the correct attributes to them. Creating your Launch Elements store will generate these for you, but here is a generic example to demonstrate how simple it is.

  • Place your cart

    You'll need to add the launch-cart to your site. Copy + paste this line of code wherever you'd like the cart icon to display:

    It's worth calling out that you'll have to replace both the URL and the Store ID with those generated for you by Launch Elements.

  • Enable "Add to Cart"

    And last, you need to be able to add items to your cart. Just copy + paste the launch-cart-additem element below where you'd like the add to cart button to appear.

    Here you'll have to replace the Price ID with the Price ID from the corresponding product in Stripe.

Adding these two lines of code will get you exactly what you see in the examples. Let's talk about customization.

Customization

Here comes the fun part. Launch Elements gives you full control of how you want your elements to look via CSS and slots.

Slots

What are slots, you ask? Slots enable you to insert your own markup to override the default user interface that a web component creates.

With the Launch Elements Cart, there are two available slots. One to change the cart icon and one to change the add to cart button. Doing so is super simple.

The Cart Icon

To update the cart icon, all you have to do is give the element you want to replace the cart icon the slot="icon" attribute and wrap it with the launch-cart element like shown.

🍕

As long as the slot="icon" attribute is present, the cart icon will be replaced with your markup. You can also give it your own class names and your CSS will be passed in, as well!

The Add to Cart Button

Similar to how you replace the cart icon, you wrap your markup with the launch-cart-additem elements and it will be replaced with your markup and CSS.

The only caveat is that the element must have a click event—so either a button or a link.

Customizing the Checkout Completion modal

When a user completes their checkout, a modal will appear to thank them for their purchase. You can replace the default content of this modal by adding your own markup inside the launch-cart element.

Add the slot="checkout-complete" attribute to the element you want to replace the default content with as shown below.

CSS

Because Launch Elements are custom HTML elements, they are stylable via CSS. To give you the CSS control you need, we expose component parts for everything you might want to style.

Component Parts offer a way to customize each element within the shadow DOM of our elements using purely CSS. All you have to do is use the CSS part selector, or ::part().

Above is just a sample of the available parts to style. Below is a full list.

  • ::part(cart-button)
  • ::part(cart-icon)
  • ::part(cart-count)
  • ::part(modal)
  • ::part(modal-header)
  • ::part(modal-body)
  • ::part(close-modal)
  • ::part(cart-decrease-qty-button)
  • ::part(cart-increase-qty-button)
  • ::part(cart-decrease-qty-button)
  • ::part(cart-empty-message)
  • ::part(cart-thank-you)
  • ::part(cart-summary-table)
  • ::part(cart-summary-item)
  • ::part(cart-summary-qty)
  • ::part(cart-summary-price)
  • ::part(cart-summary-remove)
  • ::part(cart-remove-item-button)
  • ::part(checkout-button)
  • ::part(add-to-cart-button)
  • ::part(spinner)
  • ::part(spinner-path)