How To Build Advanced Search and Filtering For Your Webflow Site

In this blog post, we'll be exploring the tools and steps involved in creating a search and filtering page for Booknotes.ai . We'll be using the following tools:

• Relume for the Filter component
• Finsweet Filter to create the search functionality
• Finsweet Sort to create the sorting functionality
• Google Analytics to capture page views on individual book pages
• Data Fetcher to import views on each book page
• Whalesync to send pageviews to Webflow for filtering

Adding the Relume Category Filters Component

Relume has a great ecommerce collection that is useful for creating powerful category filter pages. Because Relume works with Client First, you can add Finsweet attributes to the filters, so all you need to do is replace the values you want to filter by. To ensure your styles stay as they are when importing the component, be sure to enable class sync. You can also remove any parts of the component that you don't need and replace the content div with the books collection.

Using Finsweet Filter to Create the Search Functionality

To create the search functionality, we'll be using Finsweet Filter . Here are the steps to get it set up:

1. Install the Finsweet Filter script
2. Replace the values on the search attribute
3. Add attributes to the book card values that you want to search by

Bonus tip: If you want to use attributes to search for something but don't want it displayed in your item card, you can add a hidden div block and add the attributes to values hidden in that div block.

Using Finsweet Sort to Sort Collection Items

To sort the collection items alphabetically, by the number of pages, and by when they were added, we'll be using Finsweet Sort. The process is similar to Finsweet Filter:

1. Add the script to the head code of your site (or just on the page if that's the only place you'll be sorting and filtering)
2. Apply attributes to the buttons that trigger the sort
3. Add attributes to any values in the collection item that might not have them applied

Setting Up Google Analytics on Your Site

Google analytics is a simple script you can install on your site that allows you track how website visitors are using your site. I use it to see what books are most popular, based on the amount of views the book has had. The plan is to store that value in Webflow so I can then sort it by that value using Finsweet Sort.

Using Data Fetcher to Import Google Analytics Page Views

Data Fetcher is an Airtable extension that allows you to pull data from third-party APIs into your Airtable base. To use it to import Google Analytics page views:

1. Create a Data Fetcher account and connect your Google Analytics account
2. Configure your Data Fetcher settings to import views and split all views by individual pages
3. Apply a filter for retrieving only pages that contain the page path of your cms item pages (e.g., /book/)
4. Set Data Fetcher to update records by URL. You must make sure that the URLs in Airtable and Google Analytics match up.
5. Start importing data

Using Whalesync to Sync Data into Webflow

Once the data is in Airtable, you can use Whalesync to sync that data into Webflow .

Using Finsweet Sort to Create the Functionality to Sort by Page Views

With the page views data imported into Webflow, you can use Finsweet Sort to create the functionality that allows people to sort the book collection by page views. Simply apply the appropriate attributes to the buttons that trigger the sort and to any values in the collection item that might not have them applied.

And that's it! With these tools and steps, you'll be able to create a fully functional search and filtering page for your own website, complete with the ability to sort by page views using data imported from Google Analytics.