How to Add An Accordion Effect to Category Lists in Datafeedr
Accordion Category List
I added an accordion effect to the category list at Bag Saver. It works well and in this article I show you how to implement it yourself.
- This works for category lists which have 2 levels in the tree only – parent and child. You cannot have grandchildren in the categories. For that, you probably want a tree like the one I implemented over at Fitness Saver.
- You need to download and install jQueryUI – It’s free and provides the accordion effect, plus other cool stuff
Category Heirarchies
In the Bag Saver category list, we have two levels of category in the tree. e.g. The first parent category is ‘Mens bags’ and example children include ‘Mens Shoulder Bags’, ‘Mens Briefcases’ etc.
On the Bag Saver site there is no way to select the parent categories. Clicking the category ‘Mens bags’ actually opens the accordion for Mens bags to show all the child categories rather than loading a new page.
If you don’t want this behaviour and have products within your parent categories then be sure to choose the correct chunk of code below when creating your widget.
jQueryUI
jQuery is a great help when building any kind of site. Specifically for affiliate sites, it helps do lots of funky stuff like event tracking when users click out from your store, or continuous scroll, or giving coupons to customers if they Facebook like your site.
There is a great companion to jQuery which I love called jQueryUI. It provides the following useful stuff for affiliate web designers:
- Accordion – great for collapsible category lists like in this article
- Slider – great for a price slider – Datafeedr offers a ?price=x-y style parameter so we just need to plug this into that parameter
- DatePicker – great if you’re doing any affiliate work that involves dates – e.g. hotel or travel affiliates
In order to add the accordion effect to your category lists, please download and install jQueryUI (totally free). There are a variety of choices you have for how its styled out of the box, so go to their themeroller and choose something that matches your site, download it, then upload the code to your websites /js/ folder.
- Visit jQueryUI Themeroller page
- Click Gallery
- Choose the theme you want and click Download
- Upload the downloaded files via FTP to your sites /js/ folder and /css folder
- Add a reference to jQueryUI to your wordpress site
This last step depends on your theme. Many themes, e.g. themes based on the Genesis framework, allow you to add code directly to the head of your site. Others require you to edit your ‘header.php’ file directly.
Whichever is the case, you need to add the following lines inside the <head></head> tags of your site:
Note: I uploaded the 2 jQueryUI files to /js/ and /css/. When adding the code above, make sure you insert the correct reference to the files and make sure you use the version number of the file you downloaded from jQueryUI.
Add Your Category List To DataFeedr
You can add your category list in a number of ways. The most typical is probably to create a Datafeedr Widget that you can place in your sidebar. An alternative is to add the relevant code to each of the Datafeedr views – so long as it resides inside a Datafeedr ‘Category List’ block. The code below works equally well either way – I’ll presume you’re adding this code to a widget as that way you get to build your sidebar within WordPress.
There are great widget plugins available which let you switch widgets on or off for different pages if you need this functionality.
From inside the Datafeedr factory, Click Views -> Widgets, click to add a new widget, call it ‘Accordion Categories’.
Add a Category List block to your Categories widget if it doesn’t already exist.
Edit your ‘Category list’ block and add either of the following two code blocks. Which one you choose depends on whether your users need to be able to navigate to the parent categories or not.
Category List Code Without Parent Categories
Clicking the accordion header will open the accordion. This is fast for your users when navigating between different categories although generally you will expect users to stay within a category, so it’s not essential.
[level-member]
[category.list id='dfparent' before='' after='']
[category.name]
[category.list id='dfchild' before='' after='
']
[category.name]
[category.repeat id='dfchild']
[/category.list]
[/category.list]
[/level-member]
Category List With Clickable Parent Categories On the Accordion Header
Use this code block if you need to allow your users to access the parent categories. With this code, when you mouse over the accordion header it will open, and when you click the accordion header it will take you to the parent category.
[level-member]
[category.list id='dfparent' before='' after='']
[category.name]
[category.list id='dfchild' before='' after='
']
[category.name]
[category.repeat id='dfchild']
[/category.list]
[/category.list]
[/level-member]
Save your widget, go to WordPress Admin -> Tools -> Datafeedr and click ‘Update Settings’.
In WordPress, go to Appearance -> Widgets and add your new Datafeedr category widget to the sidebar.
Finished
At this stage you should have a category list which behaves like an accordion and allows your users to navigate around your shop.
If you’d like to add extra styling, this is always possible using CSS but for easiest results, use the ‘ThemeRoller’ when downloading your jQueryUI code and the CSS will already be set up for you.
Comments below – include a link to your site if you’re asking for help.
- How to create a tree of categories from a custom taxonomy - September 22, 2014
- Managing postcodes and locations with WPAllImport - September 22, 2014
- Why do affiliate merchants reject your website? - August 20, 2014
