MixItUp is a very useful jQuery filtering plugin.
MixItUp is free to use in non-commercial projects under the terms of the creative commons CC-BY-NC license. However, for use in commercial projects and products we require that you purchase a commercial license.
At the time of writing, the single developer commercial license is $25.
Install Using Bower
Run the following line in your project root - Mixitup will be downloaded as a
bower_component, and the project
bower.json will be amended:
bower.json now looks like this, with a new dependency:
Sage 8 uses the Asset Builder to pipeline assets. This results in an almost magical connecting up of resources, but it needs the imported project’s
bower.json to reference the “main” file for the package. The Mixitup
bower.json doesn’t do this, so an override must be added to the PROJECT
bower.json, which now looks like this:
In this example, the main file referenced is an un-minified version - which can make debugging easier. You may as well add the unminified version, since the Sage asset pipeline handles minification.
Adding this allows Asset Builder to grab the imported file and build it into the asset pipeline - which lead us on to the next step.
Add to manifest.json
Adding a proper reference to the bower-installed project in the
/assets/manifest.json file will result in a minified asset being built into the
dist directory when
gulp is run.
Now the asset can be conditionally enqueued where it is needed (it could alternatively be built into
To stick with the Sage convention, add your enqueue to the
assets() function in
/lib/setup.php. For example:
- Create HTML with the right container and filterable elements
- Create a HTML filter
Note: By default, MixitUp looks for elements with the class
.mix and designates these as filterable elements. You can override this, but if you don’t, and your filter elements don’t have the
.mix class, MixItUp isn’t going to work.
comments powered by Disqus