Frontend Developer Manual / Version 2201
Table Of ContentsThe search brick provides templates, SCSS and translations to render a search input field, a search results page with a configurable amount of results and a filter panel. To get additional entries there is a "Load More" button beneath the list and a spinner is shown while loading. The search results can be listed sorted by date or by relevance.
The brick contains templates to render a search field into a page
While showing search results, the brick displays the found number of entriess
Example of a search result: with date (first position / different typo), title, text and picture
On mobile: images are not shown by default
Collapsable category list (n) = number of search results in category
Collapsable type list (n) = number of search results of the same type
Load more search results (button)
Filter dropdown (Relevance and Date)
On mobile the filter dropdown is a button that leads to the filter menu
Technical description
The search brick works out of the box in any theme by adding the dependency.
Add a search configuration to your site as described in the next section. The search works as a Single Page
Application. All filters and links reload the results via AJAX.
Templates
SearchActionState.asSearchResultPage.ftlrenders a Search Result Page including a title, number of results.SearchActionState.asSearchField.ftlrenders a search field with label, input field and submit button.SearchActionState.asResultList.ftlrenders the results as list.CMTeasable.asSearchResult.ftlrenders single search result including title, picture and text to the list.
Note
Please note that this brick contains JavaScript and SASS files that are automatically installed if you add
the brick to your theme package.json. See Section 5.3, “Using Bricks” to learn how to install a brick in your theme.
Configuration
In order to use the search brick, there must be a Setting called searchAction linking to an
existing CMAction document. For the search result page add a Setting called searchChannel
linking to an existing Page document. This should also include the searchAction in the PageGrid to
render search results.
For a description of the search functions visit Section 5.4.21, “Website Search” in
Blueprint Developer Manual
or
go to ???? for the detailed API guide of the Search Configuration settings.
Including in templates
<#assign searchAction=bp.setting(self,"searchAction", {})/>
<@cm.include self=searchAction view="asSearchField" />Example 6.7. Example template to render the search form
Using a placeholder in content
Add a CMPlaceholderwith a layout variant search into the site for rendering a simple search field
where it is required.
