Streaming live at 10am (PST)

[TUTORIAL] MixItUp filtering plugin with Dynamic content

Hi @sabanna!

Your tutorials here are AMAZING! Thank you for all the time you put into them :raised_hands::smile:

I’m in the final stages of setting up multi-dimensional filtering of CMS items using checkboxes, and have followed your steps obsessively closely to recreate it.

However, I’m not sure why it’s not currently working. I’ve triple-checked everything and have re-read each tutorial twice :sweat_smile:

If you get a chance, would you (or anyone else who knows what’s going on) mind having a look for me?

Read only link: https://preview.webflow.com/preview/houseofmovement?utm_source=houseofmovement&preview=d9a2be916c234a62333f418336135548

The page in question is “Directory”.

Thanks so much in advance :blush:

1 Like

Hi @JamesDaly! Thank you for the feedback!

Could you try to remove this line and republish site?
CloudApp

1 Like

Wow, such an incredibly fast response, thank you @sabanna :smile:

I’ve removed and re-published, unfortunately no change

1 Like

You might also want to adjust the value for the data-value attribute
CloudApp
CloudApp

1 Like

Ah I see, that pesky slash making things difficult.

Cool, I’ve updated that in the checkbox attribute:

16%20pm

1 Like

1 Like

You’ve done it! Thank you SO much! I literally jumped up and down with happiness when I saw it working haha thank you for all of your help, and for making these tutorials in the first place :smile:

4 Likes

Dear @sabanna, may I kindly ask you extend your super awesome tutorial with masonry like this?: https://codepen.io/creotip/pen/QyeNYM

Thanks your very much! :pray:

1 Like

Hi, @berot3!

Just use this tutorial for create layout :slight_smile:

2 Likes

Hi @sabanna - thank you for a great tutorial! Have you considered also doing a pagination tutorial? And do you know if it’s possible to use the pagination plugin (https://www.kunkalabs.com/mixitup-pagination/docs/get-started/) together with the MixItUp MultiFilter plugin?

1 Like

Hi, @CasperKp!

Yes, their pagination is pretty easy can be implemented along with any type of filtering. It only requires buying separate license and adding few additional lines of code. I will consider creating a separate page explaining how to do that on the tutorial site.

1 Like

Hi @sabanna.

Thank you and sounds good :blush:

1 Like

Hey @sabanna

Would love if you could answer some questions based on your knowledge for a project I have with 100s and 1000s of CMS items inside of collections.

  1. Is the Mixitup plugin limited to filtering the 100 items displayed within a collection list?
  2. If not, can Mixitup controls filter multiple collection lists on the same page?
  3. Simalar question to above, is the Mixitup pagination also limited to display a paginated # of items within the 100 displayed items collection list limit?

Appreciate any answers. Thanks.

1 Like

It will filter as many items as you have in the “mix container”. Limitation about amount of published items inside one Collection List is a general limitation from Webflow, based on the performance concerns.


Technically yes, MixitUp has an ability to have one set of controls for several containers. Although, I am not sure how it will look like when, for example, filter will select/show only few items inside each container.


MixitUp pagination, same as filtering works with that amount of items, that has been published inside the container

2 Likes

Hi Sabanna,
I implemented a Mixitup dynamic list following your tutorial which works well - brilliant, thanks for that.

However, I only realised too late that there is a limit of 100 items that can be displayed within a collection list. I have over 100 items in my list that need to be displayed in order for the filters to work properly.
I was wondering if you know of a workaround for this that would allow all the items to be included when using the Mixitup filters.

I suppose that matthewpmunger’s solution of using separate collection lists could work but as you say, it may look a little strange.

1 Like

Hi @sabanna,

it’s a great workaround that you figured out. Do you know if Webflow will something like this natively implement, so that you don’t have the hassle with custom code and licensing each time?

Also, it would be great when Webflow implementing this, also add a dynamic load more and lazy load to collection lists. This would allow loading more than 100 items per list and won’t affect the page speed negative.

2 Likes

Hi @sabanna

First of all, thanks for all the effort :slight_smile:

I followed your tutorials in order to get a mulitdimensional filter working (bought the $25 extension).

I got CMS filtering working, so at least part of my structure is OK as far as I can tell. However, I just can’t get the checkboxes and eventually the multi dimensional working. I’m not a pro coder at all, but I read your tutorial over and over again and now I’m simply out of guesses of what I’ve been doing wrong.

If you would be able to take a look at my website, it would be highly appreciated :slight_smile:

https://preview.webflow.com/preview/outsidein?utm_source=outsidein&preview=f41451da797007e5c513aa0f2b0da870

http://outsidein.webflow.io/

1 Like

Hi, @Daan_van_Hal!

From what I can see in your checkboxes settings, there are few things that prevent filters from showing desirable results.

  1. If you’re creating your own custom attribute (which is totally fine) you have to use the same attribute name in the custom code
    54%20AM

  2. MixitUp filtering logic based on classnames, this is why we are adding classes as values in the filtering controls. Make sure to follow CSS syntax for that (no capital letters in the classnames)

  3. As a result of #1 problem, part of the code that supposes to read the value of the custom attribute and apply it to the standard value property doesn’t work. Value is equal “null” which is not corresponding to any of categories. As a result, filter gives you 0 results (which is logically correct).

Hope it helps.

1 Like

Hi! Thanks for your quick reply! You helped me a lot, not sure where the “get-data” came from… Anyway, the checkboxes are working perfectly now :slight_smile:

The multi filter is still giving me a bit of a headache though. It likes to disapear after I click a checkbox for example.

Any thoughts on that? Another thanks in advance :slight_smile:

1 Like

Hello @sabanna

Thank you for your tutorials, I discovered them yesterday and I started to play with them. Today I bought and successfully implemented the multi-dimensional filtering.

The work is here: http://duftify-oslo.webflow.io/store

One thing I don’t understand is why the animations and alignment are not looking ok. They seem bugged to me.

I tried to flex the container, in order to make all products to appear in the top left corner but it seems does not work.

A little help from more experienced people would be highly appreciated. :grinning:

Preview: https://preview.webflow.com/preview/duftify-oslo?utm_source=duftify-oslo&preview=43957a981c7996854ac62e0ec0ca854b

1 Like