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

‍