Accordion Menu R2

[novista]

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 'false' in quotes.

autoHeight: This one is hard to explain in words so best to try it. If you set autoHeight to 'true', the space allocated 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 through deliberate action by the customer. With 'mouseover' it is possible that the customer will expand and collapse the categories by inadvertently mousing-over a category. One important note: If you set this to click, customers will not be able to see any products assigned to the top level category (because click controls the accordion and will not take you to that category). Be sure that you have not products assigned to the top level category.

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', click on an expanded category will do nothing. 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'.

navigation: this is required for IE8 compatibility mode and should be set to 'true'

Installation:

Step 1
Download the following files and place them files in the /javascript folder. Because this forum does not permit attaching a js file, you will need to rename them from .txt to .js.
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
<script type="text/javascript" src="%%GLOBAL_ShopPath%%/javascript/jquery.js"></script>

and replace it with

<script type="text/javascript" src="%%GLOBAL_ShopPath%%/javascript/jquery-1.3.2.js"></script>

Place the following code just before "</head>".

<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: false, // to have all categories collapsed on initial load, set to false
autoHeight: true, // 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
navigation: true // require to support IE8 in compatibility mode
});
});
</script>

Step 4
From the Control Panel, Click on Settings --> Store Settings and choose the Display Settings tab. Make the Category List Depth setting = 2 or more

You can learn more about the jquery accordion here...http://jqueryui.com/demos/accordion/

EDIT - IMPORTANT: There was a problem reported with IE8 in compatibility mode where the accordion would not be activated. The category links still worked, just not using the accordion. To correct this problem, add navigation: true after the collapsible variable in the HTMLHead file. The code above was modified to reflect this change.

EDIT: Changed the original instructions for the active variable -- if you want the page to initially load with all categories to be closed, set the active variable to be 'false' (no quotes).

EDIT Jan 27, 2010: Tested accordion with ISC 5.5.2 and it worked fine. It is no longer necessary to download jquery-1.3.2.js in Step 1 or replace jquery.js with jquery-1.3.2.js as mentioned at the beginning of Step 3. The rest of Step 3 is required.

[swingsetmall]

This is excellent Michael. Thank you for all your hard work.

[mattnz]

Thanks for this. I was also able to get the same effect as this from your previous version, using 'click' instead 'mouseover'.

The only problem I am having is not being able to click on a category that doesn't any sub categories assigned to it. eg. all the categories have to have subcategories. Direct links from a category in the menu dont work. I wonder if there is a way to get around that.

Also anyone know of ways to allow for showing the subcategories of subcategories this way?

[mattnz]

I have noticed a problem with this script, running it in IE 6 , it doesn't work, and displays the following Javascript error

line: 90
char: 4
Error: Expect identifier, string or number
Code: 0

Works fine in IE8, FIrefox, Safari and Chrome, but not in IE6. I don;t know about IE7

[novista]

I'm not seeing any errors in IE. Can you post or PM me your accordion settings in panel.HTMLHead and a link to your site?

[mattnz]

This is the header code below. I can't post the website , as this isn't assigned to it, due to it being a live site. It works fine in IE 8, but when you go into compatibility mode, it breaks. It also does the same thing in IE6. I have tried your old R1 menu in both IE 6 and compatibility mode, and it works fine, so I am not sure what is causing it to break.

<head>
<title>%%Page.WindowTitle%%</title>

<meta http-equiv="Content-Type" content="text/html; charset=%%GLOBAL_CharacterSet%%" />
<meta name="description" content="%%Page.MetaDescription%%" />
<meta name="keywords" content="%%Page.MetaKeywords%%" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="shortcut icon" href="%%GLOBAL_ShopPath%%/favicon.ico" />

<link href="%%GLOBAL_STYLE_PATH%%/%%GLOBAL_SiteColor%%.css" type="text/css" rel="stylesheet" />
<link href="%%GLOBAL_STYLE_PATH%%/styles.css" type="text/css" rel="stylesheet" />
<link href="%%GLOBAL_STYLE_PATH%%/iselector.css" type="text/css" rel="stylesheet" />



<!--[if IE]>
<link rel="stylesheet" type="text/css" href="%%GLOBAL_STYLE_PATH%%/ie.css" />
<![endif]-->

<!-- Tell the browsers about our RSS feeds -->
%%GLOBAL_HeadRSSLinks%%

<!-- Include visitor tracking code (if any) -->
%%GLOBAL_TrackingCode%%

%%GLOBAL_Stylesheets%%

%%GLOBAL_DesignModeStyleSheet%%

<!-- start removed 2009-08-11 --><!--<script type="text/javascript" src="%%GLOBAL_ShopPath%%/javascript/jquery.js"></script>--><!-- end removed 2009-08-11 -->
<!-- start added 2009-08-11 -->
<script type="text/javascript" src="%%GLOBAL_ShopPath%%/javascript/jquery-1.3.2.js"></script><!-- end added 2009-08-11 -->
<script type="text/javascript" src="%%GLOBAL_ShopPath%%/javascript/menudrop.js"></script>
<script type="text/javascript" src="%%GLOBAL_ShopPath%%/javascript/common.js"></script>
<script type="text/javascript" src="%%GLOBAL_ShopPath%%/javascript/iselector.js"></script>

<script type="text/javascript">
//<![CDATA[
config.ShopPath = '%%GLOBAL_ShopPath%%';
config.AppPath = '%%GLOBAL_AppPath%%';

// Ensure that all product lists are the same height
$(document).ready(function() {
if(typeof(DesignMode) != 'undefined') {
return;
}

function setHeight(ele) {
var maxHeight = 0;
$(ele).not('.List').each(function() {
if($(this).height() > maxHeight) {
maxHeight = $(this).height();
}
});
$(ele).css('height', maxHeight);
}

setHeight('.Content .ProductList:not(.List) li .ProductDetails');
setHeight('.Content .ProductList:not(.List) li .ProductPriceRating');
setHeight('.Content .ProductList:not(.List) li');
});
//]]>
</script>

%%GLOBAL_QuickSearchJS%%

%%GLOBAL_RTLStyles%%
<!-- start added 2009-08-11 New Accordian Script-->
<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: 99, // 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>
<!-- end added 2009-08-11 -->
</head>

[novista]

mattnz,

Not sure if you got my PM but I found the issue with IE8 in compatibility mode. Add navigation: true to the accordion variables. That should solve the problem. Thanks for reporting this.

For everyone else, the HTMLHead code in the original post has been edited to show this change. There are no changes required to any of the jquery files.

[mattnz]

Thanks, I didn't see you PM. Yes that all now works perfectly. Thanks for your help.

[overdrive]

nicely done with this mod. I have been looking for something like this.

[steve_mm]

... The only problem I am having is not being able to click on a category that doesn't any sub categories assigned to it. eg. all the categories have to have subcategories. Direct links from a category in the menu dont work. I wonder if there is a way to get around that.

Is this still a problem with the menu, or was it fixed with the IE8 navigation: true variable?

Just curious...

(I haven't yet gotten to playing with this menu script yet.)

Steve

[wizard]

The old menu you could click on a category with no sub and it would show all
of the products. This one does not?

[novista]

If you set the 'event' to be 'mouseover', then the top level category will be clickable and you can see products assigned to it. If you set 'event' to be 'click', then no, you will not be able to see products directly assigned to the top level category because the click event activates the accordion.

[wizard]

If you set the 'event' to be 'mouseover', then the top level category will be clickable and you can see products assigned to it. If you set 'event' to be 'click', then no, you will not be able to see products directly assigned to the top level category because the click event activates the accordion.


-------------------------------

So I can't have my cake and eat it also :(

[novista]

I'll add this to my ever-growing list. No promises but I will look into it next week.

[wizard]

I'll add this to my ever-growing list. No promises but I will look into it next week.


----------------------------------

You Da Man :D

[zibod]

Incredible...it's just working flawlessly....

[novista]

If you set the 'event' to be 'mouseover', then the top level category will be clickable and you can see products assigned to it. If you set 'event' to be 'click', then no, you will not be able to see products directly assigned to the top level category because the click event activates the accordion.

-------------------------------

So I can't have my cake and eat it also

The question is, is it possible to make the top level category link 1) open a new category page and, 2) expand the accordion menu.

I don't see a way to do this. When you click on a category link, a new page is opened using the default state of the menue per your settings in the HTMLHead file. The state of the menu on the previous page is lost.

If I do find a way of accomplishing this, I'll post here.

[mattnz]

The question is, is it possible to make the top level category link 1) open a new category page and, 2) expand the accordion menu.

I don't see a way to do this. When you click on a category link, a new page is opened using the default state of the menue per your settings in the HTMLHead file. The state of the menu on the previous page is lost.

If I do find a way of accomplishing this, I'll post here.

The only way to do it is to have an 'expand' icon (eg a + of > sign) next to the left of the main category menu. Which if you click on the icon, it expands the subcategories, but if you click on the parent category, it will go to that category.

[HomeMediaPros]

I followed instructions and to the letter and it still does not work. I tried everything no luck. Any ideas www.shophomemedia.com

[novista]

I took a copy of your home page and loaded it on my server. I then called my js files and it worked fine http://novistawebdemo.com/hm.html so it has something to do with the js files or the javascript folder. Check the permissions on the js files, at minimum they should be 664. I've not seen this before so I can't say exactly what is going on. If you want me to take a closer look, PM me.

[HomeMediaPros]

Novista,

not only it is not working on my site, the search stopped working as well. I didnt make a backup of HTMLHead file. So I am dead in the watter. The only thing is taht I had R1 of menus in place before. But I did clean that code out.

Please help ....!!!!

[novista]

What version of ISC are you using?

[meules]

Hi,

I can install the menu but strange things are happening :eek: I´m running IE8 and ISC 5.0.6. First of all the menu doesn´t open a categorie without any subcategories. Second the header of my newsletterbox suddenly disappears and show up again when I click a category :confused:

I have read the whole thread and tried different things but still no luck.

Any help greatly appreciated.

[novista]

If you have event set to 'click', then the main category link will only expand the menu, it will not open a category. I am looking in to a possible solution but no promises as to when it will be ready.

Can't say what is happening with your newsletter box but if you want to include a link to your page, I can take a look.

[meules]

If you have event set to 'click', then the main category link will only expand the menu, it will not open a category. I am looking in to a possible solution but no promises as to when it will be ready.

Can't say what is happening with your newsletter box but if you want to include a link to your page, I can take a look.

Novista, you have a PM

[novista]

I've replied, let's take this offline and not clutter the forum. If you still have a question, contact me directly -- michael [at] novistaweb [dot] com.

[aussiemagnets]

Is there a way to make the accordion 'sticky'? i.e. once I open a particular subcategory, that subcategory stays open until I select another.

At the moment, when a customer selects a product from one of the categories in the accordion, the menu reverts back to the default category and closes the category the customer was browsing from. This really stagnates the browsing process and I can see it becoming intensely frustrating.

I imagine this might need to use cookies?

[novista]

If you set Navigation to be true, when you click on a subcategory, the page should open keeping the menu same state. If you are not seeing this, can you tell me which browser you are using?

[aussiemagnets]

If you set Navigation to be true, when you click on a subcategory, the page should open keeping the menu same state. If you are not seeing this, can you tell me which browser you are using?

The page does open keeping the same menu state, but only for categories. If I visit product pages then the menu resorts to the default open state (and hence the category you visited the product from is closed). As far as I know the navigation option will open the menu according to the current page URL, and it does this as expected, but it doesn't persist with keeping the same level open. (I think this is expected behaviour, but I'd like to improve it).

If it helps, I'm on Safari 4.0.3 and Firefox 3.5.2 on Mac.

I think the easiest way to achieve this would be to match location.href with the referring URL...?

(P.S. Great mod, thanks!:D)

[novista]

Good catch, I never noticed that. I think you are right in that it will require a location.href or cookie. I can't take the time to look at it right now but others have asked for modifications as well. I should be able to take a closer look in a few weeks and will post here if I can resolve this and some of the other questions.

[myshop]

Hi

I have found a problem with the shopping cart on sites that have the accordian menu enabled. It causes issues with the checkout and ultimatly stops clients from ordering in a certain situation.

Here is the lowdown.

If your an existing customer (signed in) on a site and you attempt to make a purchsase and proceed to the checkout and then choose the option: "I want to use a new billing address' radio button and then you fill in all the new address details when you click the 'Bill & Ship to this Address' button the page reloads back at the start of the ordering process rather than the ajax code running and the order going to step 3 like it should.

I would agree that this would be a fairly infrequent thing for a customer to do (specify an alternate address when ordering) but it did happen to a client of mine and I can confirm that by removing the accordian code the issue goes away.

Can someone confirm that they also have the same issue.

Note: I created an account on swingsetmall.com and tested the checkout - It appears to be OK. So perhaps the problem only occurs in v4 sites? (swingsetmall.com is v5)

[aussiemagnets]

If your an existing customer (signed in) on a site and you attempt to make a purchsase and proceed to the checkout and then choose the option: "I want to use a new billing address' radio button and then you fill in all the new address details when you click the 'Bill & Ship to this Address' button the page reloads back at the start of the ordering process rather than the ajax code running and the order going to step 3 like it should.


I don't have the same issue, but I'm on 5.0.6.

Easiest fix would be to duplicate your HTMLHead Panel, name it HTMLHeadCheckout, remove the accordion code and then use HTMLHeadCheckout in all your checkout pages. I hope this makes sense?

EDIT: turns out you'll also have to duplicate /includes/display/HTMLHead.php and rename it HTMLHeadCheckout.php if you want to achieve this. There was a bug with our checkout and I thought removing the accordion might fix it, but it hasn't...

Of course, this won't be an option if you need to have the accordion in the checkout. (I've removed everything that doesn't need to be there for the checkout to reduce the risk that someone might click away...).

[tonybarnes]

***Thanks to Painstik for this***

For those of you who haven't seen this, a lightweight bit of code has been done for the accordion. Just drop this into your Header.html file:

<script type="text/javascript">
function initMenu() {
$('#SideCategoryList ul ul').hide();
$('#SideCategoryList li a').hover(
function() {
$(this).next().slideToggle('normal');
}
);
}
$(document).ready(function() {initMenu();});
</script>

It doesn't have to call up the .js files, and more importantly can handle MULTIPLE levels. So no stopping at level 2 anymore :)

[ptt81]

nevermind, it doesn't work with click because it loads the page and reset the navigation

[myshop]

***Thanks to Painstik for this***

For those of you who haven't seen this, a lightweight bit of code has been done for the accordion. Just drop this into your Header.html file:

<script type="text/javascript">
function initMenu() {
$('#SideCategoryList ul ul').hide();
$('#SideCategoryList li a').hover(
function() {
$(this).next().slideToggle('normal');
}
);
}
$(document).ready(function() {initMenu();});
</script>

It doesn't have to call up the .js files, and more importantly can handle MULTIPLE levels. So no stopping at level 2 anymore :)

Hi

So does this need the new version of jquery still?

[wurdz]

can you make it "On Click" instead of "on hover"?

[tonybarnes]

Painstik did another version for clicking:

<script type="text/javascript">
function initMenu() {
$('#SideCategoryList ul ul').hide();
$('#SideCategoryList li a').click(
function() {
var checkElement = $(this).next();
if(checkElement.is('ul')) {
$(this).next().slideToggle('normal');
return false;
}
}
);
}
$(document).ready(function() {initMenu();});
</script>

He originally had the first one set to click, but I swapped out to hover as it loaded the category, this one fixes that. I haven't checked this version as we've had the hover equivalent running for ages now, so don't want to confuse existing customers.

Yes, this uses jquery, but that is already pulled up for other things in ISC I believe.

[myshop]

But does it need the later version of jquery? (i.e a later version than whats included with the cart?)

[mattnz]

Painstik did another version for clicking:

<script type="text/javascript">
function initMenu() {
$('#SideCategoryList ul ul').hide();
$('#SideCategoryList li a').click(
function() {
var checkElement = $(this).next();
if(checkElement.is('ul')) {
$(this).next().slideToggle('normal');
return false;
}
}
);
}
$(document).ready(function() {initMenu();});
</script>

He originally had the first one set to click, but I swapped out to hover as it loaded the category, this one fixes that. I haven't checked this version as we've had the hover equivalent running for ages now, so don't want to confuse existing customers.

Yes, this uses jquery, but that is already pulled up for other things in ISC I believe.

I don't know how you can use the 'hover' version, over the 'click' version. I first set it up as a hover menu, and people found it far too difficult to use, especially when you have got long submenus. It is fine if you navigate the menu by moving the mouse off the menu horizontally, to hide and display the submenus. But most people move their mouse vertically, which makes it impossible to use, especially ifyou are moving 'upwards' up the menu.

[myshop]

I tried the new 'click' version in htmlhead but i got JS errors in IE:

lang is undefined

[mattnz]

I tried the new 'click' version in htmlhead but i got JS errors in IE:

lang is undefined

Mine works fine, but you need to make sure that you are using the new JQuery script, and you are using the original instructions.

Anyone know if it is possible to keep the submenus open after you click on a submenu item, in the page that loads. The original code did this , but this new code doesn't. Ideally it would be good if it worked like this one http://smiggle.co.nz/SM_loadSelectedCatSection.process?RestartFlow=t&Section_Title=Tape#

[myshop]

Thanks - fixed.

[tonybarnes]

For anyone who has done the new variation - move the JS from Header.html to Footer.html as soon as you can.

Whilst in Header.html it knackers the account sign up form, and also lightbox for viewing the product images.

It works fine (as far as I can tell) running in Footer.html

[mattnz]

For anyone who has done the new variation - move the JS from Header.html to Footer.html as soon as you can.

Whilst in Header.html it knackers the account sign up form, and also lightbox for viewing the product images.

It works fine (as far as I can tell) running in Footer.html

That doesn't occur for me, so it is probably isolated to just you?

[tonybarnes]

Could be - but don't know why it would be. Worth a check for all though, as they are not 2 things that I do day to day on our site!

We're running 5.0.6 if that makes a difference

[mattnz]

Could be - but don't know why it would be. Worth a check for all though, as they are not 2 things that I do day to day on our site!

We're running 5.0.6 if that makes a difference

I'm using the same version, using a customisation of the default template, and the customer login and lightbox images work fine. It is possibly the template that you are working form that is conflicting somewhere

[tonybarnes]

Customised default template here too.

Server config? Dunno

[myshop]

Mine seems OK to?

[ckmer]

excellent work Michael

[cinegearstore]

is there any way to adjust the space on categories that don't have as many sub-categories? they all drop down with space at the bottom to match my longest category list.

love this mod!

[cinegearstore]

nevermind, i answered my own question by changing size from true to false like the original post said

[Lipstickandlingerie]

Does anyone know if this or similar scripts can be used to get the same effect for a brands menu

[novista]

If you set your autoHeight to be false, the space allocated to the sub categories will adjust accordingly.

[0utcast]

thank you for this free menu. what a great free addon. would love to give a donation to you if allowed for a great post.

[0utcast]

wondering if a person could make the menu expand a certain category when the page first loads.

right now when the page first loads the menu is closed up until you click a category.

[novista]

Thanks for offering Outcast but not necessary. Happy to put it out there.

[opposites]

we are currently running the original version of your accordion menu as we like the way you can click on the menu link and both load the page, as well as open the accordion.

has there been any development to this new accordion menu that would enable us to keep this functionality?

running the old version has not been a problem for us, until we upgraded our version of interspire to 5.5.2. Since the upgrade, if we put the link in HTML Head for the jquery.accordion.js file, it makes the design mode functionality disappear, I am not sure if this is something in the update causing this, or the javascript file. is anyone else experiencing this?

Any help with the old accordion or if you have a development for the new accordion to enable the click to open the page and accordion, would be great.

Excellent menu though, we've used this for a while on a few sites and its been great.

[novista]

I've not had a chance to test it in 5.5x but will do so this week. What I have noticed is that Interspire has moved to a higher version of jquery.js so it may not be necessary to replace that code in the HTMLHead file and use the jquery file I attached in the original post.

I'll be back in a days on this.

[novista]

Just ran a quick test of the accordion and 5.5.2 and it worked fine.

[dave_finlayson]

Thanks for the menu, works perfectly (so far as I can see) in 5.5.2.

Was there any 'fix' for the menu closing on product pages? Whilst I love the menu I'm not sure if we can use it if it doesn't remember where it was when you click out of sections!

[novista]

Thanks for the menu, works perfectly (so far as I can see) in 5.5.2.

Was there any 'fix' for the menu closing on product pages? Whilst I love the menu I'm not sure if we can use it if it doesn't remember where it was when you click out of sections!

Sorry, nothing that keeps the status of the menu.

[latifbaih]

Great work Michael,

I've used your menu on 2 sites so far and I don't have any issue with any of them...

However with the new cart 5.5.2, the menu doesn't work... I thought the template, since it was one of the new ones. I tried it with the default template (blue theme) and still doesn't work... I have no idea what am I missing...

The display store settings were adjusted, did check the path...

I tried both ways, uploading the jquery1.3.2 and calling it and not even using the 1.3.2 and working with the latest jquery that comes with 5.5.2 as you mentioned...

Do I need to update the ui.core and ui.accordion files? I'm using the old ones that were in your earlier thread...

Please help!

[ian@azendi.com]

Laitifbaih

When I upgraded to 5.52, I found that the Category List Depth on the settings>display page had reverted to 1. Setting it to 2 got the accordion menu working again.

[latifbaih]

Thanks Ian,

I've adjusted the category list depth to more than one, I had it first as 10 and I used number 2 as I thought it could be the magic number but no luck...

[novista]

latifbaih,

Just tested again using 5.5.2 with the default template and it seems to work ok. If you want to post or PM me with your URL, I can see if there is anything obvious.

[latifbaih]

I've sent your a private message...

[cupargarden]

This would be the perfect solution if it could be adapted, like Dave said, to show the 'history' - so if you only want to show a category list depth of 2, when you go through the sub-sections, the top section is still expanded throughout, as long as you are in that section or its child.

I would consider this as paid work - if it is a job you are able and willing to take on, please PM me :)