Link Search Menu Expand Document

Navigation

When users click content, content:select fires. The event contains either a campaign or a voucher object.

The event contains campaign and voucher objects that both have an id. For vouchers, this is the only navigation-relevant field. Campaigns also carry an image_link field that can express richer intent.

Campaigns also carry an image_link field that can express richer navigation intent. You can read about configuring this field in the Content Management documentation under Item Actions. The contract that Spaaza’s controller uses for this is the following:

image_link Intent
?campaign_id=123 Campaign detail page
?name=offers Load the “offers” page
?name=offers&campaign_id=123 Campaign detail page (with optional navigation hierarchy)
https://example.com/promo External link
Empty/missing No navigation

Use parseImageLink() to interpret the value according to Spaaza’s schema (see parseImageLink()).

Handling Navigation

The controller does not navigate automatically. Components emit content:select events, and your host environment decides what to do. There are two approaches:

Approach How it works Page reload?
URL-driven Change the URL, page reloads, controller reads params on init Yes
Property-driven (SPA) Set properties on mounted components, controller fetches reactively No

URL-Driven

Change the URL and let the page reload. The controller reads the parameters on initialization and renders the correct view. See Navigation Handling Examples: URL-Driven for the full code example.

Property-Driven (SPA)

Both components are always in the DOM with fixed IDs (spaazaContentPage, spaazaContentPageDetail). Instead of reloading the page, you set a property on the component and toggle visibility. Spaaza’s controller handles step 4:

Example:

  1. Receive campaign.id, campaign.image_link, or voucher.id from the content:select event (see Navigation Contract)
  2. Set pageEl.pageName, detailEl.campaignId, or detailEl.voucherId
  3. Toggle display between the two components
  4. The component dispatches a data:refresh:request event. The controller catches it, fetches the data from the API, and sets it back on the component. The component re-renders.
// your code — example: show campaign detail
detailEl.campaignId = 4911;       // controller reactively fetches campaign data
pageEl.style.display = 'none';
detailEl.style.display = 'block';

This reactive data loop — set property, controller fetches, component re-renders — is the core mechanism for SPA navigation. No page reload needed.

The parameters you pass to initializeSpaazaElements() decide the starting view (see Component IDs for which parameters activate which view). After that, SPA navigation switches by setting properties and toggling visibility. See Navigation Handling Examples for complete examples including React Native WebView integration.