[TUTORIAL] Advanced filtering (several dimensions)+ Search with MixitUp plugin

Thank you so much Daniel!!!

Had a go at implementing this and something is definitely happening now, although I’m getting some weird effects… Would you mind making this cloneable? I’m definitely missing something relatively to adding 'list and .table classes to the container.

Need to work on styling now and to also to add .classes to the .mix element via js.

Cheers

@Omar_Melizza
Sure, go ahead:
https://webflow.com/website/Testing-for-Mixitup?s=daniels-superb-site-fca3ba

Daniel

Cheers mate. Will post the end result.

Hi @Daniel_Schultheiss, it’s definitely working now. Thanks a lot.

However, after switching between views over and over again I realised this might not be the best option from a UX point of view. Basically, the transition between the grid view to a list view is not as pleasant as it would be if a slick fadeIn-fadeOut effect with some delay in between was used. Let’s say, it’d be more relaxing for the viewer.

For this reason, I’m still convinced the best option would be using Tabs for switching between views.

One such (fully functioning) solution is out there already - javascript - MixItUp issue with Bootstrap Tabs - Stack Overflow - but I just can’t get it to work.

Perhaps you’d like to have a go with it yourself. You seem to be more knowledgeable and experienced than I am :wink:

You can define whether the LayoutChange should be animated or not.

Option 1)
No animation → elements will show directly:
http://daniels-superb-site-fca3ba.webflow.io/noanimation

$('#container').mixItUp({
         animation: {
         enable: false
	}
});

Option 2)
Easing or smooth transition:
http://daniels-superb-site-fca3ba.webflow.io/

$('#container').mixItUp({
    	animation: {
      	enable: true,
            effects: 'fade translateX(-100)',
            duration: 700,
      	animateChangeLayout: true,
            animateResizeTargets: true
     }
});

Regards
Daniel

1 Like

Wow guys! You did awesome work while I was away :smiley: ! It is what I call great team work! Thanks @Daniel_Schultheiss and @Omar_Melizza

Before i start, does this also work with a dynamic list?

Omar is using a dynamic list, check out his public link (if its still active).

Yes, @Koen. It is possible to use with dynamic content, but it will require one more piece of script, for turn categories names to classes.

Here’s a website where i need it for!

Can anyone do this for me? What are the costs?

regards,
Koen

Hi @sabanna I just found your tutorial, really great to see this possible in webflow, many thanks for posting :smile:

I’d like to use this to filter CMS blog posts (in a dynamic list), and notice you mention more scripting would be needed, do you have any example or more detail of this? No worries if it’s time consuming but any help or pointers you can give would be welcome!

(@Daniel_Schultheiss said @Omar_Melizza’s version uses dynamic lists but the public links no longer work!)

Thanks

Thanks a lot Daniel. Sorry for late reply but I was offline.

This one still works, as long as Omar lets it being public:

https://webflow.com/website/store-cms-clone?s=store-cms-f71688734da1cebc7d9ca3184aa40

Cheers

hi everyone,

here is the preview link: https://preview.webflow.com/preview/store-cms-76d7d6159d8f7efcd06d82d8a1e7b?preview=75a199060f82dbcc32a1f66c8c69e809

and this is the cloneable version: https://webflow.com/website/store-cms-76d7d6159d8f7efcd06d82d8a1e7b?s=store-cms-76d7d6159d8f7efcd06d82d8a1e7b

have fun!

you are right @Daniel_Schultheiss, that should work as well

Thanks guys, I’ll take a look – @Omar_Melizza, what was it you did/added (if anything?) to get @sabanna’s implementation working with dynamic lists?

I haven’t started building yet – I was planning to follow the tutorial and wanted to confirm that it will work with dynamic lists before spending the time and finding out after that it doesn’t! Thanks for any advice…

you are welcome @matt50.

Yes, it will definitely work with dynamic lists.

I’d say the best thing for you is to clone my webpage and have a look around there as well as checking out @sabanna’s fantastic tutorial on the subject.

by all means, if after doing this you still have doubts get in touch with us. I’ll be happy to help.

good luck

Thanks again, I’ll get stuck in :smile:

Hi Matt, did you get to add custom classes to buttons using Dynamic Lists?

Hi @Omar_Melizza, Yes, all working! Thanks for your help :smile:

I used the code below to dynamically get the text from the filter buttons and add it as a data-filter attribute (with a full-stop character as though a class name as per the tutorial from @sabanna). For anybody trying this, note that this doesn’t want applying to an ‘All’ filter button or you end up with data-filter=".all" where mixup requires data-filter="all" – so I just made sure the all filter button was not in the dynamic list.

var anchors = $('.b-category-link-dynamic');
anchors.each( function() {
	var a = $(this); 
	var txt = a.text().toLowerCase();
	a.attr('data-filter','.' + txt);
});