No code.

I embedded a shopping experience into this article in five minutes, using just HTML markup. Then my wife spent another 30 minutes selecting the right image for the product, but that’s a different story. Below is the result of our teamwork:

White flip flops with black logo

Super comfy flip-flops with rubber sole lined with a soft polyester fabric that will look great with your vivid prints on it. Let your craziest summer dreams run wild!

Despite its simplicity, there is a multi-market shopping cart, checkout, and promotion engine underneath this system that can scale to millions of customers. A no-code solution like this can dramatically reduce time to market without compromising flexibility. It allows you to focus on building your client's differentiators, instead of reinventing the wheel. In this way, you can give some time back to business users to distinguish their brand, like my wife looking for the perfect image.

How it works

The product image, title, and description are just parts of the page content. The commerce functionality, instead, is powered by Commerce Layer. In particular, I embedded the Commerce Layer micro frontends, which is a library of web components that can be mixed as custom DOM elements into any HTML page.

To make it work, only two pieces of information are needed: the Commerce Layer market ID, which encapsulates the active price list, promotions, inventory model, payment methods, etc. and the SKU code, which is used by convention to fetch the right price and availability (for the selected market) and to render the add to cart button. This is all orchestrated by a drop-in JS library that is configured as described below.

Configuration

The following snippet imports the Commerce Layer drop-in library and configures the application. The client ID identifies a sales channel, an OAuth2 public client that can run safely in the browser. The slug identifies an organization within Commerce Layer, which is essentially a tenant. Finally, the scope contains the market ID, enabling one of the markets that have been configured in Commerce Layer.

<script type="module" src="https://cdn.jsdelivr.net/npm/@commercelayer/drop-in.js@1.4.0/dist/drop-in/drop-in.esm.js"></script>

<script>
  (function() {
    window.commercelayerConfig = {
      clientId: 'N-7S1dheBn6BH_XhjSAKKfrRw_GorPajBSspbzZTDfo',
      slug: 'headless-commerce-demo',
      scope: 'market:13360'
    }
  }());
</script>

As soon as the page loads, the drop-in library requests an access token from Commerce Layer, using the sales channel credentials and putting the market in scope. This token will be used for all subsequent API calls, without any additional configuration.

Stylesheets

Although you can style the page in any way you want, Commerce Layer provides two optional stylesheets to make your job even easier. The drop-in.css stylesheet is responsible for the basic styling. It disables the add to cart button when the SKU is out of stock, for example. The minicart.css, instead, provides the slide-in/slide-out animations for the shopping cart.

<link href="https://cdn.jsdelivr.net/npm/@commercelayer/drop-in.js@1.3.1/dist/drop-in/drop-in.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/@commercelayer/drop-in.js@1.3.1/dist/drop-in/minicart.css" rel="stylesheet" />

As the two stylesheets are separated, you can embed either one. As an example, you might want to control the look and feel of prices and buttons while maintaining the provided minicart experience.

Cart preview

The cart icon consists of an svg image (I omitted it for simplicity) with a counter that shows how many items are in the cart. The open-on-add setting opens the cart preview every time an item is added.

<cl-cart-link>
    <!--- svg cart icon --->
    <cl-cart-count></cl-cart-count>
    <cl-cart open-on-add="true"></cl-cart>
</cl-cart-link>

With the minicart.css stylesheet imported, the cart will slide in when you click the icon or the add to cart button.

Price

The cl-price tag displays the price (and the strike price, if any) of the product or variant identified by the FLIPFLOPFFFFFF00000075XX SKU code. Using the access token, the drop-in library retrieves the price from Commerce Layer when it finds this element in the page. Price amount and currency are determined by the market in scope.

<cl-price code="FLIPFLOPFFFFFF00000075XX">
  <cl-price-amount type="compare-at"></cl-price-amount>
  <cl-price-amount type="price"></cl-price-amount>
</cl-price>

If this site had a country selector, you could simply assign different markets to different countries and change the scope of the configuration. If the page contained more SKUs, the drop-in library would fetch all prices in a single API call, preventing multiple requests.

Availability

The cl-availability tag displays an availability message for the selected SKU. Specifically, two messages can be displayed: one when the SKU is available and one when it is out of stock in the selected market.

<cl-availability code="FLIPFLOPFFFFFF00000075XX">
  <cl-availability-status type="available" style="color: green;">
      in stock
  </cl-availability-status>
  <cl-availability-status type="unavailable" style="color: red;">
      out of stock
  </cl-availability-status>
</cl-availability>

You can also provide customers with more availability information such as delivery lead time and cost through other web components included with the library.

Add to cart

Adding an add to cart button is as simple as embedding a cl-add-to-cart element with a SKU code attribute.

<cl-add-to-cart code="FLIPFLOPFFFFFF00000075XX">
  Add to cart
</cl-add-to-cart>

The drop-in library will create an order for the selected market if the cart is not present. After an item is added, the cart will open if the open-on-add option is enabled on the cl-cart element.

Checkout

You can either open a shopping cart page and click the checkout button or place a checkout link anywhere on the page, which is only enabled if your cart is not empty (at the moment, there are items). And here’s how I wrote the last paragraph:

You can either open a <cl-cart-link>shopping cart page</cl-cart-link> and click the checkout button or place a <cl-checkout-link>checkout link</cl-checkout-link> anywhere on the page, which is only enabled if your cart is not empty (at the moment, there are <cl-cart-count></cl-cart-count> items).

How cool is that? I have also put this example into a single html file that you can download and open on your local computer. Just make sure you use Firefox or Safari, as Chrome doesn’t set cookies for the file:// protocol (not sure about Edge).