Skip to main content

Examples

Each solution page builds one feature. These are the combinations that come up most often, with the pages to follow in order.

A header search box and a listing page.

  1. Install the script
  2. Search for the header box
  3. Browse for the archive page
  4. Pagination — load-more suits long-form content

Bind wf-algolia-snippet rather than wf-algolia-text for the excerpt, so the matched phrase is what people see.

A product catalogue​

The fullest combination, and the usual starting point for a shop.

  1. Browse with wf-algolia-url-sync="true", so filtered views are shareable
  2. Filters — checkbox for category and brand, range for price
  3. Sorting with replicas for price and newest
  4. Pagination
  5. Deferred apply if the filter panel is large or mobile-first

Add filter tags once there are more than two filter groups — without them, people lose track of what is active.

A directory​

People, places or companies, filtered by attributes rather than searched.

  1. Browse
  2. Cascading filters for country → region → city
  3. Select filters for long single-choice lists

Cascading is the piece that makes a directory feel considered rather than a wall of dropdowns.

A navigation panel driven by the index​

A mega-menu whose categories come from the data.

  1. Standalone filter groups for the columns
  2. Hit preview for examples inside the panel
  3. Explore mega-menu for how they fit together

Watch the query count — every column and preview is a request.

A detail page with recommendations​

  1. Detail and recommendations
  2. Bind the objectID from a CMS field on the template page
  3. Enable Insights with data-insights="true" — Recommend models need traffic before they return anything