Webflow Joe

F'in Sweet Webflow Hacks

Filter items with CMS switches and Metafizzy Isotope

What can this be used for?

  • Creating a custom filter/sort instances
  • Sort/filter collection items by category, feature, date, or any variable imaginable!

Overview

This is one of many Part 2 articles on cookie functionality. Our article about setting of cookies will show you how to give your website visit cookies. This article shows you how to submit a cookie you've set via form submissions.

Step 1

Set up your Collection with switches of your filter/sort parameters

In our example below, we sort by project type - Branding, Web Design, Web Development, and Custom Functionality. We set up 4 different switches in the CMS to represent each of the sorting parameters. The switch is going to act as an ON/OFF switch the CMS item showing in that filter tab.

If the Branding switch is "ON" for a CMS item, that item will show up in the Branding filter. If the switch is "OFF" it will not show up in the Branding filter.

[ pics of CMS Setup ]

Step 2

Create a page layout that will accept Isotope and the CMS collection.

For ultimate flexibility, we're going to work outside of the Webflow tab component. We're going to set up

Here is what everything looks like

[ screenshot of entire div structure ]

Let's break it down step by step

Create your filter buttons

Set up a <div>  that holds the the buttons that will be used to sort the items. It will look like this</div>

[ screenshot of div structure ]

[ show actual sorting buttons in live form ]

Naming your filter buttons

Apply a base class and an add-on class to each button that can be used to identify the to the filter buttons. For example '.filter-button .web-design'

[ screenshot of class structure ]

We're going to be using the classes in the javascript below to associate each specific button to the filter/sorting functionality.

Create your grid and dynamic items

Add a Collection List to the page and apply a class of '.grid. to the 'Collection List' element.

[ screenshot of class structure ]

Naming your filter result item

We're going to name the outer <div> block in our filter item '.grid-item'. This item will hold each of our filter results.</div>

[ screenshot of class structure ]

This is going to identify it as an item that will be filtered via Isotope.

Step 3

Add this script to the <body> of the page.</body>

<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>

Please note that Metafizzy Isotope is not open source and does require a license. Check out the licensing page for more - https://isotope.metafizzy.co/license

Step 4

Add this code to the body

What the heck does that mean?

Let's learn by going step by step through the code

Nice! You're done. See it working.

Direct Shifts

LED Ecommerce Store

DiBonis

Kids Love

Gamer Box

Zwack

Qwikvid Raw UX

Jet Raw UX

Powerslide

Qwikvid

Deep Ink

Smart LED

Jet Delivery

Hothouse Flower

Majomkenyer

Game On

Offer-X Banner Advertisements

Fruit Wisdom

Mobster

Mercedes Benz

Windows Box

Spokes

Interested in more f'in sweet Webflow hacks?

Get an alert when we post a new one.
We have 20 posts scheduled to send throughout the next 3 months.

Nice! We'll let you know when a new hack is available.
Something went wrong while submitting the form. Please email us directly at projects@finsweet.com

Want Finsweet to build your Webflow site?

We're Webflow Experts!