How to Add Dynamic Search & Filtering to Webflow CMS with Jetboost

so in today's video i am going to be

showing you how you can add dynamic

filtering and

search functionality to your no code

directory let's

dive into it

what's going on friends welcome back to

the channel if you're new here my name

is connor i'm the founder of the unicorn

factory a freelancer marketplace in new

zealand

and canada and on this channel i teach

you how you can build

similar platforms with the noco tools

that i use

now in today's video i am going to be

diving into a tutorial that

has been requested quite a bit and that

is to show you how you can add dynamic

search and dynamic filtering

to your listing pages now i already have

the search and filtering functionality

on the unicorn factory new zealand

but i am on the verge of launching the

unicorn factory in canada and one thing

that i wanted to add before it goes live

is that search and filtering

functionality so i thought

what a fantastic opportunity to just

show you the process that i go through

when i think about building these

features now before i get into it there

are a few little things that i'd like to

ask of you

number one please subscribe to the

channel if you haven't already second

thing is

please like this video all the support

is much appreciated

and then thirdly i also wanted to just

let you know about my no code coaching

program that i'm running right now so if

you want to build a platform like the

unicorn factory or something in a

different niche or different service

industry

then jump on over to my website i'm

currently running coaching programs

where i basically show you how you can

get

everything set up a lot faster than it

would usually take if you went around

and researched the internet yourself

it took me about a year i can get you up

and running with about eight sessions so

if that is something that you're

interested in jump on over to the

website screen to a call with me and

i will give you the rundown of how it

will all work

but without further ado let's just dive

into the tutorial

all right so let's just start off with

an overview of what it is that we're

going to do

so i'm on the unicorn factory museum

right now and as you can see

we've got a listing page with all the

different freelancers on there

and what i'm going to be building today

is the search functionality here

and the filtering mechanism so at the

moment what you can do is you can filter

people

by keywords or terms that are in their

profile

so if i type in something like webflow

what will happen

is the tool that i'll be using searches

for the text on the cards but also

inside of your profile so if this person

has webflow inside of their profile in

one way or the other

then it will filter out those

freelancers another thing that you can

do

is you can also filter by certain levels

of experience so in this case

we have senior and what it does is it

just filters out those freelancers

and then if you wanted you can also

filter by availability so let's have a

first look at the unicorn factory

candidate you might be seeing this

before

this is even live how special but as you

can see here at the moment i don't have

that many freelancers so

having this listing tool is not super

necessary however

i feel like eventually i'm going to need

to add it anyway so i may as well do it

now and film the process so that you can

see how it all works

now the filtering is going to be

slightly different to the unicorn

factory new zealand because i don't have

the

junior intermediate senior and elite

anymore so instead i'm going to be

filtering it by the type of freelancer

so we have five different

types that i'll be talking about soon

and then i'll also be talking about

the typical pricing model so that way

clients can find out if someone usually

charges hourly fixed rates or if they're

flexible

so the tool we're going to be using to

build the search and filtering

functionality is a tool called a jet

boost

so jet boost was made by this developer

called chris

bax who is fantastic he's so good i even

left him a testimonial

and basically what he does is he builds

a whole bunch of add-ons that are

specifically for the webflow cms

so besides the search and the filtering

functionality you can also use tools

like member stack to allow your users to

favorite certain items

and you can also auto archive things so

i haven't actually used these two

filters before but i have used the other

two and they're fantastic and it's real

straightforward to set up so to get

started with it all you need to do

is give jetboost access to your webflow

account and what it will do is it will

automatically pull in all the

information about your cms so at the

moment i've got the unicorn factory

canada and then i also have unicorn

factory new zealand so here you can see

all the different

filtering and search functionality that

i've set up for the unicorn factory in

new zealand and the unicorn factory

canada is

empty now once you're at the point where

you have imported the project that you

want to work on then all you need to do

is you need to just add

your booster and you can then pick from

there what it is that you want to do

so i'm going to start off with the

search functionality so what's really

cool about jetboost is it actually

imports all of your information from

webflow automatically so that all you

need to do is just select

the items that you want to filter and

what you want to filter it by

so i want to start off by filtering

information that is in the freelancer's

profile

so what you can do then is you can then

specify what exactly you

want jetboost to filter the freelancers

by and what it will do is it will come

up with all of the different labels that

are

available inside of your cms so if we

have a look in here you can see all the

different fields that

i add to the webflow cms and basically

what jet boost is doing is it's finding

out

what ones to filter it by so i want to

filter it by

the job title the primary service

the sub services and potentially by

their name as well now you can then

configure

what kind of search you want to have so

i'm not going to go into too much detail

about that just now because it will take

a bit of

extra time and then you can also say if

you want the url to display

the search term but i'm going to turn

that on

nice animations and then all you need to

do is you need to embed

all of your scripts into your project

so you just paste the code into the head

section

under the custom code part in the

project settings

and then all you need to do is just

click on the test and continue button

what jet boost will do is

tell you if you set it up correctly so

next what we need to do is we actually

need to embed

some code that allows jetboost to filter

the different collection items that are

set up inside of your directory so we'll

take

this code here and then what we'll do is

we'll select our collection list

and then just in the navigator panel go

all the way to the point where you open

the freelancer card block

and then inside of that what you want to

do is you want to drop in

a custom embed and then just paste in

the code that you get from jetboost

click the save button and then make sure

that that embed

is moved above the card so that is step

number two done

now the other thing that we're going to

have to do is we're actually going to

have to give

the collection list wrapper a class name

so that jetpost knows what collection

list to filter

so just go ahead and copy this and then

just add it around your wrapper

so then you select your collection list

wrapper and then you just

add that subclass name to the end

and you're good to go so you have to

publish it again just to test

it inside of jetboost and then you can

test it by just typing in the

url of the page that you installed the

script on test and continue

and it's all good all right so next up

what we're going to have to do is we're

going to actually have to design

and build the search box now i'm not

going to make this pretty i'm just going

to

do it full time so just add a div block

in there and then i go and grab

a form element and i just drop it in

here

now all you need to do is just remove

all of the fields that you don't

need so that should leave you with

something like this and then you want to

give your text field a class name so i'm

going to call this

search box then what i do is i jump

in here and i grab this subclass

and add it to the end of

my search input now the other thing that

you need to do is

hide the submit button so you give it a

class name

then you just hide it publish it test

and continue

and then when you type in webflow

nothing happens

and the reason why nothing happens is

because you still have to

publish that filter so at the moment it

would only work on the dog webflow.io

domain

so if i test it out here it works happy

days

easy peasy to set up cool and so that is

how you set up the search functionality

with jetboost now one thing i recommend

doing when you're done

is checking out the power ups that they

have on jetboost and those are basically

things that you can add to your site

that make it look a bit better when for

example people

type in for search term that yield no

results i won't go into detail about it

because we still need to cover the

tags and filtering cool so we're back

inside of jet boost and now you can see

that my new booster has been added and

what i want to do now

is add a new one for dynamic list

filtering now again here similar concept

what we want to do is we want to select

the collection list that we want to

filter and again here we want to filter

the freelancer collection list so we're

going to select that so you can filter

by three different things

first of all by a reference field by a

multi-reference field for example in our

case the skills

or an option field now the one field

that i want to filter this particular

example by

is the freelancer type field now you can

specify if you want to allow your users

to select

multiple categories at once so i'm going

to allow them to do that

and then again i get asked if i want to

add the url to the end

of the search url now because we've

already installed our jetboot script on

webflow we can skip

step number two and jump straight into

adding a class name to our collection

list

wrapper so again here it's a very

similar concept to with the search

functionality so we just go to the list

wrapper it's important you go to the

actual wrapper and then behind the class

name that we applied for the search

functionality you just

paste it in there and hit the enter

button

and you're good to go now again it says

add the jet boost collection item embed

but we've already done that in the

search functionality so we don't need to

do it again

then again remember to publish before

you

actually um test it inside of jet boost

that's what i just didn't do and a whole

bunch of error messages came up

but then once it's done it all works and

we are ready to move on to the next step

which is

setting up the filters so first of all

we can select

what type of element we want to use to

do the filtering and you've got a button

link block select or check boxes for

this particular one i'm just going to go

with the select

option and depending on what you choose

you'll get pretty detailed instructions

on

how to set it up inside of webflow so

the first thing i'm going to have to do

is to add a select element

to a form block on my page so i'm just

going to add

this select field to my already existing

form

for the search functionality now i don't

know if this is going to work but if it

doesn't i can always cut it out and redo

it again

now i have added a few of my

options the key thing is here is that

the

text matches exactly what you put into

the text and value field

inside of your select element and then i

also want to click on allow multiple

i'm not sure what happened there but i

will probably style it differently later

but this is just for the sake of the

example

then i'll hit the publish button of

course i forgot to add

my class name so what i'm going to do

here is add select

field search so i recommend always

adding a

class before you add any of the jit

boost filter sub

classes because then you can still

filter it in different elements without

having to remove

all of those jet boost tags republish it

testing continue and it appears to work

so next what i want to do is i actually

want to see if it actually works so

again just keep in mind that you

actually have to be

on the webflow.io domain until you

publish

that filter so it is there it doesn't

look very good but i will make some

visual changes to it in the future

but let's just pick the side hustlers

and look at that

it works amazing so if you click command

you can actually select both so

this is quite good so that is pretty

much how you can set

up the filtering you can use drop downs

check boxes

links buttons there's a whole bunch of

options um

that you can apply here so you can

really do it in a way

that looks good on your site and that's

it friends that is how jetboost works

it's an incredibly powerful tool

it's definitely in line with platforms

like member stack that we've built

specifically around

webflow and so my recommendation is if

you have a

blog or a listing site or a whole bunch

of collection items just implement it

it's pretty straightforward to do

it's reasonably cheap and also it just

makes the entire user experience of your

site a lot better so with

filming and editing this it took me

about an hour

maybe a bit less to set this up so as

soon as you get familiar with how all

the tags work it's really easy for you

to add a whole bunch more

you know then it's just a matter of

making it look good and then you should

be good to go but i want to thank you

for sticking around for the entire video

please be sure to like the video

leave a comment you know i hear that

works wonders for the algorithm

and i'll see you back here for the next

one bye