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 <script> tags at the bottom of the page.
2. Copy and paste the provided JavaScript code between the <script> tags.
3. Update the XanoURL variable with your Xano project's base URL.

This JavaScript code includes the following functions:

• getRestaurants(): Fetches the list of restaurants from the Xano API based on the selected category IDs.
• getCategories(): Fetches the list of categories from the Xano API and creates clickable pills for filtering.
• resetCategoryFilters(): Resets the category filters and displays all restaurants.
• pageLoad(): Executed when the page loads, resetting the filters, fetching categories, and fetching all restaurants.

Step 4: Test and customize

1. Preview your Webflow project to see the faceted search in action.
2. Customize the styling and layout of the category filters and result cards as needed.
3. Optionally, enhance the functionality by adding features like search, sorting, or pagination.

By following this guide, you've successfully implemented a faceted search feature that allows users to filter data from an external API based on selected categories. This integration between Xano and Webflow demonstrates the power of no-code tools in building complex applications quickly and efficiently.