Streaming live at 10am (PST)

Filter by tag dropdown


#1

Hey guys & girls,

I have made a decent amount of headway on my website, but am at a point now where if I can’t get the following to work, then the entire design is out of the window so I’d really appreciate some help.

Before I go any further here’s a link to my site: Click here

So on my projects page I wish to include a button that when clicked drops down a menu that will allow the user to sort projects by sector AND/OR with tags. In the CMS I have a Tags section, Sectors section, and a Projects section (within which tags and sectors are set for each project).

Here’s an example of what I pretty much would like to do; use the filter projects dropdown

I’d appreciate any help.


#2

Here’s a screenshot of how I’ve got the “projects” CMS set up, hopefully it helps.


#3

There is a great tutorial here with regards to filtering using Isotope by @SidneyOttelohe


How to link a dropdown to the CMS
#4

That looks exactly like the functionality I’m after, though unless I am being particularly dense there doesn’t appear to be any write-up on how to implement it? Forgive me, I am a novice. I assume this functionality is built in to webflow, no?


#5

You’d have to try and reverse engineer it off the cloneable website, or reach out to Sidney as I think he does freelance work if it’s in your budget?

The function isn’t built into web flow no. The way I’ve used it on a current build is just using categories…
www.thehouseofmagic.co.uk/old-home (you’ll see the category button)


#6

I’m afraid there’s zero budget at the moment.

How did you get the function into webflow? (Assume that site you created was made in webflow?)


#7

That site is made in Webflow entirely. It’s an interaction, so when the Category button is clicked the modal pops up. You add a collection list of category names and style it how you want. In this case, the category names act like buttons.

https://preview.webflow.com/preview/houseofmagic2?preview=bb798b7d519acfe0345386ffef8b7908

Feel free to have a look at the read link above. The category modal is set to hidden.

Hope that helps?


#8

The downside of the way I’ve done it is that you can’t add multiple filters. So you can’t see Coin Magic & Card Magic at the same same. I will eventually implement Isotope, but for now it’s getting a site up and running that can sell products. :grimacing::grin:


#9

I’ll tell you what… I am exceptionally confused, though extremely appreciative of you taking the time to help.

So;

  1. Do I need to import some custom code/.js (have never done this before) to enable this kind of functionality within webflow? If so how/where??

  2. On your site I can’t find the dropdown/filters within webflow (have clicked open menu, but to no avail). Am I missing something?

Again, I know I am likely getting in far beyond my knowledge but this is how I’ve always learned; throwing myself in at the deep end and trying not to sink!

Many thanks,

Chris


#10

I “solved” a similar filtering problem with some creative use of tabs on this page. Really hope for an out-of-the-box filtering tool in Webflow in the future, as I try to avoid using third party tools as much as possible.


#11

@Macker If you share your read only link I will record a demo using your site and post back here.

@Christoffer has a good solution, however it wouldn’t be useable where there are more than 20 collections per page so it can limit you somewhat, so if you have 20 tags, you can’t use it.

Yes, native webflow filtering would be nice someday.


#12

Thanks for the help guys.

Here’s the read only link


#13

Hi Chris,

Hope this helps, please let me know how you get on! :slight_smile: :crossed_fingers:

Mark
(It’s unlisted too so no-one else will see it)


#14

Thanks Mark, that’s absolutely fantastic. Will I be able to add “Sectors” tags along with that (in a separate collection list)?

Also, I don’t think it matters that you can’t filter by multiple tags really so this is perfect.

Very impressive!

Chris


#15

Yes you could put two collections lists “Tags & Sectors” side by side under two headers perhaps, so the user can choose how they want to filter… by sector or by tag. :relaxed:

You’re very welcome, glad it was useful! :grin: :webflow_heart:


#16

Wonderful! Thank you so much for the help.


#17

Hi Mark,
thanks for the video. I’m looking to do something like this. I’m new to CMS :slight_smile:

in your video you have a CMS Collection named Tags (35s)… what is that exactly. ‘Plain Text’ … ‘Reference’?

Thank you.

Cheers


#18

Hi @brianfb

That’s not actually my site, I was using the read-only link to help solve an issue for the original poster.

You would usually use tags as a multi-reference field, so you can add multiple tags/categories to one post. On a CMS “Tags” template page (or whatever you called it) you can then show all those posts that have that tag attributed to them.

Hope that helps? Have a play around and if you get stuck feel free to reach out anytime. :webflow_heart:


#19

Thanks Mark I will give a try! Cheers


#20

Ok so my main CMS collection ‘objects’ has a dropdown field on each item called ‘tag’

Then I created another CMS collection called ‘tags’ … added a ‘multi-reference’ field and selected the main CMS collection.

then on an item gave the name the name of the ‘tag’ and selected the ‘items’ that are part of that ‘tag’ in the multi-ref field.

this seems very manual though… feel I’m missing the boat here?

thanks in adv