View settings

1 min

Consider views as distinct pages within your app – like the main homepage, a list of articles from a specific category, a detailed article page, or subscription offers.

You can configure a view to display contents based on filters using different components in that view.

In PXP < 4.0, all views are set up and administered in one large views.json file, located in storefront/assets.

From PXP 4.0, views are created inside a folder structure in storefront/assets/views. A pipeline is automatically run to create the large views.json from that.

Views have the following fields:

* = required field

Field	Description
name*	Defines the class name that will be added to the DOM element "storefront-view". Therefore, we recommend using a lowercase name without spaces so it works well as a CSS selector.
path*	Describes under which URL the view will be accessible (exception: Using the URL resolver for dynamic paths). Note: The root view must have the path /, all other paths must not start with a slash. Running the split views approach, the path is taken from the path in the views folder. Refer to View configuration for details.
pullToRefresh	The view will automatically be updated on any changes caused by app resumes or invalidations (e.g. caused by a login or a purchase). If 'pullToRefresh' is activated, manual updates via a pull gesture will also trigger an update.
appBar	If 'appBar' is set, it shows the top app bar with the matching ID from the appBar.json
navigation	If 'navigation' is set, it shows the bottom sticky navigation bar with the matching ID from the navigation.json
content*	'content*' defines the content of the page, composed of different possibly nested Inspecting Components.
data	'data' stands for a list of Data sources that are required throughout the page. You may set up data sources to be loaded per view or from the components defined above.

title	The <title> Tag text is shown in the browser's bar and search engine entries. You can use $context, $functions or $global expressions, but it is not reactive (e.g. only set once). The <title> Tag is relevant to be set for SEO.
postView	'postView ' is set for the simple opening of content based on 'postType'. We recommend using the URL resolver as it gives more flexibility.
cache	Allows configuring the cache-control header by specifying maxAge, staleWhileRevalidate and staleIfError. Values are set in seconds. If none are set, defaults are used, see tooltips for the current defaults. See CloudFront docs for more information on the cache-control header. In general, our defaults are: The page has a max-age of 60 (1 minute), afterwards it is deemed stale. We set stale-while-revalidate headers to 3600 (1 hour), so even if a page is stale, it may be served during this timeframe to the user but also trigger a new render on server-side, so that a following request then serves a new response, which was just rendered in the background. This is mostly there for users to quickly get a working website instead of waiting 3+ seconds for a full render Finally, we also serve stale-if-error with 86400 (1 day). If the server failed to render a page, CloudFront or the browser is allowed to serve a previously cached page even if it is up to 1 day old.
seo	Adds metadata tags to the rendered HTML, e.g. for Open Graph properties. See SEO view configuration for more details.
pageConfigs	Currently used for setting up traffective tracking.
viewTrackingParams	Additional tracking parameters for view tracking events.
jsonLD	A string representing the JsonLD config to pass additional information to Search Engine Crawlers.
errorPage	If true, the page is treated as an Error Page.

View settings

name*

path*

pullToRefresh

appBar

navigation

content*

data

title

postView

cache

seo

pageConfigs

viewTrackingParams

jsonLD

errorPage