Stacks4Stacks

Originally released in early 2012, Filter continues to fulfil the frequent request for providing both keyword and search box filtering in one stack. This latest version of Filter (version 4) remains by far one of the most elegant and sophisticated content filtering solutions available for RapidWeaver today. Every aspect has been well thought out; with careful consideration given towards optimum performance and usability.

The way Filter works is to assign categories to each item. A category acts as criteria people can use for searching or filtering items. Examples of categories could be size, colour, weight, price, shape, stock availability etc. A maximum of 10 categories can be applied to each item. Within each category, you then assign tags. So in the example of a category named 'colour' you could tag an item green, dark, natural, stonewash etc.

Once previewed and published, category names will get shown as buttons along the top or within a sidebar. Clicking or tapping a category button reveals a search box and a list of tags. Website users can type in a search box to narrow their results. Clicking tags applies that filter criteria. Filter stack is powerful, in that your website users can filter items over multiple categories and tags. For example, a website user could search specifically for blue t-shirts, in a medium size, within a certain price bracket. Additionally a user can undo (refine) their keyword selection, without needed to reload the page and start all over again.

Filter gives you the convenience of being able to setup your inventory of filtrable items using a modern system of sub-stacks (offering the simplicity of drag-and-drop, code-free setup) or you can work with the raw HTML markup (either locally or using HTML markup stored in a remote text file). A bountiful range of behaviour, style, colour and layout settings provide the flexibility to create a powerful filtering system that looks like an integral part of your professional website or web app.

If you're looking for a more simplified filtering solution that does not have the searching component, the aptly-named SortStack is another excellent solution worth considering.

Please note that Filter 4 requires Stacks 3. It will not work in older versions of the Stacks plugin.

Example

In this example, a mock t-shirt store was created. Users can sort through the t-shirts by colour, size, price and availability. We used the 'HTML Markup' setup mode for this example (as we were migrating in an inventory of filtrable items previously setup using an older version of Filter). However ordinarily you have the freedom to choose between using code-free Filter sub-stacks or raw HTML markup. An unlimited number of filtrable items are supported.

In the example above, the category keyword search was disabled on all categories, except the first. You may have also noticed that the Stacks4Stacks homepage makes use of the Filter stack (below the SimpleSearch search box); for sorting available stack elements by name, keywords and price.

Setup

Follow these instructions for getting the Filter stack working in your RapidWeaver project:

1. Once installed, drag and drop a copy of the Filter stack from your Stacks library into your Stacks page
2. Click on the blue '+' button to add individual filtrable items
3. Drag and drop stacks into the Filter item sub-stacks; like styled text, images, HTML code or markdown
4. Select sub-stacks to apply categories and tags to them
5. In the stack settings of he main Filter stack, you can customise many aspects of the Filter stack style, layout and behaviour
6. Preview and publish your page when done

Configuring Filter items with HTML markup

Instead of using sub-stacks, Filter stack can optionally be configured with raw HTML markup; either setup directly within the Filter stack or warehoused from a plain text file stored elsewhere on your computer. If updating from Filter 3 to Filter 4, you may prefer to copy your existing markup over and enter it into Filter 4 using the HTML markup option. Likewise if you simply prefer the speed and efficiency of working with HTML markup, then setting the item source to HTML Markup in the stack settings may be of benefit to you.

Each filtrable item comprises of a standard HTML opening <li> list item and closing </li> list item. Into the opening <li> list item tag, you add an HTML5 data- attribute. Immediately after the data-, you type the category name (e.g. data-colour). Specify a list of comma separated keywords inside the data attribute (e.g. data-colour='green, dark, natural'). The end result will look something like this:

<li data-colour='green, dark, natural'>
</li>

And at this point, you can then enter the content for each filtrable item, between those opening and closing list tags:

<li data-colour='green, dark, natural'>
    <h3>Title Goes Here>/h3>
    <p>This is some content for the filtrable item.</p>
    <a href='http://example.com'>Learn more...</a>
</li>

You have the complete freedom of using various HTML tags in your content, including headings, anchors (links), images, lists and other basic markup. To make things even easier for you, sample HTML markup is already provided when you add a Filter stack to your webpage; so you can continue using this and customise it to your requirements. Repeat the above steps for each filtrable item. If you find it easier, you can compile your list of filtrable items in a regular HTML code editor that supports syntax highlighting; like Sublime, Expresso, Coda or TextWrangler.

Tip: In HTML5, you can safely omit the closing </li> tag in your markup. This may help in some instances where you're finding extra margin is occurring between filterable items.

Warehousing setup

Use the warehousing option if you need to maintain your inventory of filtrable items outside of RapidWeaver. This is a good solution to use if you need to manage your filtrable items on a computer or device that does not have RapidWeaver installed. You will need to change the extension of your page from .html to .php in the RapidWeaver Page Inspector. Please note that filtrable items may only display after your page is published to a web server with PHP 5.3 or later support. In the Filter stack settings, change the item source to Warehouse. Provide the relative path to the text file containing the markup for your filtrable items. For improved speed and security, the text file should ideally be stored on the same domain that hosts your Filter stack page. The plain text file consists of the HTML markup for each item, as outlined above. Do not include any other HTML code like document structure, divisional containers or unordered list tags; your selected RapidWeaver theme and the Filter stack composes this extra markup for you already.

Possible uses for Filter

Filter has many possible uses, and would be especially useful in e-commerce, photography portfolio's, business directories and educational websites. Basically anywhere where you need to display numerous items and provide a simple method for end users to filter and resort those items. Try the free demo version yourself.

Browser compatibility

Filter is tested and compatible with all major web browsers; including IE9, IE10, IE11, and the latest versions of Safari, Firefox, Opera, Chrome and Maxthon web browsers. Cosmetic embellishments like rounded corners and gradient effects safely degrade in unsupported browsers.

Legend support

This is a feature which allows you to display descriptive text above your filtrable items, informing the person viewing your website what filter(s) are currently applied and the total number of items returned that match the criteria. There are a couple of important notes to be aware of if you decide to use this legends:

• Legends work best when all filtrable items start displayed and non-matches are set to be hidden (this is the default behaviour of Filter)
• The 'reset' button will not work when legends are enabled, and should be disabled in the stack settings. Your website users will need to manually reset filters from the drop-downs or reload the page.
• Options to customise the style of legend text is presently limited to using your own custom CSS markup

We use 'call backs' within the Javascript code to determine whether a filter is active or not. If a filter is applied, the text shown in the legend changes and we output the filter category names, the filter criteria and the number of items returned. Category names and the filter criteria is output in HTML list format, allowing us to automatically insert the word 'and' between multiple filter criteria. All the HTML markup includes class selector names, providing the opportunity to further customise the styling of legends.

Responsive behaviour

Filtrable items are displayed within an adaptive grid. The number of columns displayed is determined by item width and the space available. As the screen is made narrower, the filtrable items automatically reflow to fit. The width and height of filtrable items always remains the same. If you've configured category buttons to display within a sidebar, the sidebar will collapse on screen widths falling below your breakpoint setting; therefore the category buttons will display above the filtrable items on smaller screens.

Credits

The Filter stack is part-built on the excellent Filtrify jQuery plugin, by Luís Almeida. The original plugin was released under the MIT license, as open source code on Github. Much work has since been done to modify the original code to make it work in RapidWeaver, and provide a wide choice of customisable settings and other improvements. Any support queries relating to this stack should be directed to myself, via the support page.