Experiments >

Headless buy button

Experiment #1045th April, 2021by Joshua Nussbaum

The trend in e-commerce is moving towards headless. Folks want to use modern stacks like Svelte & Vue instead of relying on the clunkier and dated options provided by site builders.

One approach that could work well is web components.

It’s nice because it would work for everything from a static .html file, all the way up to server rendered content. It doesn’t have any requirement to use React, Vue or Svelte.


An example “Buy Now” button would work like this:

<!-- import js -->
<script src="https://domain.tld/cart.js"></script>

<!-- define a button -->
<buy-button sku="t-shirt">Buy Now</buy-button>

It can be that simple.


Under the hood it’s using Svelte’s <svelte:options> directive which does the heavy lifting of create a customElement.

<svelte:options tag="buy-button"/>

  export let sku

  if (!sku) console.error('<buy-button> sku must be set')

  function submit() {
    // create checkout and redirect

<form on:submit|preventDefault={submit}>
  <button part="button">
view all experiments

Stay tuned in

Learn how to add more experimentation to your workflow