Streaming live at 10am (PST)

[TUTORIAL] MixItUp3 - Filtering, Sorting and PAGINATION

Hi @sabanna

Thanks for some great tutorials!

Is it possible to use pagination together with Multidimensional filtering? Basically so you add pagination to your “Checkbox Multidimensional filtering” example? In your current pagination example it is for example not possible to choose: show T-shirts and Hoody, for Women.

If yes - can you show me how to do it? :slight_smile:

Hope it makes sense!

Thanks
Casper

Hi, @CasperKp!

You can add that pagination to ANY type of filters. Just follow the tutorial for building the multidimensional filtering, then add pagination by following dedicated tutorial.

Cheers,
Anna

Hi @sabanna,

Thanks for the quick reply.

I have added the pagination to the checkbox multifilter and it almost work like I want it.

I have created two simple examples / pages (with pagination and without pagination). I really want the checkbox filter in the “with pagination” page to work like in the “without pagination” page example but I can’t get it to work.

Do you have a solution? :slight_smile:

https://preview.webflow.com/preview/mixitup-filtering-and-pagination?utm_source=mixitup-filtering-and-pagination&preview=2973463a296376dc2ab5712c4c746ffc

https://mixitup-filtering-and-pagination.webflow.io/

Thanks!
Casper

Hi again, @CasperKp!

In the code for the paginated filtering you are “calling” for the filtering function twice, with different parameters:
56%20PM

What you actually need is one call with both parameters together:

00%20PM

Hi @sabanna,

It works!

Thank you for the help! :smiley:

Best,
Casper

1 Like

nice solution… I try to also make it [TUTORIAL] MixItUp3 - Filtering, Sorting and PAGINATION

Hey Casper, your idea of filter is cool… please can you share again your preview with me… and give me the code to make the same…

thanks
Karel
I need it for this project: https://preview.webflow.com/preview/computationeel-denken?utm_source=computationeel-denken&preview=6503f3f78238b03828b2ca80f5dea688
https://computationeel-denken.webflow.io/alle-lesopdrachten

Hi @KarelRosseel82… Sorry for the very late reply… Here is the preview if you still need it :slight_smile: https://preview.webflow.com/preview/mixitup-filtering-and-pagination?utm_medium=preview_link&utm_source=designer&utm_content=mixitup-filtering-and-pagination&preview=2973463a296376dc2ab5712c4c746ffc&mode=preview

Hi @sabanna,

I hope you can help me again :slight_smile:

The infinite scroll in my project works but the collection list only shows 40 items per page. I want it show infinite items on just one page (I’m aware of the 100 items limit). Do you have a solution? :slight_smile:

Here is my project: https://preview.webflow.com/preview/restaurantjob?utm_medium=preview_link&utm_source=designer&utm_content=restaurantjob&preview=0aff5884355a070abf43221782b4252f&pageId=5cbd9253ef4522372891a067&mode=preview

I created a separate topic where I showed a Workaround for Big collections:

Happy Webflowing :heart:

Hi Sabanna, how great there are people like you :guiño:… I followed the mixitup tutorial (http://mixitup-webflow-tutorial.webflow.io/multi-dimensional-filtering-for-cms-content) step by step. Everything is perfect. But I would like to have a search engine. Would it be possible to help me with that? Thank you very much in advance.
link of my website: https://www.microswiss.net/support

hi @Enny_Hidalgo, thanks for your post, I would recommend to create a new forum post about the search. Also Webflow has built in Site search

1 Like

Cool @cyberdave ! I will do so, thank you very much for the recommendation…

This looks great! How do I make the filter adjustments show up in the URL? I want to be able to link to all farms, for example, in a list that show farms, restaurants, artisans, and distributors.

Hi, @bgschust!

I did not provide the tutorial for that exact setup, however it is possible. Once you download all MixitUp package from the website (free for regular filtering and paid for multifilter) you will get the folder with demos. One of them providing the a script example that can be used for the functionality you are requesting.

1 Like

Good to know, I will see if I can handle the scripting. There’s also a Jquery plugin on CodeCanyon called UniFilter by Flgravity that I found after doing some searching. It might be worth a shot.

@sabanna I’m using this method to filter content for an FAQ page and it works very nicely. Although Since my content is quite long, I’m finding an issue when I have scrolled down to the bottom of my content and click on a new filter. Ideally I would want to be scrolled to the top each time I clicked a button but at the moment it doesn’t. Do you have a solution for this?

Here is my READ-only link: https://preview.webflow.com/preview/kats-gd-public-one?utm_medium=preview_link&utm_source=designer&utm_content=kats-gd-public-one&preview=0e01223717f13c729c5f0c6d13931308&pageId=5ef0c0266e8e1b6803a8f704&mode=preview

Hi, @steveshearer!

The workaround could be to add an anchor div with the ID and add that to the filter button settings (since it is a link. so, each time you click the button it will scroll to that div.

Shared with CloudApp

Hi @sabanna! :slight_smile: Your guides have been the Bible to me this past week. Really helping getting an integration going. Do you know any specific tips for how to attribute things so it all works when I port it to Shopify? This is a link to the Udesly cheatsheet that lists all the attributes Shopify can use - so far the porting works perfectly…
https://cheatsheets.udesly.com/shopify/shop
Just wonder how I get MixitUp hooked up to the collections there and use the Tags as the filtering options?

Hi, Jay!

I personally don’t have any experience with converting Webflow site to Shopify or using Udesly, so I can’t provide any advice here, sorry.

Ah ok, thanks @sabanna I understand.