You will need a page with a <div> where PureClarity will render the facets, products and paging for product listings/category page.
<div data-pureclarity="navigation_category:<category_id>"> </div>
Replace <category_id> with the id of the category as it appears in the feeds sent to PureClarity.
If you wish to split the facets out from the search results into separate elements you would instead use the following HTML:
<div data-pureclarity="navigation_category_filter:<category_id>"> </div>
<div data-pureclarity="navigation_category_products:<category_id>"> </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'.