As you know, MixItUp plugin filters and sorts content inside of a container
So, creating content structure for filteringDynamic Collections will be pretty similar to the tutorial with static content (look tutorial).
First of all - create Dynamic Collections.
Here we assume that we have collection of ITEMS (it may be blogposts, images, articles, etc. ) and CATEGORIES for that items.
_
Inside of ITEM collection structure should be a reference field, connected to the CATEGORY collection
Next step - Add both collections to the page.
Remind you, that MixItUp plugin filters and sorts content inside of a container.
Container should have a unique ID that MixItUp will use to reference it.
By default, plugin will look for elements to filter and sort within your container with the class ’.mix’
So we will give ID #container to the Dynamic List and class '.mix' to the Dynamic item. Inside of each item we will add text field and connect its data to the reference field "Category". In this example I give class '.categ' to this field (later we will use this class name in the code snippet).
* After you will make sure that filtering works, you can make this text field display: none *
_
For the filtering menu we will use Dynamic list "Categories" and one static button for show "All" items.
In this example I wrap static button and dynamic list in the div, which styled using flexbox.
By default MixItUp will apply filtering click handlers to any clickable element with the class ’.filter’, so all dynamic items and static button we give the same class '.filter'
Also, dynamic items will contain buttons (or text-links or link-blocks with text, which you prefer).
For the further connecting this dynamic list to the code snippet
we are going to set theID for it: #dyn-filter-menu
_
Final structure will look like this:
_
Each filter button requires the attribute data-filter containing a class of the elements you wish to show.
For the static button we will add custom data attribute on the settings tab:
Data-attributes for the dynamic list will be added by jQuesry code snippet
For connect this plugin you will have to add custom code to the site settings (pic1) or page settings (pic2) before </body> tag.
First we link to .js file of plugin.
You can either host MixItUp yourself (hosting server or dropbox or google-drive)
or load it by using public CDN link or get public link to plugin file.
<script src="your link" type="text/javascript"></script>
In my case I used public link
http://cdn.jsdelivr.net/jquery.mixitup/latest/jquery.mixitup.min.js
After this line of code we will add the jQuery script snippet which will contain:
- Creating dynamic items classes from its categories (for the items)
- Adding data-filter attributes for dynamic filters (for the categories)
- Initializing MixItUp plugin when page is loading
Full code snippet will look like this:
Before we get to the finish, there is one small but crucial CSS rule you must add to the project:
filtering elements should have setting display:none
So, do not forget to apply display:none to class .mix before publish the site
When MixItUp plugin will load, it will add the display value as an inline-style (the default is “inline-block”).