# WF-Algolia

> Webflow + Algolia attribute-driven search. Add `wf-algolia-*` HTML attributes in the Webflow Designer to build Algolia-powered search, browse, filter, detail, and recommendation UIs — no custom JavaScript required.

## Overview

- [Welcome](https://wf-algolia-docs.candidleap.com/): Algolia-powered search, filtering and browse pages for any Webflow site, using HTML attributes only.

## Get started

- [Install the script](https://wf-algolia-docs.candidleap.com/get-started/install): Load the WF-Algolia script in your Webflow site and point it at your Algolia index.
- [Set up your Algolia index](https://wf-algolia-docs.candidleap.com/get-started/algolia-setup): Create and configure an Algolia index so WF-Algolia has something to search.
- [Algolia Crawler](https://wf-algolia-docs.candidleap.com/get-started/algolia-crawler): Index pages that do not live in the Webflow CMS, alongside the WF-Algolia sync.

## Solutions

- [Search](https://wf-algolia-docs.candidleap.com/solutions/search): A search box that queries your index as the user types, rendering into your own result template.
- [Browse](https://wf-algolia-docs.candidleap.com/solutions/browse): A catalogue or directory page that loads with results already showing, with filters, pagination and shareable URLs.
- [Filters](https://wf-algolia-docs.candidleap.com/solutions/filters): Checkboxes, radios, ranges and dropdowns that narrow a browse listing.
- [Sorting](https://wf-algolia-docs.candidleap.com/solutions/sorting): Let visitors reorder a listing by switching between Algolia replica indices.
- [Pagination](https://wf-algolia-docs.candidleap.com/solutions/pagination): Load more, numbered pages, or infinite scroll on a browse listing.
- [Detail & recommendations](https://wf-algolia-docs.candidleap.com/solutions/detail-recommendations): Render a single record on a detail page, and show related items beneath it.
- [Range slider](https://wf-algolia-docs.candidleap.com/solutions/range-slider): A draggable price or numeric range, using Finsweet's slider with a WF-Algolia range filter.
- [Filter search](https://wf-algolia-docs.candidleap.com/solutions/filter-search): A typeahead over one facet's values, for lists too long to scroll.
- [Deferred apply](https://wf-algolia-docs.candidleap.com/solutions/deferred-apply): Let people stage several filter changes and apply them in one go.
- [Cascading filters](https://wf-algolia-docs.candidleap.com/solutions/cascade-location): Filter groups where one narrows the options of the next — country, then region, then city.
- [Standalone filter groups](https://wf-algolia-docs.candidleap.com/solutions/standalone-filter-groups): Filter controls that live outside a browse wrapper — in a nav, a mega-menu, or on a landing page.
- [Hit preview](https://wf-algolia-docs.candidleap.com/solutions/hit-preview): Show a few example results beside a filter value, before anyone clicks it.
- [Explore mega-menu](https://wf-algolia-docs.candidleap.com/solutions/explore-megamenu): A navigation panel built from live facet values, with example results inside it.
- [Checkbox filters](https://wf-algolia-docs.candidleap.com/solutions/filters/checkbox): Let visitors select several values from one facet at once.
- [Radio filters](https://wf-algolia-docs.candidleap.com/solutions/filters/radio): Exactly one value from a facet, with an "All" option to clear it.
- [Range filters](https://wf-algolia-docs.candidleap.com/solutions/filters/range): Filter a numeric field between a minimum and a maximum.
- [Hierarchical filters](https://wf-algolia-docs.candidleap.com/solutions/filters/hierarchical): Nested categories in one facet — Clothing, then Shoes, then Trainers.
- [Select filters](https://wf-algolia-docs.candidleap.com/solutions/filters/select): One value from a facet, in a dropdown rather than a visible list.
- [Comparison filters](https://wf-algolia-docs.candidleap.com/solutions/filters/comparison): One-sided numeric filters — under £50, rated 4 and above.
- [Dynamic filters](https://wf-algolia-docs.candidleap.com/solutions/filters/dynamic): Filter groups whose facet is decided at runtime rather than authored in the Designer.

## Components

- [Search Input](https://wf-algolia-docs.candidleap.com/components/search-input): Search Input — 2 attributes.
- [Browse Search](https://wf-algolia-docs.candidleap.com/components/browse-search): Browse Search — 1 attribute.
- [Results Container](https://wf-algolia-docs.candidleap.com/components/results-container): Results Container — 3 attributes.
- [Autocomplete](https://wf-algolia-docs.candidleap.com/components/autocomplete): Autocomplete — 5 attributes.
- [Filter group](https://wf-algolia-docs.candidleap.com/components/filter-group): Filter group — 24 attributes.
- [Filter Tags](https://wf-algolia-docs.candidleap.com/components/filter-tags): Filter Tags — 3 attributes.
- [Pagination](https://wf-algolia-docs.candidleap.com/components/pagination): Pagination — 5 attributes.
- [Pagination - Previous](https://wf-algolia-docs.candidleap.com/components/page-prev): Pagination - Previous — 1 attribute.
- [Pagination - Next](https://wf-algolia-docs.candidleap.com/components/page-next): Pagination - Next — 1 attribute.
- [Pagination - Page Number](https://wf-algolia-docs.candidleap.com/components/page-number): Pagination - Page Number — 1 attribute.
- [Pagination - Page Info](https://wf-algolia-docs.candidleap.com/components/page-info): Pagination - Page Info — 2 attributes.
- [Results Count](https://wf-algolia-docs.candidleap.com/components/results-count): Results Count — 2 attributes.
- [No Results State](https://wf-algolia-docs.candidleap.com/components/no-results-state): No Results State — 2 attributes.
- [Detail Section](https://wf-algolia-docs.candidleap.com/components/detail-section): Detail Section — 6 attributes.
- [Recommendation Section](https://wf-algolia-docs.candidleap.com/components/recommendation-section): Recommendation Section — 14 attributes.
- [Browse Page](https://wf-algolia-docs.candidleap.com/components/browse-page): Browse Page — 17 attributes.
- [Mode Toggle](https://wf-algolia-docs.candidleap.com/components/mode-toggle): Mode Toggle — 3 attributes.
- [Sort Dropdown](https://wf-algolia-docs.candidleap.com/components/sort-dropdown): Sort Dropdown — 2 attributes.
- [Hit Preview](https://wf-algolia-docs.candidleap.com/components/hit-preview): Hit Preview — 6 attributes.
- [Sort Buttons](https://wf-algolia-docs.candidleap.com/components/sort-buttons): Sort Buttons — 2 attributes.
- [Facet Stat](https://wf-algolia-docs.candidleap.com/components/facet-stat): Facet Stat — 13 attributes.
- [Search Wrapper](https://wf-algolia-docs.candidleap.com/components/search-wrapper): Search Wrapper — 2 attributes.
- [Autocomplete Section](https://wf-algolia-docs.candidleap.com/components/autocomplete-section): Autocomplete Section — 4 attributes.
- [Autocomplete Template](https://wf-algolia-docs.candidleap.com/components/autocomplete-template): Autocomplete Template — 1 attribute.
- [Autocomplete Section Label](https://wf-algolia-docs.candidleap.com/components/autocomplete-section-label): Autocomplete Section Label — 1 attribute.

## Concepts

- [The attribute system](https://wf-algolia-docs.candidleap.com/concepts/attribute-system): Why there are two attribute prefixes, how values are inherited, and what happens when one is wrong.
- [How it works](https://wf-algolia-docs.candidleap.com/concepts/architecture): What runs where — the script in the browser, your index in Algolia, and the sync between them.
- [Search or browse](https://wf-algolia-docs.candidleap.com/concepts/search-vs-browse): Two different jobs with two different root elements — and how to tell which one you are building.
- [Build Mode](https://wf-algolia-docs.candidleap.com/concepts/build-modes): The Designer extension that places elements and sets their attributes for you.

## References

- [Attribute reference](https://wf-algolia-docs.candidleap.com/reference/attribute-reference): Every wf-algolia attribute the script understands — 85 in total.
- [Script tag reference](https://wf-algolia-docs.candidleap.com/reference/script-tag): Every data-* attribute the loader script reads, and what it defaults to.
- [CSS hooks](https://wf-algolia-docs.candidleap.com/reference/css-hooks): The classes and data attributes the script writes onto your elements, and how to style them.
- [Public API](https://wf-algolia-docs.candidleap.com/reference/public-api): The window.WfAlgolia object — methods, events and middleware for when attributes are not enough.
- [Security](https://wf-algolia-docs.candidleap.com/reference/security): What is safe to put in a script tag, and how the script sanitizes content before rendering it.

## Resources

- [Examples](https://wf-algolia-docs.candidleap.com/resources/examples): Worked patterns assembled from the solution pages.
- [Cloneables](https://wf-algolia-docs.candidleap.com/resources/cloneables): Webflow clonables to start from instead of building from scratch.
- [Videos](https://wf-algolia-docs.candidleap.com/resources/videos): Recorded walkthroughs of installation and the main features.
- [Finsweet range slider](https://wf-algolia-docs.candidleap.com/integrations/finsweet-rangeslider): Driving a WF-Algolia range filter with Finsweet's slider component.

## Troubleshooting

- [Verify your setup](https://wf-algolia-docs.candidleap.com/troubleshooting/verify-your-setup): A five-minute checklist that catches most problems before they become support tickets.
- [Common issues](https://wf-algolia-docs.candidleap.com/troubleshooting/common-issues): Cross-cutting symptoms, and the complete catalog of console messages the script emits.

## Contributing

- [Development](https://wf-algolia-docs.candidleap.com/contributing/development): Running the monorepo locally, and how the docs stay in step with the code.
- [Source map](https://wf-algolia-docs.candidleap.com/contributing/source-code): How the client script is organised, and where to look for a given behaviour.

## Optional

- [Full documentation as a single file](https://wf-algolia-docs.candidleap.com/llms-full.txt)