[Addon] Categories Accordion Box for 2.3.1

[♥kymation]

@@Gothiceveryday:

Read the theme install instructions, or just use Theme Switcher.

 

@@Ninety-one Maro:

1. Same answer as above.

2. This Addon only styles the top-level categories. Making the subcategories look the same as the top-level would be too confusing. You can change the subcategories yourself using CSS if you want a different look.

3. No, that's a limitation of the jQuery UI. Perhaps a future version will allow that.

 

Regards

Jim

[ErikMM]

Hello,

 

Is there a way so when you click on a category link it doesnt load the page but just expands (For example: you click on the "Hardware" link on the navbar while on index.php and it expands the category but still stays on index.php instead of going to the category list page)

 

 

Thank you

Hi Frank,

 

I was looking for the same request and I found this very good solution:

http://mjawaid.wordpress.com/2011/12/05/displaying-all-categories-and-sub-categories-in-category-box-in-oscommerce/

 

I think that this is very important property for this contribution.

 

This really does not answer the dilemma.

 

The issue is, when you hit a category in the menu, it should only expand the category tree, and not load a page with the sub categories images and links. So, if there is a sub category titled "phones" for example, when you click phones, the tree would simply expand, and not jump/open a page with all the phone sub cat images and links.

 

I have not found any solutions except these which are close, but not actual solutions to stop the action:

 

http://www.oscommerce.com/forums/topic/385053-link-a-category-directly-to-product-page-231/page__p__1627616__hl__bm_categories__fromsearch__1

 

http://www.oscommerce.com/forums/topic/308605-modifying-sub-category-image-text-links/

 

http://www.oscommerce.com/forums/topic/101063-change-category-layout/

 

http://www.oscommerce.com/forums/topic/296984-customize-category-links/

 

http://www.oscommerce.com/forums/topic/376323-product-in-categories-box-231/

 

btw to remove numbers if they are ojn your menu: http://www.oscommerce.com/forums/topic/282924-removing-category-numbers/page__hl__removing+numbers+from+menu__fromsearch__1

Edited March 29, 2012 by ErikMM

[♥kymation]

@@ErikMM -- That is contrary to the way osCommerce is designed to work. I'm not saying that you can't change that operation, just be aware that you are breaking new territory.

 

So, if you succeed in doing what you want, a customer will never see any of the top-level category listings. The only way to see what is in those categories will be the list in the accordion menu. Do I understand this correctly?

 

Regards

Jim

[ErikMM]

@@ErikMM -- That is contrary to the way osCommerce is designed to work. I'm not saying that you can't change that operation, just be aware that you are breaking new territory.

 

So, if you succeed in doing what you want, a customer will never see any of the top-level category listings. The only way to see what is in those categories will be the list in the accordion menu. Do I understand this correctly?

 

Regards

Jim

 

yes, and I realize the situation you allude to

 

its just that sometimes there is no need for a top level except in name only-- to me its redunadnt and bothersome, the top level strictly serves as a name with which to group the subs below it...its too much surfing for me

 

I went to great lenghts to create a menu sprite in lieu of the tree just to avoid this annoyning situation

Edited March 29, 2012 by ErikMM

[ErikMM]

another issue I'm sure others have is: adding a link in the tree that is not a sub category or a product, but a page like contact, or about or....whatever...a page that is for information or...not something for sale or part of the catalog

 

I created a sperate box for these items, but wouln't mind adding it to the tree itself.

 

I am still using a sprite menu because both the issues I describe above are the only reason I don't want to use the tree.

 

There is one more issue: there is no way to turn off subcategiories from showing up in the tree. We can turn off products from showing, but not subcategories, even if we empty it of products or turn off all the products. There are some sub cats w/ products I built and want to save for later etc., rather than delete them, but this can't be done with the tree. One sloution is to move the products to another category and turn them off there...just saying. This solution is probably easier than building code to not show a subcategory in the tree, unless its loaded with 1,000 products. If I want to use/sell the products again, I can just create a new category or subcategory and move the products back from hiding in the new sub I create....again, just saying.

 

and, Thanks, btw

Edited March 29, 2012 by ErikMM

[♥kymation]

I haven't tested this, but it should work All code in catalog/includes/modules/boxes/bm_categories_accordion.php. First, find these lines:

 

		$categories_string .= ' onclick="location.href=\'';
	$categories_string .= tep_href_link( FILENAME_DEFAULT, $cPath_new );
	$categories_string .= '\';"';

 

and comment them out. That should prevent the top-level categories from opening the categories page.

 

To add static links to the box, find this code:

 

		$categories_string .= '<script type="text/javascript">' . PHP_EOL;
	$categories_string .= '  $(function() {' . PHP_EOL;
	$categories_string .= '	$( "#categoriesMenu" ).accordion({' . PHP_EOL;

 

and just above it add this code:

 

		$bm_box_group = array(
	  'heading' => BOX_HEADING_CATEGORIES,
	  'apps' => array(
		array(
		  'code' => FILENAME_SPECIALS,
		  'title' => BOX_HEADING_SPECIALS,
		  'link' => tep_href_link(FILENAME_SPECIALS)
		),
		array(
		  'code' => FILENAME_NEW_PRODUCTS,
		  'title' => BOX_HEADING_WHATS_NEW,
		  'link' => tep_href_link(FILENAME_NEW_PRODUCTS)
		),
		array(
		  'code' => FILENAME_RELATED_PRODUCTS,
		  'title' => BOX_TEXT_RELATED,
		  'link' => tep_href_link(FILENAME_RELATED_PRODUCTS)
		)
	  )
	);
	$categories_string .= '	</div>' . PHP_EOL;
	// Add static links for each of the above arrays
	foreach( $bm_box_group['apps'] as $box_group ) {
	  $category_count++;
	  $categories_string .= '	  <h3';
	  if ( basename( $PHP_SELF ) == $box_group['code'] ) {
		$category_active_id = $category_count - 1;
	  } else {
		$categories_string .= ' onclick="location.href=\'';
		$categories_string .= $box_group['link'];
		$categories_string .= '\';"';
	  }
	  $categories_string .= '>';
	  $categories_string .= '<a href="#">';
	  $categories_string .= $box_group['title'];
	  $categories_string .= '</a>';
	  $categories_string .= '</h3>' . PHP_EOL;
	  $categories_string .= '	<div>' . PHP_EOL;
	  $categories_string .= '	</div>' . PHP_EOL;
	}

 

Change the array in the above code to add the links that you want.

 

Finally, you can hide subcategories by using any of several Addons to hide categories. Just make the modifications to the accordion box that you would normally make to the regular categories box.

 

Regards

Jim

Edited March 29, 2012 by kymation

[ErikMM]

:thumbsup:

 

many thanks! I'm sure others have had the same issue...

[ErikMM]

First I commented out as you told me

 

This didn't do any 'damage', but all the sub links dissapeared

 

So far so good, I think, except that all the sub links were gone.

 

I thought the next step would take care of that. But when I pasted the other code above as stated, and all the other box modules dissapeared from the control panel.

Edited March 29, 2012 by ErikMM

[♥kymation]

The first block of code is in a section that applies to top-level categories only. Changing that will not change the lower-level categories. The second block of code was copied from a working accordion box. There are other changes in that box, so you may need to do some adjustments.

 

Sorry, but I don't have any time to work on this right now. You'll need to do some debugging yourself.

 

Regards

Jim

[♥kymation]

I've uploaded a new release to the Addons area. This fixes the bug in Internet Explorer 7 and 8 (and possibly 6, but I haven't tested that.) The instructions have also been updated.

 

I recommend that everyone who is using this Addon should update. The only file that you need to replace is catalog/includes/modules/boxes/bm_categories_accordion.php. There is no need to uninstall; just replace the file.

 

Regards

Jim

[peterpetranin]

@@kymation first all great addon, secondly could you discribe a little bit more how to change a look/ make this work for other boxes..?? you already mentioned something on page 3 with @@BretSpark, but for a newbie like me it is not sufficient information.

 

Thankx

[♥kymation]

The look can be changed with Themeroller -- see the instructions for a complete description.

 

Applying the accordion format to another box will require recoding the box. The amount of work needed would depend on the box. This will require a working knowledge of HTML, CSS, and PHP. In any case, that's more than I can address in a forum topic.

 

Regards

Jim

[al3ks]

@@kymation I have insalled this addon following the instructions step by step in the pdf doc, but nothing changed. Nothing changed on the site neither in the admin panel, or I am missing something?

 

(Btw I'm using 2.3.1)

Edited April 9, 2012 by al3ks

[♥kymation]

The module would have to show in the Admin for you to finish the install instructions (section 3.2). Does it show up there or not?

 

Regards

Jim

[al3ks]

Ok, I found the module categories accordion in the insatall area but When I click it nothing happens, there are 3 different addons there but nothing happens when I click any of them.

[♥kymation]

I suggest that you read the section of the osCommerce instructions dealing with modules. I don't have the time to retype the instructions here for you.

 

Regards

Jim

[surrfman]

Jim... Spoke with you a while back. Any chance the loading problem might have gotten fixed? I really love the jquery buttons, but load time/ flashing the links adds a degree of unappeal to a customer. I turned the module off for now.

 

I did try to install the march 31 update, replacing just the module file. result was the triangle icons in the button parked on top of the text. Didn't see an extras directory, didn't touch the extras/ssl file; bet I should have thought that one out!

 

Thanks man,

 

Timmy C

[♥kymation]

The mis-alignment of the icons (and sometimes the jQuery buttons as well) was caused by a bug in the module code. Replacing the module with the latest version should fix this. The only other cause that I know of is only seen when running an older (< v9) version of Internet Explorer in compatibility mode. That can usually be fixed by adding this line somewhere in the head section of includes/template_top.php:

 

<meta http-equiv="X-UA-Compatible" content="IE=Edge" />

 

While Microsoft states that this will always work, some people have said that it doesn't always override the user's settings. Since the Compatibility Mode button is right next to the Reload button, and most people don't know what Compatibility Mode does, I've found this is sometimes turned on by accident.

 

Regards

Jim

[peterpetranin]

Hi, after installing Categories Accordion Box which works fine for me, would just need to change an order. I am getting in box first: picture, then name, price, buy now.. And i would need name first. Tried to find a code in bm_categories_accordion relating to my problem but unsuccessfully..

[♥kymation]

It sounds like you're describing the Product Listing. That has nothing to do with the Accordion module. Check the instructions that came with your copy of osCommerce; that will tell you how to change the column order.

 

Regards

Jim

[mpalasis]

@@kymation

I *think* this change in the default code needs to be made to make the site search-engine searchable with an accordion menu:

 

~around line 68 in bm_categories_accordion.php, change

'<a href="#">'

to

'<a href="' . tep_href_link(FILENAME_DEFAULT, $cPath_new) . '">'

 

the accordion-animation effect still occurs, before the new page is loaded.

 

I've made this change because I'm quite unsure on wether or not search engine bots will follow

onclick="..."

javascript events, but they will certainly follow

<a href="...">

 

That's it for now... for later tho, I'm also planning to find (or try implementing) a pre-loaded accordion menu (as in, all categories pre-loaded. Like it is on the admin side... no reload, just hide/show already loaded menu items.) like what FrankCRFG and ErikMM described in an earlier post.

 

Has someone done that and has a code sample to share? or should I dig in? ;)

 

cheers

[♥kymation]

Test that code thoroughly before you rely on it. The Accordion effect is supposed to trigger on the #, so it's a bit odd that it works without that. Still, if it works, that would be a better implementation.

 

Search engines are supposed to follow links in Javascript, so long as the link has a recognizable form. I normally add a text link navigation box to the footer of sites that use this box. This helps with the few customers who have Javascript turned off, and gives the search engines some extra links to play with.

 

Pre-loading the subcategories is on my list of things to do, along with AJAX loading the category page at the same time. I don't know when I would get to this, if ever. There's a Categories menu in the Addons that allows second-level categories to be shown by default. I don't remember the name, but it was one of the old 2.2 Addons. You could probably use the code from that as a base.

 

Regards

Jim

[mpalasis]

correction for my previous post's change: the accord effect: stays the same in chrome and firefox. But it disappears in opera and doesn't quite make it in safari.

[♥kymation]

That's a bit odd considering that Safari and Chrome both use the Webkit rendering engine. Different versions perhaps? In any case, it appears that this change doesn't quite work. I think I'll stay with stock jQuery code.

 

Regards

Jim

[mpalasis]

@@kymation

 

OK, I went and edited this to:

• Pre-load sub-categories (up to depth 1)
  
• Actually have a true accordion menu (as in: no page reload. relies on #1)
  
• Also pre-load the trail of parent/child-categories in the cPath.
  

The result has, IMHO, smoother construction logic in the code. It also fixes on an issue the original code has with categories of level 2 and higher... but that's just a side-effect of the new logic. ^_^

 

Sample snapshot showing category depth 5.

 

http://dm.8mydog.com/src/PHP/osc2.3.1/snapshot_bm_categories_accordion.png

...

Code: bm_categories.php v1.03 20120511 (also on pastebin.com)

 

(!) Two points in the code that merit customization:

~line 127 ' class="ui-priority-primary"' . // Optional: this makes top menu elements be bold.

and

~line 154: 'padding-top:0.2em; padding-bottom: 0.2em;">' .

 

 

Please feel free to audit/tweak the code, and add it to your contribution if you wish.

 

Cheers

 

 

TODO: Move the styling in the children elements to a style-sheet. Make the accordion "Close-able".

Edited May 11, 2012 by mpalasis