How to display data from external API in Webflow - Part 3 - Filter content with faceted search

In this guide, we'll walk through the process of creating a faceted search feature that allows users to filter data from an external API based on selected categories. We'll be using Xano, a no-code platform for building backend services, and Webflow, a visual development tool for creating websites.

Prerequisites

Before we begin, make sure you have the following:

1. A Xano account (you can sign up for free at https://xano.io)
2. A Webflow account (you can sign up for free at https://webflow.com)
3. Basic understanding of HTML, CSS, and JavaScript

Step 1: Set up Webflow

1. Create a new project in Webflow or open an existing one.
2. Add a new page called "Filters" (or any name you prefer).
3. On the "Filters" page, create the following elements:

• A list item with an ID of `category-container`. This will hold the list of categories.
• A list item inside `category-container` with an ID of `category-all`. This will be the "All" button to show all categories.
• A sample card with an ID of `sample-style`. This will define the style for displaying each result item.
• A div with an ID of `cards-container`. This is where the filtered results will be displayed.

Step 2: Set up Xano

1. Log in to your Xano account and create a new project (or use an existing one).
2. Create two database tables: "Restaurants" and "Categories".
3. Add some sample data to the "Restaurants" table, including fields like "name", "description", and "banner_url" (for the restaurant image). Assign categories to each restaurant from the "Categories" table.
4. Create two API endpoints: "getRestaurants" and "getCategories".

• The "getRestaurants" endpoint should return a list of restaurants, with an optional input parameter to filter by category IDs.
• The "getCategories" endpoint should return a list of available categories.

Step 3: Write the JavaScript code

1. In Webflow, go to the "Filters" page settings and locate the `