Introduction

<!DOCTYPE html>
<html>
  <head>
    <title>My Store</title>
    <script src="https://cdn.komerza.com/komerza.min.js"></script>
    <script>
      komerza.init("your-store-id");
    </script>
  </head>
  <body>
    <h1 id="store-name"></h1>
    <p><span id="cart-count">0</span> in cart</p>
    <div id="products"></div>

    <script>
      async function render() {
        const [response, formatter] = await Promise.all([
          komerza.getStore(),
          komerza.createFormatter(),
        ]);
        if (!response.success) return;

        const store = response.data;
        document.getElementById("store-name").textContent = store.name;

        const list = document.getElementById("products");
        store.products
          .filter((product) => product.visibility === 0) // public products only
          .sort((a, b) => a.order - b.order)
          .forEach((product) => {
            const variant = product.variants[0];

            const card = document.createElement("div");
            const name = document.createElement("h2");
            const price = document.createElement("p");
            const button = document.createElement("button");

            name.textContent = product.name;
            price.textContent = formatter.format(variant.cost);
            button.textContent = variant.isOutOfStock ? "Sold out" : "Add to cart";
            button.disabled = variant.isOutOfStock;
            button.onclick = () => komerza.addToBasket(product.id, variant.id);

            card.append(name, price, button);
            list.append(card);
          });
      }

      const count = document.getElementById("cart-count");
      count.textContent = komerza.getBasketItemCount();
      komerza.on("basketchange", (event) => {
        count.textContent = event.itemCount;
      });

      render();
    </script>
  </body>
</html>