==========
Here is a new version of the accordion menu. This one includes some advanced features to give you more options to manage the customer experience. In order to use the newer features of jquery and the accordion, it will be necessary to replace the jquery packaged with Interspire (1.2.6) with a newer version (1.3.2). I have not found any problems with the cart and this newer jquery.js. Interspire also hinted in another post that future releases will include an updated version of this file. No confirmation or date has been given.
With this accordion you have several controls to work with, the best way to understand these controls is to try them. A description of each is below.
Accordion Controls:
active: This is will allow you to have all categories collapsed by default. If you set this value to 0, then the first category is always expanded and the rest collapsed, set it to 1 and the second category is expanded etc. If you want all categories to be collapsed, then set the value to be the number of top level categories in your store. For example, If you have 3 top level categories, setting the 'active' variable to '3' will collapse all categories when the page is loaded.
autoHeight: This one is hard to explain in words so best to try it. If you set autoHeight to 'true', the space alocated to display the sub-categories is set to the maximum amount of space needed to display the category with the most sub-categories. If you set this to false, then the space the category panel takes up adjusts according to how many sub-categories you have.
event: This controls whether the menu expansion takes place on 'click' or 'mouseover'. Choose 'click' if you want the category expansion to happen by deliberate action by the customer. With 'mouseover' it is possible that the customer will expand and collapse the categories inadvertently.
collapsible: By setting this variable to be 'true', click once to expand a category, click it again to collapse it. If you set this to 'false', then you can only collapse a category by selecting another. In other words, there will always be an expanded category until the customer goes to another page. Collapsible is inactive if your event is equal to 'mouseover'.
Installation:
Step 1
Download the following files and place them files in the /javascript folder.
ui.accordion.js
ui.core.js
jquery-1.3.2.js
Step 2
Edit Panels/SideCategoryList.html and replace <ul> with <ul id="accordion">
Step 3
Edit Panels/HTMLHead.html. Find
Code: Select all
<script type="text/javascript" src="%%GLOBAL_ShopPath%%/javascript/jquery.js"></script>
Code: Select all
<script type="text/javascript" src="%%GLOBAL_ShopPath%%/javascript/jquery-1.3.2.js"></script>
Code: Select all
<script type="text/javascript" src="%%GLOBAL_ShopPath%%/javascript/ui.core.js"></script>
<script type="text/javascript" src="%%GLOBAL_ShopPath%%/javascript/ui.accordion.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#accordion").accordion({
active: 0, // to have all categories collapsed, set to be a number larger than the number of categories
autoHeight: false, // sets subcat containers to be the same height as largest to prevent movement of any panels below it
event: 'click', // change to 'mouseover' if you want the expasion to take place on hover and make top category clickable
collapsible: true, // allow customer to collapse all sections - click on open section collapses it - for event = click only
});
});
</script>
From the Control Panel,
Click on Settings --> Store Settings and choose the Display Settings tab.
Make the Category List Depth setting = 2 or more
One other note: if you want this modification to be independent of version upgrades, create a folder called templates/YOUR_TEMPLATE/javascript and place the '.js' files there. Then in step 2, change the path for the three files to point to the new javascript folder by using %%GLOBAL_TPL_PATH%%....<script type="text/javascript" src="%%GLOBAL_TPL_PATH%%/javascript/jquery-1.3.2.js">
For more information on jquery and the accordion, visit http://jqueryui.com/demos/accordion/