Build a storefront in plain JavaScript

import { pickProductImage, resolveProductImageUrl } from "@quickbutik/kit"
import { kit, money } from "./kit"

export async function renderCatalog(grid: HTMLElement, q?: string, cursor?: string) {
  const page = q
    ? await kit.products.search({ search: q, sortBy: "price", sortOrder: "asc", limit: 24, cursor })
    : await kit.products.list({ limit: 24, cursor })

  grid.innerHTML = page.data.map((p) => {
    // NEVER image.path: it is a bare storage filename and 404s.
    const src = resolveProductImageUrl(pickProductImage(p), { width: 320, height: 320 })
    return `
      <a class="card" href="/products/${encodeURIComponent(p.slug ?? p.id)}">
        ${src ? `<img src="${attr(src)}" alt="${esc(p.name ?? "")}" width="320" height="320" loading="lazy">` : ""}
        <span>${esc(p.name ?? "")}</span>
        <span>${p.price === null ? "" : money(p.price, p.currency ?? undefined)}</span>
      </a>`
  }).join("")

  return page.has_more ? page.next_cursor : null // feed back as `cursor`
}

import {
  buildVariantMatrix, resolveVariant, buildPriceState, selectOptionValue,
  selectionForVariant, getOptionGroups, pickProductImage, resolveProductImageUrl,
  type VariantSelection,
} from "@quickbutik/kit"
import { kit, money } from "./kit"
import { cart } from "./cart-state"

export async function renderProduct(slug: string) {
  const product = await kit.products.getBySlug(slug) // Product | null
  if (!product) return renderNotFound()

  let selection: VariantSelection = {}
  const deepLink = new URLSearchParams(location.search).get("variant")
  if (deepLink) selection = selectionForVariant(product, Number(deepLink))

  function render() {
    const groups = buildVariantMatrix(product!, selection)   // option groups with per-value availability
    const variant = resolveVariant(product!, selection)      // ProductVariant | null until every group is chosen
    const price = buildPriceState(product!, selection)       // { amount, compareAtAmount, min, max, isRange }
    const hasOptions = getOptionGroups(product!).length > 0

    priceEl.textContent =
      price.amount !== null ? money(price.amount, product.currency ?? undefined)
      : price.isRange && price.min !== null ? `from ${money(price.min, product.currency ?? undefined)}`
      : price.min !== null ? money(price.min, product.currency ?? undefined) : ""

    // Swap to the picked variant's own image, falling back to the main one
    const image = pickProductImage(product!, { imageId: variant?.imageId ?? undefined }) ?? pickProductImage(product!)
    imageEl.src = resolveProductImageUrl(image, { width: 800, height: 800 }) ?? ""

    optionsEl.innerHTML = groups.map((g) => `
      <fieldset><legend>${esc(g.name ?? "")}</legend>
        ${g.values.map((v) => `
          <button type="button" data-option="${g.id}" data-value="${v.id}"
            aria-pressed="${v.selected}" aria-disabled="${!v.available}">${esc(v.name ?? "")}</button>`).join("")}
      </fieldset>`).join("")

    const missing = groups.filter((g) => g.selectedValueId === null)
    addBtn.disabled = (hasOptions && !variant) || cart.getSnapshot().pending > 0
    addBtn.textContent = missing.length ? `Select ${missing[0].name ?? "an option"}` : "Add to cart"
    addBtn.onclick = () => void cart.add({ productId: product!.id, variantId: variant?.id, quantity: 1 })
  }

  optionsEl.addEventListener("click", (e) => {
    const b = (e.target as HTMLElement).closest<HTMLButtonElement>("button[data-option]")
    if (!b) return
    // Repairs contradictions: keeps the new choice, clears what conflicts with it
    selection = selectOptionValue(product, selection, Number(b.dataset.option), Number(b.dataset.value))
    render()
  })
  render()
}

import { cart } from "./cart-state"
import { money } from "./kit"

cart.subscribe(() => {
  const { cart: c, pending, error } = cart.getSnapshot()
  if (!c || c.items.length === 0) {
    root.innerHTML = "<p>Your cart is empty.</p>"
    return
  }
  const off = pending ? "disabled" : ""
  root.innerHTML =
    c.items.map((item) => `
      <div class="line" data-id="${item.id}">
        ${item.imageUrl ? `<img src="${attr(item.imageUrl)}" alt="">` : ""}
        <div>${esc(item.productTitle ?? "")}${item.variantName ? ` · ${esc(item.variantName)}` : ""}${item.available ? "" : " · unavailable"}</div>
        <button data-qty="${item.quantity - 1}" ${off}>−</button>
        <span>${item.quantity}</span>
        <button data-qty="${item.quantity + 1}" ${off}>+</button>
        <span>${money(item.lineTotal, c.currency)}</span>
        <button data-remove ${off}>Remove</button>
      </div>`).join("") +
    `<p>Subtotal ${money(c.subtotal, c.currency)} · VAT ${money(c.totalTax, c.currency)} ·
       <strong>Total ${money(c.total, c.currency)}</strong></p>` +
    (error ? `<p role="alert">${esc(error.message)}</p>` : "")
})

root.addEventListener("click", (e) => {
  const t = e.target as HTMLElement
  const id = t.closest<HTMLElement>(".line")?.dataset.id // the LINE id, not the product id
  if (!id) return
  if (t.hasAttribute("data-remove")) void cart.removeItem(id)
  else if (t.dataset.qty) void cart.updateItem(id, Number(t.dataset.qty)) // 0 removes
})

void cart.load()

import { kit } from "./kit"
import { cart } from "./cart-state"

const sessionId = await kit.checkout.currentSessionId()
if (!sessionId) {
  render("Thank you for your order.") // a direct visit, or cookies cleared: nothing to poll
} else {
  const fromUrl = kit.checkout.parseReturnUrl(location.href)?.orderNumber // display fallback only
  render("Creating your order…")

  const outcome = await kit.checkout.pollConfirmation(sessionId, {
    onUpdate: (c) => render(`Status: ${c.status}`),
  })

  switch (outcome.kind) {
    case "completed":
      render(`Order #${outcome.orderNumber ?? fromUrl ?? ""} is confirmed. A confirmation email is on its way.`)
      void cart.refresh() // the kit already forgot the bought cart; empty the badge
      break
    case "failed":
      render("The payment did not go through. No order was created.")
      break
    case "timeout":
      render("Your payment is registered and the order is being created. Refresh in a moment.") // NOT a failure
      break
    case "aborted":
      break
  }
}