Web Components

Both components below are always mounted inside the target element. The page component is visible by default; the detail component is mounted but hidden.

Bootstrapped DOM Structure

After calling initializeSpaazaElements(), the controller mounts the following inside your target element:

<div id="spaaza-elements">
  <spaaza-environment>
    <spaaza-content-page id="spaazaContentPage">
    </spaaza-content-page>
    <spaaza-content-page-detail id="spaazaContentPageDetail" style="display: none">
    </spaaza-content-page-detail>
  </spaaza-environment>
</div>

Component IDs

initializeSpaazaElements() sets the initial display styles: the active view gets display: block, the other gets display: none. When you pass campaignId or voucherId, the detail component is visible and the page component is hidden. Since both components are in the DOM, you can control their visibility yourself for SPA-like navigation. See Navigation Handling Examples for patterns.

Which view is initially displayed depends on what you pass to initializeSpaazaElements():

Web component properties are lowercase (pagename, campaignid) because HTML custom elements do not support camelCase attributes.

spaaza-content-page

Renders a content page with zones and items.

Input properties (set by client to trigger data loading):

Data object (set by Spaaza’s controller after fetching — full Spaaza API objects):

pageEl.data = { page, vouchers, user };

spaaza-content-page-detail

Renders a single campaign or voucher detail.

Input properties (set by client to trigger data loading):

Data object (set by Spaaza’s controller after fetching — full Spaaza API objects):

The detail component accepts one of two data shapes, depending on the view:

Campaign detail:

detailEl.data = { campaign, vouchers, walletLedger };

Voucher detail:

detailEl.data = { voucher };