Hello, dear Community!!! 
As many of you know, Webflow has a limit on how many Collection Items can be rendered in one Collection List (100 items in one dynamic collection instance). This limitation based on the front-end and back-end performance concerns and for now canât be removed.
Many users asked me if there is a solution for situations when you need to use MixitUp Filters on big (more than 100 items) collections
I can suggest a workaround, that will help you with this problem.
We will move items from several collection lists into one container using little JavaScript snippet (
⌠yeah, yeah, few more lines to all that bunch of custom code you already use⌠
)
TUTORIAL
Letâs take the situation when you have a Collection of 365 items, that you need to Filter using MixitUp + Paginate it
After setting up all necessary functionality for MixtUp Filtering (follow the forum post [TUTORIAL] MixItUp3 - Filtering, Sorting and PAGINATION or the tutorial http://mixitup-webflow-tutorial.webflow.io)
-
Make sure your Collection List limit set to 100 items
-
Apply an ID
target-containerto your Collection List (
NOT a Collection List Wrapper). If you already have another ID on your Collection List, use that ID in the code snippet below -
Add as many Collection Lists on the page as needed to show all your items. 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).
-
Make sure all Collection Items in those lists have the same classes/styles/structure as items in the 1st Collection List. And donât forget, all collection Items SHOULD have class
mix -
Apply an additional combo-class
.to-be-movedto themixItems
-
Inside the custom code that you already have for MixitUp,
right beforethe line where we defining the mix-container and initializing MixitUp add an additional snippet:
const moveItems = document.querySelectorAll('.to-be-moved');
moveItems.forEach( function(move) {
document.getElementById('target-container').appendChild(move);
});
What itâď¸does:
After site gets published and page with all the collection items loads, those Collection Items that have an additional combo-class .to-be-moved will be âre-locatedâ (moved) from div-blocks where they were rendered to the div-block with the ID target-container (which is our 1st Collection List).
Next step, MixitUp âwill findâ the container with all the Collection items (including moved items), and paginate them. Filtering also will affect all those collection items because now they all are inside one mix-container.
Be aware, it might affect your page load speed if your collection items have images or videos because you will load so many items on one page.
REMINDER
Webflow doesnât validate your custom code. If your custom code doesnât work, please ask your question on the Forum, so the community could help you to resolve your problem. Webflow Support team does not provide help with issues in the âcustom code solutionsâ.
Respectfully,
Anna
