[TUTORIAL] MixItUp3 - Filter and paginate Collections with more than 100 items

Hello, dear Community!!! :wave:t3:

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 (:see_no_evil:… yeah, yeah, few more lines to all that bunch of custom code you already use… :woman_shrugging:t3:)

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-container to your Collection List (:warning: 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-moved to the mixItems

  • Inside the custom code that you already have for MixitUp, :exclamation:right before:exclamation:the 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.

:warning: 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:exclamation:

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

13 Likes

Thanks for this. My client literally just emailed me about this issue.

1 Like

Thanks for this great workaround @sabanna

1 Like

Amazing workaround!

What happens when a filter selection provides more than 100 options? does the target-container stop at displaying item #100 and the others are not displaying?

Would love to hear your thoughts!

Kind regards,

Djaya

If you have a pagination setup, it will paginate all results. If you don’t setup a pagination and only using the workaround for 100 items limit it will show as many items as filter found, because after page loads all items will be moved inside the target container and will stay there.

@sabanna Could you please have a look and let me know what’s wrong?

I followed your steps from here and from Pagination, but the pagination is still not working. I have 343 products.

Read-only: https://preview.webflow.com/preview/online-lubricants-ltd?utm_medium=preview_link&utm_source=designer&utm_content=online-lubricants-ltd&preview=6b5136d286aaec4821741b51a9184b06&pageId=5d513e6ea4a3702d4d8cac4e&mode=preview

image

image

The filtering works: Agricultural Oils | Online Lubricants (different page)

Hi, @RohanGanachari!

Please, move all the custom code on the page to the Before </body> tag area

Hi @sabanna,
Thank you very much for having a look. :slight_smile:

The filters work. But the pagination still doesn’t.

Also, the other CMS collections and webflow pagination are visible.
Could you please me tell me what am I missing?

I think the weirdest thing is Webflow itself supports populating 100 collection items only.

1 Like
  1. Do not add a default Webflow pagination to the collection lists.
  2. Do not set the random order on the Collection, that way you can’t be sure that the next collection instance will not pick the similar items. Sort them by name, for example.
  3. Do not apply same ID to all 3 collection lists, the custom code need to refer to the 1st collection list to move all other mix item into it. Plus it is prohibited by CSS rules, ID must be unique for the page.

Hi @sabanna,

  1. Removed webflow pagination :white_check_mark:

  2. Changed Sort order from Random to By name. :white_check_mark:

  3. Removed ID from the other 3 CMS collections. But did you mean apply a unique ID to each one?


3.1 The .mix-container ID is same for 12 other pages, but I changed ID for this page only to .mix-contain and in the code.

The filtering is working, but products are repeated 3 times (when filtered) and pagination still doesn’t work.
https://www.online-lubricants.co.uk/all-oils

@RohanGanachari, please, go through the Mixitup pagination tutorial once again and make sure you followed ALL steps described there:

CloudApp

Hello Anna! @sabanna

Would You be please so kind to check this read only link?

https://preview.webflow.com/preview/gabriels-amazing-project-9f0517?utm_medium=preview_link&utm_source=dashboard&utm_content=gabriels-amazing-project-9f0517&preview=986d089f6f8fc47a8f5adf20cf993af2&mode=preview&fbclid=IwAR01tmbJFVYTkjFu5Viu3mAojuxLf-4MCpgVQQDShtDqQ_lBXSgYvA3U2hw

I’m trying to figure it out how to set correctly, but unfortunately can not.

Thank You for any hint. I appreciate your help.

Cheers,
Gabriel

Hi, @Gabriel_Hajdok!

You did not add correct numbers of parameters for the Category element and those classes get applied to the wrong div

CloudApp

CloudApp

2 Likes

Thank You Anna! @sabanna
Now it’s working fine! :slight_smile:

Hi @sabanna, Thanks for the awesome tutorials. I have everything working as instructed, but I do have a scenario that I can’t figure out. I’m hoping you or someone else has a solution.

I’m using MixItUp with a collection that has 150+ items. Pagination occurs for any filter resulting in more than 40 items (e.g. All).

In the filtered collection list, a thumbnail image appears for each item. Clicking on an image links to a collection template page showing the details of that one item.

ISSUE: When I go “back” to the main filter page, it defaults back to “All” items instead of the filter that was previously active. Is there an easy way to recall the previous filter to apply it when going back to the main collection list page?

Hi @widwotkma!

That would be possible to achieve with a bit different setup. The author of this plugin call it "Filtering by URL. Basically it would add “hash” in the browser link of the page each time user make a choice in the filter. This way you would have the ability to keep the last user’s choice in the browser cash.

Setup for this kind of filtering requires using slightly different code. I don’t have a tutorial for that but you can find it on the author’s GitHub demo page: mixitup/index.html at v3 · patrickkunka/mixitup · GitHub

1 Like

Thanks for the direction @sabanna will look into it.

Hii @sabanna,
Thank you for providing this tutorial. But it looks like IE does not support the solution.
How can I make the below code of yours compatible with IE?

const moveItems = document.querySelectorAll(‘.to-be-moved’);
moveItems.forEach( function(move) {
document.getElementById(‘target-container’).appendChild(move);
});

Hi, @komal!

The problem is that Internet Explorer doesn’t support “for each” loops as other modern browsers do. You will need to change the code to use “regular” for loops.

Try this

const moveItems = document.querySelectorAll(’.to-be-moved’);
for (var i = 0; i < moveItems.length; i++) {
   document.getElementById(‘target-container’).appendChild(moveItems[i]);
}