Shopping Cart Community

Posted: **Fri Aug 07, 2009 11:59 am**

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/

Posted: **Fri Aug 07, 2009 12:00 pm**

The 3rd file is attached....

Posted: **Fri Aug 07, 2009 10:45 pm**

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

Posted: **Mon Oct 12, 2009 1:16 pm**

Deleted post.

Posted: **Mon Oct 12, 2009 1:27 pm**

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>

Posted: **Mon Oct 12, 2009 2:46 pm**

Do you have a working example of this?

Posted: **Mon Oct 12, 2009 3:08 pm**

No I don't, test it, I recommend 2nd one...

Posted: **Mon Oct 12, 2009 4:28 pm**

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

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

Posted: **Mon Oct 12, 2009 4:31 pm**

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

Nice, there's a few folk who were very specifically looking for this

Posted: **Mon Oct 12, 2009 4:41 pm**

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

Shopping Cart Community

Accordion Menu R2

Accordion Menu R2

Re: Accordion Menu R2

Re: Accordion Menu R2

Re: Accordion Menu R2

Re: Accordion Menu R2

Re: Accordion Menu R2

Re: Accordion Menu R2

Re: Accordion Menu R2

Re: Accordion Menu R2

Re: Accordion Menu R2