> ## Documentation Index
> Fetch the complete documentation index at: https://docs.webstorio.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Store SDK

> window.webstorio online store methods — products, cart, orders, and customer order history.

E-commerce methods for published sites. Requires the **Online Store** feature (`online_store`).

## Catalog

### getStore()

Store metadata (name, currency, settings).

```javascript theme={"dark"}
const store = await window.webstorio.getStore();
```

### getProducts(options?)

```javascript theme={"dark"}
const { products, total } = await window.webstorio.getProducts({
  limit: 24,
  offset: 0,
  categoryId: "...", // optional
});
```

### getProductById(id) / getProductBySlug(slug)

```javascript theme={"dark"}
const product = await window.webstorio.getProductBySlug("artisan-mug");
```

### getProductCategories()

```javascript theme={"dark"}
const categories = await window.webstorio.getProductCategories();
```

## Cart

Cart state lives in the visitor's **browser session** (`sessionStorage`). It is shared across store pages in the same tab until checkout. Nothing is sent to the server until `createOrder`.

Each cart method returns a Promise resolving to:

```javascript theme={"dark"}
{ items: [{ productId: "uuid", quantity: 2 }, ...] }
```

| Rule                | Detail                                                          |
| ------------------- | --------------------------------------------------------------- |
| **Max quantity**    | 99 per product line                                             |
| **Duplicate lines** | Same `productId` is merged into one row                         |
| **Persistence**     | Survives navigation within the tab; cleared when the tab closes |

### getCart()

Read the current cart. Use on checkout pages or for a cart badge count.

```javascript theme={"dark"}
const { items } = await window.webstorio.getCart();
const itemCount = items.reduce((sum, row) => sum + row.quantity, 0);
```

### addToCart(productId, quantity?)

Add a product or increase its quantity. Default quantity is **1**. Merges with an existing line for the same product.

```javascript theme={"dark"}
const { items } = await window.webstorio.addToCart(product.id, 2);
```

### setCartItems(items)

Replace the entire cart. Duplicate `productId` values are merged; quantities are capped at 99 per line.

```javascript theme={"dark"}
await window.webstorio.setCartItems([
  { productId: "abc-123", quantity: 1 },
  { productId: "def-456", quantity: 3 },
]);
```

Use on checkout when the visitor edits quantities in a cart table.

### setCartItemQuantity(productId, quantity)

Set quantity for one product. Pass **0** to remove that line.

```javascript theme={"dark"}
await window.webstorio.setCartItemQuantity(productId, 3);
await window.webstorio.setCartItemQuantity(productId, 0); // removes line
```

### removeFromCart(productId)

Remove one product from the cart.

```javascript theme={"dark"}
await window.webstorio.removeFromCart(productId);
```

### clearCart()

Empty the cart. Call after a successful `createOrder` on checkout.

```javascript theme={"dark"}
await window.webstorio.clearCart();
```

### Typical flow

```javascript theme={"dark"}
// Product page — add and go to checkout
await window.webstorio.addToCart(product.id, 1);

// Checkout — load, edit, submit
const { items } = await window.webstorio.getCart();
await window.webstorio.setCartItemQuantity(items[0].productId, 2);

const { order } = await window.webstorio.createOrder({
  customer: { name: "Jane", email: "jane@example.com" },
  items,
});
await window.webstorio.clearCart();
```

## Orders

### createOrder(payload)

```javascript theme={"dark"}
const { order } = await window.webstorio.createOrder({
  customer: {
    name: "Jane Doe",
    email: "jane@example.com",
    phone: "+62...",
  },
  shippingAddress: { /* ... */ },
  notes: "Leave at door",
});
```

Payment capture via payment gateway is on the roadmap; orders are recorded in the dashboard today.

## Signed-in customer orders

Requires **User Authentication** (`user_authentication`) and an active site session.

```javascript theme={"dark"}
const session = await window.webstorio.getSession();
if (session?.user) {
  const { orders } = await window.webstorio.getMyOrders({ limit: 20 });
  const detail = await window.webstorio.getMyOrderById(orderId);
}
```

## User guide

Non-technical setup: [Online store](/guides/online-store)