Custom Dynamic Filter in Webflow

This is so hard to fallow. Is anyone willing to make a video on this? are there any out there ? im relay in a bind. Thank you anyone in advance!

Hello everyone,

Thanks so much for this great process! I was able to follow along and recreate the example.

Now I am trying to apply it to my client. They will display products from about 8-12 manufacturers. We only need to see one manufacturer at a time.

When I click ā€œALLā€ they all appear. But none of the other links bring up any results.

Any help to fix this would be appreciated.

Here is my read only:
https://preview.webflow.com/preview/pvp-parts?utm_medium=preview_link&utm_source=designer&utm_content=pvp-parts&preview=fdb2739617263770a1994c40b2b96e57&pageId=5d00f8f7a38ae0fd6c437afc&mode=preview

Here is what is happening on the web side when published.
https://www.pvpparts.com/testing-environment

Thanks so much in advance for any help to fix it. Im betting its something simple but I canā€™t wrap my head around it.

-Jose

Ok so I got it to work.

However when I use pagination it does not work. :frowning:
Any ideas how to correct that? Each manufacturer will end up have a couple hundred items each, so pagination will be crucial.

Here is read only:
https://preview.webflow.com/preview/pvp-parts?utm_medium=preview_link&utm_source=designer&utm_content=pvp-parts&preview=fdb2739617263770a1994c40b2b96e57&pageId=5cfef5477ed3a912ecd2ee70&mode=preview

The functioning list is on the products page you can see it live here:
https://www.pvpparts.com/products

The test/pagination is called ā€œtesting environmentā€ and can be seen here live:
https://www.pvpparts.com/testing-environment

I just have those two separate so that I can see if I can work out the bugs for the pagination so I can make the change on the actual product page.

Thanks so much for your thoughts!

Jose

Did anyone ever get this working with pagination for large ecommerce stores? I feel like thatā€™s a pretty major factor for the real world applicability of this.

I think your best bet currently is to use a lazy load feature. :slight_smile: that way everything will be on the same page but it wonā€™t load all at once.

Yup, follow this guide here:

Actually, tried that, and what I get is that it doesnā€™t work well when you use pagination (itā€™s as if it counts towards a total page count when you move through the filtersā€¦)

Any ideas as to why? @krubens

Hey @DomenVi my thoughts are that the pagination is keeping it from loading the main data of all items at once (which the filter needs), there should be a script that will just delay the content from showing on the screen but load the item, if that makes senseā€”so the filter can still index it (Iā€™m probably using horrible verbiage here lol, someone feel free to correct me :sweat_smile:)

@krubens Firstly thanks for all you work on this Custom Dynamic Filter! Really appreciate it :smiley: I set it up on my 1st draft for my project and it worked perfectly and I needed to simplify the filter options and now that I only have 3 filter categories/ References, I have run in to an issue - The ā€œAllā€ filter displays and the other not. If you have some resources available, can you please have a look at it, will be much appreciated!

Here is the project link
The page name - work

Thanking you in advance!

Hi. Iā€™m not sure whats wrong :confused: Not any good at this code stuff :stuck_out_tongue:

Hi @krubens, thanks for your time. Will try and figure it out! :wink:

@buntestrahlen Can you please help me with my ā€œissueā€? I have tried and failed to correct the bug I am experiencing :frowning: Based on your awesome filter and modifications and tutorial from @krubens I set it up on my 1st draft for my project and it worked perfectly and I needed to simplify the filter options and now that I only have 3 filter categories/ References, I have run in to an issue - The ā€œAllā€ filter displays and the other not. If you have some resources available, can you please have a look at it, will be much appreciated!

Here is the project link
The page name - work

Thanking you in advance! :smiley:

@matthewpmunger Do you know if itā€™s possible to use MixItUp to make a collection items multifilter quiz like this one from Warby Parker?

(I also just posted a much more comprehensive question in the CMS forum too)

Hi @krubens this is great work thank you! The video was very helpful also.
Is there any way of doing this but without having an ā€œAllā€ category? I just want the first category to display its relevant content and not all. Cheers

@Rheed_MacPherson

I do have this Notion Page with a code to not show ALL and only show FIRST. But I donā€™t remember what you have to do, I would start with just switching the code. :slight_smile:

Hope this helps

Best step-by-step explanation, thank you!!

1 Like

Tusen takk Johanna :slight_smile:

Any thoughts on how one could have more than one text block in the filter list?

Donā€™t know code myself and when I add one it doesnā€™t work (with only one it works very well). I am looking to have sub categories in my filter list and want to differentiate them with different styling. Canā€™t think of another way than adding more than one text block to accomplish this.

Check out these: https://www.jetboost.io/
They have more advanced features :slight_smile: