Copy page

SDK Reference

Events

Event Summary

The <gett-marketfront> element dispatches CustomEvents 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.

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

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

error

Fired when an error occurs within the Marketfront iframe.

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

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

store-selected

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

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

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

item-added

Fired when the user adds an item to their cart.

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

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

checkout-started

Fired when the user begins the checkout flow.

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

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

order-complete

Fired when an order is successfully placed.

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

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