Quickstart

<!doctype html>
<html lang="sv">
<head>
  <meta charset="utf-8">
  <script defer
    src="https://cdn.jsdelivr.net/npm/@quickbutik/kit@1.8.0/dist/quickbutik-kit.global.js"
    data-publishable-key="qb_pk_…"
    data-currency="SEK"
    data-locale="sv-SE"></script>
  <style>
    qb-product-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 1.5rem; }
  </style>
</head>
<body>
  <a href="/cart">Cart (<qb-cart-count></qb-cart-count>)</a>

  <!-- The <template> must be a DIRECT child of the list element. -->
  <qb-product-list limit="12" href-template="/products/:slug">
    <template>
      <a data-qb-attr="href:product.href">
        <qb-product-image width="400" height="400"></qb-product-image>
        <h3 data-qb-text="product.name"></h3>
        <span data-qb-text="product.priceFormatted"></span>
      </a>
    </template>
  </qb-product-list>

  <qb-cart>
    <p data-qb-show="cart.empty" hidden>Your cart is empty.</p>
    <qb-cart-items>
      <template>
        <div>
          <span data-qb-text="item.productTitle"></span>
          <button type="button" data-qb-action="decrement">−</button>
          <span data-qb-text="item.quantity"></span>
          <button type="button" data-qb-action="increment">+</button>
          <strong data-qb-text="item.lineTotalFormatted"></strong>
          <button type="button" data-qb-action="remove">Remove</button>
        </div>
      </template>
    </qb-cart-items>
    <p data-qb-hide="cart.empty" hidden>Total <strong data-qb-text="cart.totalFormatted"></strong></p>
    <qb-checkout-button success-url="/success" back-url="/">
      <button type="button">Go to checkout</button>
    </qb-checkout-button>
  </qb-cart>
</body>
</html>

<qb-product slug="cotton-tee">
  <h1 data-qb-text="product.name"></h1>
  <qb-product-image width="800" height="800" priority></qb-product-image>
  <p data-qb-text="price.display"></p>
  <qb-options>
    <template>
      <fieldset>
        <legend data-qb-text="group.name"></legend>
        <qb-option-values>
          <template>
            <button type="button" data-qb-action="select" data-qb-text="value.name"></button>
          </template>
        </qb-option-values>
      </fieldset>
    </template>
  </qb-options>
  <qb-add-to-cart><button type="button">Add to cart</button></qb-add-to-cart>
</qb-product>

<qb-order-confirmation>
  <p data-qb-show="confirmation.loading" hidden>Creating your order…</p>
  <p data-qb-show="confirmation.completed" hidden>Thank you! Order <b data-qb-text="confirmation.orderNumber"></b></p>
  <p data-qb-show="confirmation.failed" hidden>The payment did not go through.</p>
  <p data-qb-show="confirmation.timedOut" hidden>Your order is still being processed.</p>
</qb-order-confirmation>