You will need a page with a <div> where PureClarity will render the facets, search results and paging. By default this page will be at the url, "/search-results", as the auto-complete searchbox will direct to here. If you want to direct to a different results page then this will need to be requested from your Success Manager early on in the onboarding process.
The standard query parameter on the search results page is “keywords=”. If you need a different query parameter please inform your Success Manager as soon as possible.
On the results page you need to add the data-pureclarity class to a div as follows:
<div data-pureclarity="navigation_search"> </div>
Alternatively you can split the facets out from the search results and paging into 2 divs.
Mark them up as follows:
<div data-pureclarity="navigation_search_filter"> </div>
<div data-pureclarity="navigation_search_products"> </div>
Customizing the Search Results
See the PCJS Master Function for details on how the search results are rendered and the events that are raised during this process. These events allow sophisticated behaviour such as:
- Updating products with real-time "low stock" alerts. Once the products are returned, your site could make AJAX calls to your site to gather real-time information about the products and update the HTML.
Rendered HTML & CSS Templates
The HTML that is rendered by PureClarity can be edited in the Admin Console along with the CSS. You can find this under 'Configurations'.