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

sabanna · May 11, 2016, 5:52pm

UPDATE:

Since the MixitUp released a new version of their plugin MixitUp3 I started a new series of the tutorials. Please, check up a new tutorial on https://mixitup-webflow-tutorial.webflow.io

________________________________________________________________

Hello, everyone!

Lately many users were asking about more advanced filtering function. I was able to create an example and tutorial which let you filtering your content by several options: type, size, color, etc, etc…

All information, code snippets and examples you will find here:
https://webflow.com/website/mixitup-filtering

You are welcome to clone this tutorial and use it for your projects. But DON’T FORGET that using MixitUp for non-personal projects required PAID LICENSE.

Best regards,
Anna

SidneyOttelohe · May 11, 2016, 6:41pm

@sabanna You are AWESOME! Thanks for this

sabanna · May 11, 2016, 6:43pm

You are welcome Make your site awesome

Blaise_Posmyouck · May 11, 2016, 6:52pm

You are just amazing @sabanna, thank you so much for this tutorial.

sabanna · May 11, 2016, 7:03pm

Glad to be useful, guys.

Omar_Melizza · May 11, 2016, 7:50pm

Love it!

Thank you so much.

Omar_Melizza · May 17, 2016, 4:58pm

Hi @sabanna, I’ve been trying to get this to work with tabs but I wasn’t capable of doing it.

FYI, I need this to show the very same content but with two different views, one per each tab, that is:

TAB A: Grid View
TAB B: List View

Did some research and found this, which is the answer to my problems: http://codepen.io/anon/pen/aNWwZL
and this (from the same author)
javascript - MixItUp issue with Bootstrap Tabs - Stack Overflow

Any suggestions as to how we could implement this into your existing framework?

Cheers,
Omar

sabanna · May 17, 2016, 7:09pm

Hi, @Omar_Melizza.

Tell me if I got you correct. You want to filter results and then you want ot have a possibility to show this results as a “gallery” view OR “list” view.
Right?

Omar_Melizza · May 18, 2016, 6:31am

Hi Anna,
Yes, that is correct, and to show either view, I’d like to use tabs.

e.g.
TAB 1: Grid View
TAB 2: List View

In other words, both tabs will feature the very same content - even before any filtering is applied - one in grid view and the other in list view.

However, as you’ll notice yourself if you try to use the tabs widget with mixItUp plugin, you’ll only get it to work on one tab, while the other one(s) will look empty. I tried to implement the system suggested by this guy http://codepen.io/anon/pen/aNWwZL but I just could not get it to work.

Daniel_Schultheiss · May 18, 2016, 12:40pm

why use tabs, when you can use buttons and switch between the views instead?
because tabs use two different content elements, the use of mixitup is a bit misleading, isnt it?

maybe i m wrong :D. but imho buttons would do the trick for view switching…

do you have a clonable site or your work?

Omar_Melizza · May 18, 2016, 4:37pm

Hi @Daniel_Schultheiss,

Thanks for joining the conversation.

Here’s my preview link: https://preview.webflow.com/preview/store-cms-f71688734da1cebc7d9ca3184aa40?preview=7f1026391d37365f4a9e5ad055450d60

And here is the live website which you’ll need to check out to see the mixItUp plugin in action: http://store-cms-f71688734da1cebc7d9ca3184aa40.webflow.io

I’d like to use tabs as I found a piece of code which I’d like to implement and that will allow me to keep the previously selected filtering options when switching between views. This is the piece of code I’m referring to: javascript - MixItUp issue with Bootstrap Tabs - Stack Overflow (you’ll need scroll a little down the page to view it).

But maybe this can be done with buttons too, as you suggested…

Thoughts?

PS: Not sure if you know this already but when checking out the structure in web flow designer, please note you’ll have to switch display mode for .mix from hidden to block. This is because in order to function, the mixItUp plugin requires the .mix item to be hidden.

sabanna · May 18, 2016, 4:41pm

Hey, guys.

I found out that mixitup has functionality for switch layout type https://mixitup.kunkalabs.com/support/topic/changing-layout-next-to-grid-and-list-view-add-an-extra-option/

But right now I have no time to dig there maybe you can try to use it.

Cheers,
Anna

Omar_Melizza · May 18, 2016, 5:01pm

This is brilliant @sabanna!

I quickly tried to implement it but had no luck so far. Will keep trying and let you know if I can get it to work.

Thanks for now.

Omar_Melizza · May 18, 2016, 5:18pm

OK, I keep trying but nothing is happening.

If I understand this correctly, these are the steps to implement this:

add a class named “table” to the existing “.mix” item. This way you’ll end up with a combo-class “.mix .table” and ID: container.
style the above as you wish (e.g. I changed item’s VW from 20vw (grid view) to 40w (list view - well, two items per row actually)
Add a button with ID: TableButton

Add the following at the bottom of the existing script (this was copied from savanna’s tutorial):

<script>
$('#Container').mixItUp('changeLayout', {
	containerClass:'table';
});
</script>

<script>
$('#Container').mixItUp({
	animation: {
		animateChangeLayout: true
		animateResizeTargets: true
	}
});
</script>

<script>
$('#TableButton').on('click', function() {
	$('#Container').mixItUp('changeLayout', {
		containerClass: 'table'
	});
});
</script>

Correct?

Nothing is happening here: http://store-cms-f71688734da1cebc7d9ca3184aa40.webflow.io
Preview link of the updated site: https://preview.webflow.com/preview/store-cms-f71688734da1cebc7d9ca3184aa40?preview=7f1026391d37365f4a9e5ad055450d60

Maybe one of you can spot what I’m doing wrong there…

Cheers.

Daniel_Schultheiss · May 19, 2016, 4:42am

Hey Omar,

These .mix classes dont own a .table class?

Next, within the script beware of using Upper OR Lowercase. Your #id is named “container” but you use the script with the syntax “Container”. This doesnt work because its case-sensitive.

I m at work in 2 hours so there I can investigate a bit more. Going to have breakfast right now ;P.
Regards

Daniel

Omar_Melizza · May 19, 2016, 6:35am

Good morning Daniel,

Hope you had a nice breakfast

Thanks for your suggestions. I added back the .table class to the mix container and also used lower case for #container. Still nothing though.

Daniel_Schultheiss · May 19, 2016, 7:46am

@Omar_Melizza

Hey Omar,

is THIS what you want to achieve?
http://daniels-exceptional-site-02486a.webflow.io/
(updated) - just click the buttons

And could you make a “cloneable” version of your site?
I cant make changes to the java/jquery and publish it, so thats hard to make some changes in order to get your problem fixed.

Next thing:
If you press “TableButton”, the Layout will change - but it wont change back unless you have another button, that will fix that.

And:
You have flex-box options activated but I cant make changes to the width of the .mix.table class, cause its a flex-child. Maybe thats another problem.

I also think that there is some jquery script within your site that does not belong there, cause its from the advanced select field elements example from sabanna. But thats just some minor fact.

Regards,
Daniel

Omar_Melizza · May 19, 2016, 8:14am

That’s fantastic Daniel How did you do that?!

Anyway, here is the clonal version of my website: https://webflow.com/website/store-cms-clone?s=store-cms-f71688734da1cebc7d9ca3184aa40

Not sure what I’m doing wrong there…

Thank you so much for taking the time to look into this!

Daniel_Schultheiss · May 19, 2016, 8:56am

@Omar_Melizza

Well this is what i got so far.
http://daniels-superb-site-fca3ba.webflow.io/

There are some major issues:

First you ll need to restyle every single class in order to get a nice view ;P.

Changes:

.product-thumbnail: width: 100%, height: 100%, max-height: 200px
.mix width: 200px, height: 200px, position relative
(dunno if i changed more ;P)

Second, I changed the code to this:

Inside tag:

<style>
.list {
	width: 100%;
}

#container.table .mix {
	width: 30%;
}
</style>

Inside tag:

<script src="http://cdn.jsdelivr.net/jquery.mixitup/latest/jquery.mixitup.min.js"></script>
<script>
 
	$( document ).ready(function() {
	// On document ready:

		$(function(){

		// Instantiate MixItUp:

		$('#container').mixItUp({
			animation: {
				animateChangeLayout: true,
        animateResizeTargets: true
			}
		});
	  
		$('#TableButton').on('click', function() {
			$('#container').mixItUp('changeLayout', {
				containerClass: 'list'
			});
		});
	  
		$('#FullButton').on('click', function() {
			$('#container').mixItUp('changeLayout', {
				containerClass: 'table'
			});
		});

	});
 });
</script>

AND you ll have to add .classes to your .mix element (table & list).
And you ll have to create a second button with an id of #full or whatever to switch between styles.
There is a jquery solution, so that you can switch with only one button but hey, first things first :).

Regards,
Daniel

Koen · May 19, 2016, 9:45am

Sabanna, you are fabulous! i gonna try this as soon i have time left!

Topic		Replies	Views
[TUTORIAL] MixItUp filtering plugin with Dynamic content Webflow Tips	187	33163	November 1, 2021
[TUTORIAL] MixItUp3 - Filtering, Sorting and PAGINATION Webflow Tips	44	12263	July 9, 2022
[TUTORIAL] Using Isotope and MixItUp plugins with Webflow Webflow Tips	37	16198	February 14, 2017
[TUTORIAL] MixItUp3 - Filter and paginate Collections with more than 100 items Webflow Tips	31	10373	October 27, 2021
MixItUp checkbox filter from another page Webflow Tips	11	3301	July 7, 2021

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

**UPDATE:**

Since the MixitUp released a new version of their plugin MixitUp3 I started a new series of the tutorials. Please, check up a new tutorial on https://mixitup-webflow-tutorial.webflow.io

Related topics

UPDATE: