Have you ever wondered how Doobox or Maik Barz or S4S sort and filter their product pages? Rob Hall has.
Doobox Hunter Stack. Hunter is, perhaps, the most intuitive of the three solutions. When I came to use it, I dropped a Hunter Base Stack onto my page and discovered that there is a setting for Item Spacing and two settings to tidy up the layout page. Item Spacing simply sets the vertical distance between the items in the list.
A Hunter Item stack will allow you to drop any other stacks into it, in which you wish to display and/or describe your items. Clicking in the stack’s header will allow you to define categories by which you wish to have the list filtered. You may add multiple categories separated by commas if required. There are no further settings.
The final Hunter stack is Hunter Nav, which automatically displays a list of the categories from the Item stacks. Hunter Nav is the only stack with any configuration possibilities – you may set the list Orientation to Horizontal or Vertical and set the list to contain an option to “View All” items and define a text for this setting. The other settings set how the item links are displayed and which category, if any, should be displayed when the page initially loads. That’s it.
Naïve, as I am, I dropped a second Hunter stack into a second column, filled it with further items and declared the page finished. The navigation menu controls both columns and sorts the items according to their category whilst hiding the items that have not been requested.
Maik Barz’ Stack Filter wasn’t quite as straightforward. Perhaps because it has more sorting options. After dragging a Stack Filter Stack onto my page, I set a Unique Identifier for the filter. The Padding Top and Padding Left were left unaltered at 10px, and the alignment at Centered – there are options for Left and Right too. As expected, the sorted list aligns itself accordingly once filtered.
A Stack Filter Item, dropped into the base stack, will accept further stacks; an image and a text stack, for instance. The Stack Filter requires a Category and can accept up to three definitions for sorting each category. The Alignment setting dictates where any text will align within the item stack.
Stack Filter Activator is a stack container that allows any stack to morph into a filter. You can drop in a button stack, for instance, a text or an Icon. When clicked, your list will be sorted according to the Show Categories setting defined within the stack. The filter is animated, so you can set a Duration for the animation and set the animation to Scale or leave the standard setting which is fade. The setting Stack Filter ID refers to the list that is to be sorted, should you have more than one on your page.
A Stack Filter Sorter allows you to sort your list items according to the definition set in the Item stack. The sorting order may be set to Ascending or descending. Again, settings for Duration and Scale are available.
Stack Filter Search places a search box on your page that will allow your visitor to search amongst the categories. The search filter relies on the presumption that the user knows which categories have been defined. A search for ‘starters’ will hide everything from a menu’s list, if only ‘antipasti’ has been added as a category.
Stack Filter also wasn’t quite as intuitive as Hunter. At my first attempt, my list filled the width of the page, with my items listed vertically. The Barz homepage looks much nicer. I attempted placing my items into columns stacks, but they just disappeared from the page. It wasn’t until I restricted the width of my text stacks that my items appeared in grid form and became responsive.
If you wish to use text links or an external menu such as DropDown2Go to sort your lists, Maik supplies an example of a text-link on his homepage.
Stacks4stacks Filter stack. I suffer from an acute case of codephobia. Imagine my shock, then, when I dropped Will’s Filter stack onto my page and found that Filter immediately looks like a finished list. It wasn’t until I tried to drag an image onto the ‘placeholder’ that I realised how wrong I was. Filter requires an HTML list and when you click on the stack, you are presented with a long HTML page. Luckily it’s not as complicated as it appears on first glance.
The HUD is purely for formatting the list appearance. In the HUD items can be set to Local or warehoused. Breakpoints and spacing can be set for a responsive layout and buttons can be configured. Filter generates a menu containing up to ten categories and the styling can be set in the HUD.
If you have to choose a method of filtering Stacks content, it really only comes down to the sort of menu you’d like to use to activate the filter.
Hunter has a text-based menu that contains a list of available categories. The items can be placed inside columns, meaning that the page design is yours and yours alone.
Stack Filter uses buttons as the main method of search – again, a list of categories. The buttons can be replaced with a menu stack, if you have one. The page layout is carried out by Stack Filter and is determined by the overall item width.
Filter is less flexible than either Hunter or Stack Filter. The search method is via a menu containing a list of categories. Page layout is carried out by the CSS in the background and it is not possible to insert stacks into the list to enhance the layout. It is, however, a highly resourceful search filter — ideal for eCommerce pages and the like — and one that neatly plugs the gaps and fulfils a different set of needs than the other two.