← All blog posts

Advanced Webflow Search & Filtering w/ Data Fetcher & Finsweet Attributes

In this post, we'll be walking through the process of using Finsweet Sort and Filter to implement search and basic filtering functionality for our book collection. We'll also be using Data Fetcher to import Google Analytics page views and incorporate them into our Webflow site, allowing us to sort our books by popularity.

December 23, 2022

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.

Use the code

Copy

Dive Deeper with the MVMP Marketplace Course

Learn how to build the essential features for your online marketplace. Start creating the most essential features for your no-code marketplace and start scaling your site

Learn more →
Subscribe to the newsletter!

Get notified when I publish my next video or blog

😘 Got it!
Oops! Something went wrong while submitting the form.
Introducing Relume Ipsum: Revolutionize Your Web Design Process with AI-Generated Copy

Introducing Relume Ipsum: Revolutionize Your Web Design Process with AI-Generated Copy

Ready to take your web design game to the next level? Discover how Relume Ipsum's AI-powered plugin can revolutionize your content creation process. Read our blog post now!

Webflow SEO Hack: Convert Your CMS Images to WebP

Webflow SEO Hack: Convert Your CMS Images to WebP

In August, Webflow added an internal compression tool that allows you to convert images to the webP filetype for improved web performance. While this feature is available for static images, it is not yet available for CMS images. Luckily, a solution to this problem is converting your CMS images to WebP.

How to Fix Common Webflow Performance Issues with Lighthouse

How to Fix Common Webflow Performance Issues with Lighthouse

Are you experiencing performance issues on your Webflow site? Lighthouse can help you identify and fix common problems such as slow loading times, poor server response, and lack of caching. Learn how to use Lighthouse to improve your Webflow site's performance and enhance the user experience.

Building a Cover Letter Generation App with Wized, GPT-3, and Webflow

Building a Cover Letter Generation App with Wized, GPT-3, and Webflow

I'll show you how I used the power of GPT-3 by OpenAI, @Wized and Webflow to create an app that generates custom cover letters for job listings. If you are looking for GPT-3 business ideas, feel free to use the same process to set up your own site.

Optimizing Webflow Designs Using Line Clamping

Optimizing Webflow Designs Using Line Clamping

Using line clamps in Webflow allows for the creation of visually appealing layouts by limiting the number of lines of text displayed within an element.

How to build a book recommendation site with AI

How to build a book recommendation site with AI

I will show you how I used ChatGPT by OpenAI to create a book recommendation site in Webflow. I will take you behind the scenes and show you what tools I used, what processes I followed and what my thoughts are on using AI to generate these types of sites.