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.
Hi @sabanna! 
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.
Hi Sabanna,
I’m working on a page where I need to be able to filter items from a collection list.
I’m using Mixitup as I was following your tutorial.
Everything seemed well, but the filtering is not working. Whenever I click on one of the buttons to choose a category, all my collection list items are removed from the view. In the element inspector I see that the collection-list container gets a class added “mixitup-container-failed”. I read that it means that mixitup cannot find items for the category that’s being asked. However I checked and the data-filter attributes are matching the classes of the collection-list-items.
I would really appreciate some guidance if possible!
Here you can see the page on webflow designer: https://preview.webflow.com/preview/close-business-v2?utm_medium=preview_link&utm_source=designer&utm_content=close-business-v2&preview=8c1076bf485f5a939c236880e6ae91b5&pageId=5fb655a847016d24c6ec39a1&mode=preview
Here you can experience the “live” product: https://close-business-v2.webflow.io/demos
Hi, @djerrund!
First of all, the Preview link doesn’t work, for some reason, so I will show what I can see through the browser developer tools.
-
when you create the dynamic filtering buttons, for some reason you put data-filter attribute on divs (actual collection items) AND on the buttons inside those items. So, when the user clicks on the button it triggers filtering by two parameters, where 2nd parameter (data-filter=“sdf”) doesn’t exist. You need to pick only one
-
in your code snippet, that supposes to take care of categories converted to classes, you forgot to add an assertion for the categories that contain more than one word, which creates classes with space character (which is not valid by CSS standards).
Hi @sabanna!
We’ve loved following your tutorials so far, so easy to follow!
One issue a client has found is that when using the Mixitup pagination, once you click a number at the bottom of the page, the results change but the viewport doesn’t automatically scroll back to the top.
Is there a way that when a user clicks to view another page of results, the page is scrolled back to the top again?
Thank you!
Hi, @radicalrooster!
You can wrap the pagination UI in the link-block and link it in the settings to the div that has your filter buttons. Of course, don’t forget to give that div some ID before that.
This trick worked for me many times
1 Like
Hi @sabanna
I’m trying hard to bring your magic to life! For a reason that I don’t get, it’s not working…
Here’s my webflow designer: https://preview.webflow.com/preview/vezecoconstruction?utm_medium=preview_link&utm_source=dashboard&utm_content=vezecoconstruction&preview=c0b4cb1318ea1abb701afd7e943b56fc&mode=preview
Live: Vez eco construction - Nos Réalisations
When I click on the filter buttons, it does half the job. It filters, but all projects disappear instead of filtering…
Your help would be so much appreciated…
thanks!
Hi @sabanna
I’ve been using your Mixitup pagination method for a while now, it works great!
My question is…
Say I have a Collection (Collection A) with 150 items in it, of course by not using Webflow’s native pagination I can only display 100 items.
Can I use this same method as your tutorial to somehow load Collection A twice on the same page and filter so as not to show items twice, then paginate?
I cannot split this Collection into two as it would confuse the user, so I need to load in 100 items from Collection A and then the other 50 items from the same Collection A again separately but on the same page.
Any ideas?
Thanks!
Thanks @sabanna
That tutorial you linked to looks to be when you want to combine multiple Collections into one filterable list.
What I am talking about is having one, single Collection with more than 100 items.
Using Mixitup, how do I get around Webflow’s limit of only showing 100 items unless you use the native pagination?
If I display the Collection twice, it’s still only going to show the same 100 items and I’ll then have duplicates surely?
Thanks!
No, that tutorial is exactly about the situation you asked
Apologies, maybe I am misunderstanding…
In the tutorial it says:
‘In our example, to show 365 items you would need 3 more Collection Lists (1st: 1-100 items, 2nd: 101-200 items, 3rd: 201-300 items, 4th: 301-365, 4 lists in total).’
In my situation, I don’t have three separate Collection lists, I have just the one with 100+ items in.
Unfortunately I cannot ‘split’ this Collection across multiple Collections as it will confuse the client when they are adding items via the Editor.
Many thanks!
You don’t need to split collection list. Why you can’t use “LIMIT” settings? It allows you to specify how many items to show and which item it should start from.
You don’t even have to limit the 2nd instance to 50 items, it will show as many as you have left in the collection after 1st 100. Your user (editor) can add new items and they will appear in the 2nd Collection List instance. All you need to do is make sure that items in all instances are sorted by the same parameter (date added or whatever you need).
1 Like