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_name>"> </div>
Replace <category_name> with the full name of the category (including breadcrumb).
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_category_filter"> </div>
<div data-pureclarity="navigation_category_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'.