This example page displays the two components used to display product search results.

The Searchbar component is a server-side component written in HTL, displaying a search input. After submitting the search term, the component redirects to the search results page defined by the inherited cq:cifSearchResultsPage property (defined at the root of the site) and passes the search term as a query parameter. In this example, the results are displayed on that same page in the Searchresults component shown below. Just enter any text and press enter to display some sample search results.

The Searchresults component is a server-side component written in HTL, displaying product search results in a gallery view. The search query term is read from request parameters of the page and the data is retrieved from Magento via GraphQL. The main usage of this component would be on a search result page.

The component can be configured:

• to show a given number of products per page.
• to dynamically load products prices in an additional client-side (browser) query after page load.

Note that due to the limited amount of sample data, the search term, the filters and the pagination do not have any effect on this example page, but you can see in the URL how these search parameters would be passed as query parameters.

When displaying the sample data, the clientlib part of the component will also issue a client-side GraphQL query to refetch the products prices on page load. This demonstrates how prices can be refreshed upon page load even if the rest of the page data may be cached in the AEM dispatcher.