Event System

Components communicate via DOM events that bubble up.

Core Events

Event	When	Your response
`content:select`	User clicks item	Handle navigation
`content:action:start`	Action begins	Optional: show loading
`content:action:success`	Action completed	Optional: analytics
`content:action:error`	Action failed	Show error
`data:refresh:request`	Component requests data	Fetch and respond
`data:refresh:done`	Data loaded successfully	Hide loading
`data:refresh:error`	Data load failed	Show error state

content:* events are user interactions on content items; data:refresh:* events describe data-loading requests and outcomes.

Event Detail Structure

The campaign and voucher objects in event details are full Spaaza API objects. See API Documentation for their complete structure.

// content:select
{
  campaign: { id: 4911, type: 'wallet', title: 'Points Wallet', image_link: '?campaign_id=4911' },
  voucher: { id: 123, title: 'Reward' },  // if voucher clicked
  item: { layoutType: 'card', type: 'campaign' },
  zone: { id: 'rewards', orientation: 'vertical' },
  page: { name: 'home', storeid: 3522 },
  root: 'spaaza-content-item',           // component that emitted the event
  pageContext: 'spaaza-content-page'     // top parent: page or detail
}

// content:action:start
{
  action: 'wallet-value-select',
  campaign_info: { campaignId: 4911, walletBalance: 150, selectedAmount: 50 },
  root: 'spaaza-content-item-campaign-wallet',
  pageContext: 'spaaza-content-page-detail'
}

content:select

All events include root (emitting component) and pageContext (page or detail).

Event detail contains Spaaza’s default objects. See API Documentation for full object structures.

Field	Description
`campaign`	Spaaza’s default campaign object
`voucher`	Spaaza’s default voucher object (if voucher clicked)
`item`	Item metadata: `layoutType`, `type`
`zone`	Zone metadata: `id`, `orientation`
`page`	Page metadata: `name`, `storeid`

Action Events

content:action:start

{
  action: 'wallet-value-select',
  campaign_info: {
    campaignId: 4911,
    campaignType: 'wallet',
    walletId: 4912,
    walletBalance: 150,
    selectedAmount: 50
  },
  root: 'spaaza-content-item-campaign-wallet',
  pageContext: 'spaaza-content-page-detail'
}

content:action:success

{
  action: 'wallet-value-select',
  campaign_info: { campaignId: 4911, walletId: 4912, selectedAmount: 50 },
  root: 'spaaza-content-item-campaign-wallet',
  pageContext: 'spaaza-content-page-detail'
}

content:action:error

{
  action: 'wallet-value-select',
  campaign_info: { campaignId: 4911, walletId: 4912 },
  error: 'Insufficient balance',
  root: 'spaaza-content-item-campaign-wallet',
  pageContext: 'spaaza-content-page-detail'
}

Action Event Types

For the full list of action types, see Operation Handling Matrix.

Data Events

These events handle communication between web components and Spaaza’s controller for data fetching operations.

data:refresh:request (component requests data)

{
  action: 'get-content-page',  // or get-campaign, get-user-vouchers
  page: { name: 'home', storeid: 3522 },
  root: 'spaaza-content-page',
  pageContext: 'spaaza-content-page'
}

data:refresh:done (data loaded successfully)

{
  action: 'get-content-page',
  page: { name: 'home', storeid: 3522 },
  source: 'external',
  root: 'spaaza-controller',
  pageContext: 'spaaza-content-page'
}

data:refresh:error (data load failed)

{
  action: 'get-content-page',
  error: 'Network error',
  root: 'spaaza-controller',
  pageContext: 'spaaza-content-page'
}