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'
}