close

Filter

loading table of contents...

Frontend Developer Manual / Version 2304

Table Of Contents

6.4.16 Example Search

The 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.

Wireframe of search on desktop

Figure 6.27.  Wireframe of search on desktop


Wireframe of search on mobile

Figure 6.28.  Wireframe of search on mobile


Wireframe of search on mobile with open filter menu

Figure 6.29.  Wireframe of search on mobile with open filter menu


  1. The brick contains templates to render a search field into a page

  2. While showing search results, the brick displays the found number of entriess

  3. Example of a search result: with date (first position / different typo), title, text and picture

  4. On mobile: images are not shown by default

  5. Collapsable category list (n) = number of search results in category

  6. Collapsable type list (n) = number of search results of the same type

  7. Load more search results (button)

  8. Filter dropdown (Relevance and Date)

  9. 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.ftl renders a Search Result Page including a title, number of results.

  • SearchActionState.asSearchField.ftl renders a search field with label, input field and submit button.

  • SearchActionState.asResultList.ftl renders the results as list.

  • CMTeasable.asSearchResult.ftl renders single search result including title, picture and text to the list.

Note

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 content item. For the search result page add a Setting called searchChannel linking to an existing Page content item. 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.

Search Results

Table Of Contents
warning

Your Internet Explorer is no longer supported.

Please use Mozilla Firefox, Google Chrome, or Microsoft Edge.