Streaming live at 10am (PST)

[TUTORIAL] MixItUp filtering plugin with Dynamic content

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

Hi, @Alexander_von_Stauff!

I saw similar problem few times already and the main reason is the layout :slight_smile:

The Collection list Wrapper has no width, then the Collection list set to width: 100% and display: flex.
When filtering happens and items getting “removed” from the container (Collection list) it shrinks automatically because 100% of nothing (remember, no width set on its parent :point_up:) is … nothing :woman_shrugging:t3:.

So if you will make Collection List wrapper to width: 100% it will keep all containers in place and animations will not look so weird:

CloudApp

Hope it clears your doubts :slight_smile:

Cheers,
Anna

1 Like

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

@Daan_van_Hal, you added all possible filtering methods to one page, there might be some conflicts between them, I am afraid.
Would you consider experimenting with them on separate pages and see if you will get a better results?

1 Like

Thank you, Anna, it worked, I simply didn’t notice my Collection List wrapper. #shame :blush:

2 Likes

Thank you @sabanna for your amazing tutorial.
I too am working on a project where I need to filter more than 100 items (which is the collection list limit). I tried putting 3 lists on the same page and with the same structure but mixitup only puts an ID on the first collection list it sees and therefore only filters the first…
How would you recommend doing this ? Have you tried the pagination from mixitup in combination with multidimensional filters?

Thanks a million :slight_smile:

1 Like

Ok so the .container doesn’t need to be the collection list. You can make it a div and add several collection lists inside where the items are the .mix elements. Seems to work !

2 Likes

Thank you so much for putting this together. I was able to get this working at the basic level, but am having some visual errors when elements resize after filtering, with a “snapping” to size when resizing to fit the container.

https://dtmcreative.webflow.io/projects

1 Like

It happens because of the flex settings that you have on those elements. After Plugin re-arranges them, flex-grow CSS property make elements take all available space.

Unfortunately, it looks like there is no way to animate the size change with the plugin.

1 Like

Thought that was the cause. Thats to bad :frowning: Thank you for the response, @sabanna!

1 Like

Hey, @Dekthro!

I found in the MixitUp documentation how you can control transition the height and width of target elements as they change throughout the course of an animation.

You will have to add a special “operator” in the plugin call:

mixitup(containerEl, {
    animation: {
        animateResizeTargets: true
    }
});

Note: This feature requires additional calculations and manipulation to non-hardware-accelerated properties which may adversely affect performance on slower devices, and is therefore disabled by default.

1 Like

Heck yeah, awesome! Thanks for finding that out, I’ll give it a shot!

1 Like

Hi All. I have gone through the tutorial a few times now and I can’t seem to get the filter to actually select anything. When I select the categories I am hoping to filter it just animates to an empty collection. I get that for each of my categories. BFDIO . Any help would be greatly appreciated.

1 Like

Hi, @freshlesh3!

Could you please share a read-only link to your project and also a link to a published page with the content that you try to filter?

1 Like

Yes, sorry. here is the read only link:

https://preview.webflow.com/preview/bfdio?utm_source=bfdio&preview=89b93274fd8a9f5d8245739a6e0b7ee2

Here is the published page:

And I am trying to filter the “filter” div block in section 15 of the home page

1 Like
  1. Values of data-filter attributes has to be all lowercased and all spaces should be replaced with dashes (should look like CSS classes)
    46%20PM

  2. Do not apply class .categ to the actual collection items. It should be any typography element INSIDE the collection item.
    56%20PM

Let me know if it helped. Cheers,
Anna

2 Likes

Yes it worked finally. Thank you. I couldn’t figure out what I had done wrong, appreciate the support.

2 Likes