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

Community resources Webflow Tips
1

**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! :slightly_smiling:

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…

1138Ă—929 54.6 KB

1069Ă—829 37.2 KB

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

23 Likes
2

@sabanna You are AWESOME! Thanks for this :+1:

2 Likes
3

You are welcome :smiley: Make your site awesome :wink:

4

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

2 Likes
5

:slight_smile: Glad to be useful, guys.

6

Love it!

Thank you so much.

2 Likes
9

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

10

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?

11

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.

12

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?

13

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.

14

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 :confused: maybe you can try to use it.

Cheers,
Anna

15

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.

16

OK, I keep trying but nothing is happening.

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

  1. 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.

  2. 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)

  3. 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.

17

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

18

Good morning Daniel,

Hope you had a nice breakfast :wink:

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

19

@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

20

That’s fantastic Daniel :smiley: 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!

21

@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

22

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