# Events

{/* GENERATED FILE - DO NOT EDIT DIRECTLY. Source: TS/packages/marketfront/src/ */}

## Event Summary

The `<gett-marketfront>` element dispatches [CustomEvents](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent) with payloads in `event.detail`. Subscribe with `addEventListener` or — in React 19 — with the matching JSX `on*` prop.

| DOM Event | JSX Prop | Payload Type | Description |
|-----------|----------|--------------|-------------|
| `ready` | `onready` | None | Fired when the Marketfront iframe has loaded and is ready to display content. |
| `error` | `onerror` | `MarketfrontError` | Fired when an error occurs within the Marketfront iframe. |
| `store-selected` | `onstore-selected` | `StoreSelectedEvent` | Fired when the user selects a store from the store list. |
| `item-added` | `onitem-added` | `ItemAddedEvent` | Fired when the user adds an item to their cart. |
| `checkout-started` | `oncheckout-started` | `CheckoutStartedEvent` | Fired when the user begins the checkout flow. |
| `order-complete` | `onorder-complete` | `Order` | Fired when an order is successfully placed. |

## Event Details

### ready

Fired when the Marketfront iframe has loaded and is ready to display content.

```typescript
// Vanilla / addEventListener
element.addEventListener('ready', (e: CustomEvent) => {
  // no payload
});
```

```tsx
// React 19 JSX
<gett-marketfront onready={(e) => {
  // no payload
}} />
```

### error

Fired when an error occurs within the Marketfront iframe.

```typescript
// Vanilla / addEventListener
element.addEventListener('error', (e: CustomEvent<MarketfrontError>) => {
  console.log(e.detail);
});
```

```tsx
// React 19 JSX
<gett-marketfront onerror={(e) => {
  console.log(e.detail);
}} />
```

### store-selected

Fired when the user selects a store from the store list.

```typescript
// Vanilla / addEventListener
element.addEventListener('store-selected', (e: CustomEvent<StoreSelectedEvent>) => {
  console.log(e.detail);
});
```

```tsx
// React 19 JSX
<gett-marketfront onstore-selected={(e) => {
  console.log(e.detail);
}} />
```

### item-added

Fired when the user adds an item to their cart.

```typescript
// Vanilla / addEventListener
element.addEventListener('item-added', (e: CustomEvent<ItemAddedEvent>) => {
  console.log(e.detail);
});
```

```tsx
// React 19 JSX
<gett-marketfront onitem-added={(e) => {
  console.log(e.detail);
}} />
```

### checkout-started

Fired when the user begins the checkout flow.

```typescript
// Vanilla / addEventListener
element.addEventListener('checkout-started', (e: CustomEvent<CheckoutStartedEvent>) => {
  console.log(e.detail);
});
```

```tsx
// React 19 JSX
<gett-marketfront oncheckout-started={(e) => {
  console.log(e.detail);
}} />
```

### order-complete

Fired when an order is successfully placed.

```typescript
// Vanilla / addEventListener
element.addEventListener('order-complete', (e: CustomEvent<Order>) => {
  console.log(e.detail);
});
```

```tsx
// React 19 JSX
<gett-marketfront onorder-complete={(e) => {
  console.log(e.detail);
}} />
```