Carrito

import { CartProvider, defineLayout } from "@ecomiq/storefront";

export default defineLayout(({ children, settings }) => (
  <CartProvider
    storeId={settings.store.id}
    currencyCode={settings.store.currency}
  >
    {children}
  </CartProvider>
));

import { useCart } from "@ecomiq/storefront";

export function AddToCartButton({ variantId }: { variantId: string }) {
  const { addItem, mutation, error } = useCart();
  const isAdding = mutation?.kind === "adding";

  return (
    <>
      <button
        type="button"
        disabled={isAdding}
        onClick={() => void addItem({ variantId, quantity: 1 })}
      >
        {isAdding ? "Agregando…" : "Agregar al carrito"}
      </button>
      {error ? <p>{error}</p> : null}
    </>
  );
}

import { definePage, Link, useCart } from "@ecomiq/storefront";

export default definePage({
  meta: () => ({ title: "Carrito", noIndex: true }),
  component: CartPage,
});

function CartPage() {
  const { cart, itemCount, loadStatus, removeItem } = useCart();

  if (loadStatus === "loading") return <p>Cargando…</p>;
  if (!cart?.items.length) return <p>Tu carrito está vacío.</p>;

  return (
    <main>
      <h1>{itemCount} productos</h1>
      {cart.items.map((item) => (
        <div key={item.id}>
          <span>
            {item.title} × {item.quantity}
          </span>
          <button onClick={() => void removeItem(item.id)}>Quitar</button>
        </div>
      ))}
      <Link to="/checkout/$checkoutId" params={{ checkoutId: cart.id }}>
        Ir al checkout
      </Link>
    </main>
  );
}