There are features in the eSales Apps that work out of the box when utilising the Web components. If these features are desired to be fully used with the Web API, additional integration actions may be required.
Several features in the Experience app include a preview function. This allows a user to change and test settings, product selections, and more before publishing them to a live site. To preview something from the apps, a preview URL is required. For the apps, base URLs can be set in the Admin app, or a URL can be entered in the interface for each preview.
Preview mode can be directly accessed with the Web API and page queries by the aid of a
viewId parameter. All page queries accept a
viewId parameter, which can take two different values:
viewId defaults to
production if it is omitted in a page query, so in practice the parameter should only be used for previewing purposes, i.e. when in preview mode.
When clicking a Preview-link in the Apps, a new browser tab is opened with the URL that is to be previewed. The URL is appended with
?PREVIEW=true, triggering the preview mode for the components.
Preview mode with the Web API should be implemented so that it is compatible with the app preview actions.
?PREVIEW=trueis encountered in the URL, requests to eSales should be sent with
- Persist the
viewIdparameter with the value
previewwhen in preview mode to enable a user to navigate pages and still see everything with preview content.
- Implement a visual indicator to show the user that preview mode is active, see Component reference.
- Implement a toggle that allows the user to manually exit preview mode, see Component reference.
- Optional Restrict access to preview mode with for example a custom login that only enables functionality for certain levels of user access when logged in.
As a reference when implementing a Web API based preview mode, the preview functionality built into the Web components is described below:
?PREVIEW=trueis encountered in the URL, the preview mode is activated. This is stored in
SessionStorageand will last when a page is reloaded, until the preview mode is manually exited, or until the browser is restarted.
- When the preview mode is active, eSales Lifestyle will automatically append a new
<esales-preview>component to the
document.bodywhen the document has finished parsing.
- When the preview mode is active the
viewIdis automatically set to
Exit Previewwill end the preview mode, remove the
<esales-preview>component and set the