Search Component
Purple Experience
This documentation provides a guide to the structure, functionality and configuration of a search page in the Purple Experience for your Purple app and/or website. It also provides some details on how to configure the display of search results, navigation or access fallback.
- search-field component
- publication-type toggle
- list (search-results)
The 'search-field' component is the actual text box where the user enters the text. When he confirms the search, a query parameter (default is 'phrase') is added to the URL containing the searched text.
The search phrase is accessible via: $context.phrase
The query parameter from the URL is available in the context, so $context.phrase gets replaced with the searched phrase after the user has entered something into the search bar and pressed 'search'.
The 'Publication-Type Toggle' component is where you can filter by which publication type you want to search. This can later be used to filter the results or display the correct views based on the type.
The selection is accessible via: $context.publication-type
The 'List' component is where the search results will be displayed. For that you are required to set the content to SearchResult and the dataSource to SearchResultDataSource. You can additionally show an individual styled search result for issues, posts and bundles by adding multiple views and use conditions.
Bundles and Dossiers are currently not fully supported and we are still in the process of migrating the 'SearchResult' component to fully support those.
The 'SearchResult' component has a lot of customization options which are documented here: issue-search-results.config.ts
Here is an example setup:
You can use conditions to conditionally show components like 'No search results' or 'Please enter a search phrase' or to display search results differently based on publication type.
Here you can see an example. Some more examples are listed after the screenshot.
Search Header Conditional Examples
Search Results Conditional Examples
For navigation configuration see the Static Routing documentation.
This configuration defines what to do if the user is not allowed to access/view the content (i.e. not purchased).
The most common actions here are NavigateAction or PopupAction.
The following example opens the content if the user has access otherwise shows the view "paywall" in a popup.
