Accordion Menu R2

Modules, Add-ons and custom code that's more than just a quick hack or Mod.
novista
Confirmed
Confirmed
Posts: 89
Joined: Fri Jul 03, 2009 11:22 pm

Accordion Menu R2

Post by novista »

Hello, I am posting this here first for a your use and for a sanity check. I'd appreciate it if you'd let me know if you see any issues with the documentation. Also, this forum only allows 2 attachments and the accordion will require 3 files. I'll attach the 3rd file in a reply to this post.

==========
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>
and replace it with

Code: Select all

<script type="text/javascript" src="%%GLOBAL_ShopPath%%/javascript/jquery-1.3.2.js"></script>
Place the following code just before "</head>".

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>
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

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/
Attachments
ui.core.js
(13.6 KiB) Downloaded 843 times
ui.accordion.js
(13.15 KiB) Downloaded 807 times
Last edited by novista on Mon Aug 10, 2009 4:21 pm, edited 1 time in total.
Michael Kopel
NovistaWeb.com
novista
Confirmed
Confirmed
Posts: 89
Joined: Fri Jul 03, 2009 11:22 pm

Re: Accordion Menu R2

Post by novista »

The 3rd file is attached....
Attachments
jquery-1.3.2.js
(117.93 KiB) Downloaded 783 times
Michael Kopel
NovistaWeb.com
Martin
Site Admin
Site Admin
Posts: 1854
Joined: Wed Jun 17, 2009 6:30 pm
Location: South Yorkshire UK
Contact:

Re: Accordion Menu R2

Post by Martin »

Just a thought but you could just zip everything up as a single file...

As to the new release and info'... I'll take a look when I get 10 minutes to sit and read properly... cheers...
Painstik
Posts: 122
Joined: Sun Jul 19, 2009 1:19 pm
Location: Croatia

Re: Accordion Menu R2

Post by Painstik »

Deleted post. :D
Last edited by Painstik on Mon Oct 12, 2009 5:15 pm, edited 2 times in total.
Need custom coding for Interspire Shopping Cart? Contact me
Painstik
Posts: 122
Joined: Sun Jul 19, 2009 1:19 pm
Location: Croatia

Re: Accordion Menu R2

Post by Painstik »

Simpler and lighter accordion menu, no need for plugins (ui.accordion.js and ui.core.js)

Activated on Click and endless

Code: Select all

	<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>
Last edited by Painstik on Mon Oct 12, 2009 5:16 pm, edited 2 times in total.
Need custom coding for Interspire Shopping Cart? Contact me
Tony Barnes
Posts: 744
Joined: Thu Jun 18, 2009 8:59 am

Re: Accordion Menu R2

Post by Tony Barnes »

Do you have a working example of this?
Painstik
Posts: 122
Joined: Sun Jul 19, 2009 1:19 pm
Location: Croatia

Re: Accordion Menu R2

Post by Painstik »

No I don't, test it, I recommend 2nd one...
Need custom coding for Interspire Shopping Cart? Contact me
Tony Barnes
Posts: 744
Joined: Thu Jun 18, 2009 8:59 am

Re: Accordion Menu R2

Post by Tony Barnes »

Well, I've just gotten around to updating to 5.0.6, finally managed to get it to work without breaking (turned out there were some odd template issues I was overlooking :evil: ), and I haven't got round to copying over the accordion stuff, so I thought I'd try this.

Damn, simple and effective...

Changed it very slightly - to hover rather than click - this stops you bouncing to a parent category:

Code: Select all

<script type="text/javascript">
function initMenu() {
$('#SideCategoryList ul ul').hide();
$('#SideCategoryList li a').hover(
function() {
$(this).next().slideToggle('normal');
}
);
}
$(document).ready(function() {initMenu();});
</script>
Just dumped it into my Header.html as I already had some changes in there that needed to over ride the master.

Nice work :D
Tony Barnes
Posts: 744
Joined: Thu Jun 18, 2009 8:59 am

Re: Accordion Menu R2

Post by Tony Barnes »

...stop press. This works for categories 3 deep or more it seems :o

Nice, there's a few folk who were very specifically looking for this
Painstik
Posts: 122
Joined: Sun Jul 19, 2009 1:19 pm
Location: Croatia

Re: Accordion Menu R2

Post by Painstik »

I am glad that i helped, I am now experimenting with jquery... it is very easy to do almost everything.

Now I am working on adding class .ActiveCategory (like .ActivePage) so you can manipulate selected category style. I did it with php, but then accordion doesn't work, don't know why...
Need custom coding for Interspire Shopping Cart? Contact me
Post Reply