Thanks! Please check the following:
System requirements
This stack requires RapidWeaver and the Stacks plugin. It will not work with other platforms (like Wordpress). We recommend you aim towards installing the latest version of RapidWeaver and Stacks that your computer is compatible with.

License agreement
You may use this purchased stack an unlimited number of times in personal or commercial projects, request technical support and receive free updates in future.

This stack can be installed or synced onto all computers that you own. You are permitted to make archival backup copies of the stack.

You may not resell or make this stack available for download, remove copyright credits or license information.

The software is provided "as is" without any implied or expressed warranty of merchantability or fitness for purpose. In no event shall the authors or copyright holders be liable for any claim, damages or other liability, whether in an action of contract, tort or otherwise arising from, out of or in connection with the software or the use or other dealings in the software.

Refund policy
By purchasing this stack, you agree that your purchase will be available immediately via digital download and that you waive your statutory right of withdrawal.

All purchases are final and refunds will not be provided (we physically cannot un-download or remove stacks from your computer).

You are reminded to make use of the free demo versions already provided on the website, to fully evaluate stacks for compatibility and suitability before purchase.

Customer support
If you have questions that relate specifically to this stack, you should make contact via the contact page. We aim to answer all messages within 12 hours, Monday to Friday.

If you require a faster response at weekends or during public holidays, please post your question(s) to the RapidWeaver forums, where a support volunteer may be able to assist you quicker.
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.
  • Aqua T-Shirt

    Image

    Put some content here like this. And a link!

  • Army T-Shirt

    Image

    Put some content here like this. And a link!

  • Ash Grey T-Shirt

    Image

    Put some content here like this. And a link!

  • Asphalt T-Shirt

    Image

    Put some content here like this. And a link!

  • Baby Blue T-Shirt

    Image

    Put some content here like this. And a link!

  • Black T-Shirt

    Image

    Put some content here like this. And a link!

  • Bright Silver T-Shirt

    Image

    Put some content here like this. And a link!

  • Brown T-Shirt

    Image

    Put some content here like this. And a link!

  • Coral T-Shirt

    Image

    Put some content here like this. And a link!

  • Cranberry T-Shirt

    Image

    Put some content here like this. And a link!

  • Cream T-Shirt

    Image

    Put some content here like this. And a link!

  • Eggplant T-Shirt

    Image

    Put some content here like this. And a link!

  • Forest T-Shirt

    Image

    Put some content here like this. And a link!

  • Fuchsia T-Shirt

    Image

    Put some content here like this. And a link!

  • Gold T-Shirt

    Image

    Put some content here like this. And a link!

  • Grass T-Shirt

    Image

    Put some content here like this. And a link!

  • Green T-Shirt

    Image

    Put some content here like this. And a link!

  • Grey T-Shirt

    Image

    Put some content here like this. And a link!

  • Lapis T-Shirt

    Image

    Put some content here like this. And a link!

  • Lavender T-Shirt

    Image

    Put some content here like this. And a link!

  • Lemon T-Shirt

    Image

    Put some content here like this. And a link!

  • Light Blue T-Shirt

    Image

    Put some content here like this. And a link!

  • Light Pink T-Shirt

    Image

    Put some content here like this. And a link!

  • Lime T-Shirt

    Image

    Put some content here like this. And a link!

  • Mint T-Shirt

    Image

    Put some content here like this. And a link!

  • Navy T-Shirt

    Image

    Put some content here like this. And a link!

  • Olive T-Shirt

    Image

    Put some content here like this. And a link!

  • Orange T-Shirt

    Image

    Put some content here like this. And a link!

  • Pink T-Shirt

    Image

    Put some content here like this. And a link!

  • Purple T-Shirt

    Image

    Put some content here like this. And a link!

  • Raspberry

    Image

    Put some content here like this. And a link!

  • Red

    Image

    Put some content here like this. And a link!

  • Royal Blue T-Shirt

    Image

    Put some content here like this. And a link!

  • Sangria T-Shirt

    Image

    Put some content here like this. And a link!

  • Sea-Foam T-Shirt

    Image

    Put some content here like this. And a link!

  • Silver T-Shirt

    Image

    Put some content here like this. And a link!

  • Slate T-Shirt

    Image

    Put some content here like this. And a link!

  • Sun T-Shirt

    Image

    Put some content here like this. And a link!

  • Teal T-Shirt

    Image

    Put some content here like this. And a link!

  • White T-Shirt

    Image

    Put some content here like this. And a link!

  • White T-Shirts (5 Pack)

    Image

    Put some content here like this. And a link!

  • White T-Shirts (10 Pack)

    Image

    Put some content here like this. And a link!

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.
Bookmark or share this page
Baidu 百度
Blogger
Delicious
Digg
Facebook
Google+
LinkedIn
LiveJournal
MySpace
Одноклассники
Reddit
Renren 人人网
StumbleUpon
Tumblr
Twitter
ВКонтакте
Weibo 微博
XING
Contact Us
Email This Page
Print This Page
PS: This bookmarking and sharing popup is powered using our brilliant SocialPopup stack!

Cookies

Like a lot of websites, Stacks4Stacks uses cookies to help enhance your browsing experience and handle things like purchases. We take your privacy seriously, and welcome you to freely opt-out of nonessential cookies at any time by reviewing your preferences on this page.