[Addon] Categories Accordion Box for 2.3.1

[surrfman]

#categoriesMenu {

 

 

background: url("images/category_button.png") repeat-x scroll 50% 50% transparent !important;

border: 1px solid #699859;

font-size: 14px;

font-weight: bold;

 

this is what firebug shows in it's window, not sure where the transparent is coming from though

[♥kymation]

Firebug (and Firefox itself) will add in missing elements. Try using just

background-image:url('images/category_button.png !important');

and see if that works. If not, you may have to use something more specific than #categoriesMenu.

 

Regards

Jim

[rudolfl]

Hi,

 

Trying to install on "virgin" 2.3.3

1. Latest release is missing file icon_select.php I had to use one from previous release. This removes the error about missing file. (btw, ins tructions for this file are missing from readme as well).

2. Layout is all screwed up. Instead of being contained in the box, menu takes up whole screen.

3. Admin page. Drop down boxes for icon selection are empty.

 

osCommerce 2.3.3. Browser Chrome and Firefox on Ubuntu 12.04

 

I am mainly concerned about point 2. Any ideas?

 

Thanks,

Rudolf

 

P.S. Quick look reveals that somehow accordion box inserts itself OUTSIDE of left column. Basically, accordion box closes <div> of left column and then places itself there. Then it is taking whole page.

Edited November 29, 2012 by rudolfl

[rudolfl]

I think, I found the problem.

bm_categories_accordion.php

Line 239:

 

$data = ' </div>' . PHP_EOL;

$data .= $categories_string . PHP_EOL;

 

Replace with:

$data = $categories_string . PHP_EOL;

$data .= ' </div>' . PHP_EOL;

 

Basically, only put closing </div> AFTER you output the category, not before.

 

I still have an issue where last menu item shows some Javascript code:

$(function() { $( "#categoriesMenu" ).accordion({ autoHeight: false, icons: { 'header': 'ui-icon-plus', 'headerSelected': 'ui-icon-minus' }, active: 4 }); });

 

This is what appears on the last menu item.

 

And a question/suggestion.

If category does not have subcategories, it should not have '+' next to it. Also, clicking on it, should not open up an empty submenu.

 

Rudolf

[surrfman]

Jim... no good.

 

Would it possible to add this line to the jquery.css file, how would bm_categories_accordian.php understand and comply?:

 

.ui-state-default c, .ui-widget-content .ui-state-default c, .ui-widget-header .ui-state-default c { border: 1px solid #777777; background: #000000 url(images/ui-bg_inset-soft_75_000000_1x100.png) 50% 50% repeat-x; font-weight: normal; color: #ffffff; }

 

added a "c" to the .ui-state-default where they appear.

 

I got to thinking, if I knew what the heck I was really doing, and I really don't! it would be a neat feature of the accordian contribution, to be able to inherit the styles, of say, the box headers, or even if there was some way when the contribution is set to true, in the admin, you could set the color/style of the accordian button by specifying a link to an image. Would it be difficult to make it so?

 

To me just seems cleaner, and possibly less confusing to have the column buttons not match the other buttons found throughout the store, as most other buttons deal with navigating to the payment grab.

 

 

Thanks a bunch for your help,

 

 

Timmy C

[♥kymation]

@@surrfman

There is no <c> tag in HTML, so that would do nothing.

 

The whole point of the jQuery system is to present a unified design for the entire site. You're trying to do something completely different. Maybe you should stop and think about that.

 

Regards

Jim

Edited November 29, 2012 by kymation

[♥kymation]

@@rudolfl

1. That file is no longer used, so it should not be required. I'll take a look at this.

 

2. That's possibly another bug. I'll take a look at it. Your proposed solution is causing other problems, including the presentation errors. Don't do that.

 

3. The catalog/ext/jquery/ui/icons.txt is missing.

 

The + icon only means that the category can be expanded, not that there are more subcategories underneath. Change the icon if this displeases you. Eliminating the content box would mean overriding the jQuery UI Accordion widget that this addon uses. It should be possible, but would be a lot of additional code. Don't count on me ever getting the time to do this.

 

Regards

Jim

[rudolfl]

Hi, Jim,

Thank you for your response.

 

1. Regarding icons.txt file -- there is a small bug in bm_categories_accordion.php.

Line 299.

$file = '/ext/jquery/ui/icons.txt';

 

Should be:

$file = DIR_FS_CATALOG . '/ext/jquery/ui/icons.txt';

 

2. Regarding my fix for visual appearance -- this was something I quickly tried later at night. It is not a proper fix as I found. Seems that code emits extra </div> before it outputs any categories. With my fix, this is gone, but extra </div> appears at the end, causing some JS code to appear as part of menu.

 

3. Regarding appearance of categories without subcategories -- I'll try to look at it when I have chance. You are right -- it may be not as easy to implement.

 

Thanks,

Rudolf

[CGhoST]

Has anyone got this contributon working properly?

 

I cant seem to understand how to do it.

 

I copied the missing file and fixed the icons.txt location.

 

The whole menu is going accross the screen rather than being inside the left box.

 

Could someone please show how to get this contribution working on v2.3.3.

[♥kymation]

This works correctly on my test store. Perhaps the upload is corrupted? Try installing the previous version and let me know if that works.

 

Regards

Jim

[rudolfl]

OK, got it working. Almost to my liking too.

Submitted fix to:

http://addons.oscommerce.com/info/7847

 

What I also want/plan to do in the near future:

-- Do not expand categories that are without sub-categories. Should be relatively simple -- those empty spaces are caused by empty <div> after <h3>. I also want to remove '+' for those categories.

-- If user goes back to home page, all categories should show as non-active. In my case, for some reason, first one is set as active

-- Links. Are there any reason all links are set to "#" and actual link is set in the onclick()? I think, for SEO puproses, actual link should be used instead of '#'.

-- Styling of subcategories display should be improved. (Once user expands category that has subcategories)

 

Rudolf

Edited December 11, 2012 by rudolfl

[rudolfl]

Has anyone got this contributon working properly?

 

I cant seem to understand how to do it.

 

I copied the missing file and fixed the icons.txt location.

 

The whole menu is going across the screen rather than being inside the left box.

 

Could someone please show how to get this contribution working on v2.3.3.

 

Files are not missing -- there is an include for file that is not required.

As for layout -- I fixed it (I think, I did)

 

Just uploaded file with fix to the contribution:

http://addons.oscommerce.com/info/7847

 

Rudolf

Edited December 11, 2012 by rudolfl

[♥kymation]

What I also want/plan to do in the near future:

-- Do not expand categories that are without sub-categories. Should be relatively simple -- those empty spaces are caused by empty <div> after <h3>. I also want to remove '+' for those categories.

-- If user goes back to home page, all categories should show as non-active. In my case, for some reason, first one is set as active

-- Links. Are there any reason all links are set to "#" and actual link is set in the onclick()? I think, for SEO puproses, actual link should be used instead of '#'.

-- Styling of subcategories display should be improved. (Once user expands category that has subcategories)

 

Rudolf

 

1. Not all that simple. The structure is required by the Accordion widget in the jQuery UI. Missing one of those in the middle may make the rest of the subcategory lists shift up one. You'll probably have to do some fancy jQuery class replacements to hide one.

 

2. That shouldn't happen. Did you change some of the jQuery settings in the widget? Changing the collapsible setting would do that.

 

3. The jQuery function is tied to the #. You could probably make it work for some other character, but not for full links. The major search engines will find links in Javascript anyway, so it shouldn't be that bad. You should probably have some other form of link as well, like a sitemap.

 

4. That should be fairly simple.

 

Regards

Jim

[rudolfl]

Yes, Jim, you are right

 

Removing empty <div>s did not help. Worked when I removed them in Chrome development tools, but not when I modified the code to generate the layout

Back to drawing board :-(

 

Rudolf

[CGhoST]

I just replaced that file and now i get the following error:

 

1054 - Unknown column 'c.retail' in 'where clause'

 

select c.categories_id, cd.categories_name, c.parent_id from categories c join categories_description cd on (cd.categories_id = c.categories_id) where c.parent_id = '0' and cd.language_id='1' and c.retail = '1' order by sort_order, cd.categories_name

 

[TEP STOP

 

I am guessing its looking for c.retail in database. Removing it should fix it. Have to have dinner so try when i get back unless i am wrong

[rudolfl]

Yes,

Sorry about that. Should of tested it on virgin install. I am converting my site from MS2 to 2.3.3 and had code to separate retail and wholesale catalog.

Removing it should work.

 

Rudolf

[CGhoST]

Yes it worked.

 

Great work.

 

Thank you.

 

Is it possible to put the menu inside an infobox or does it stay open like that?

[CGhoST]

Is it possible to put mouseover functionality to this contribution? When the mouse hovers over a categorie it opens down rather clicking the category and the whole page refreshes to that category.

[♥kymation]

Yes. Probably should make that an Admin select. For now, find this code in catalog/includes/modules/boxes/bm_categories_accordion.php:

 

 $categories_string .= ' autoHeight: false,' . PHP_EOL;
$categories_string .= ' icons: {' . PHP_EOL;
$categories_string .= " 'header': 'ui-icon-" . MODULE_BOXES_CATEGORIES_ACCORDION_ICON . "'," . PHP_EOL;
$categories_string .= " 'headerSelected': 'ui-icon-" . MODULE_BOXES_CATEGORIES_ACCORDION_ICON_SELECTED . "'" . PHP_EOL;
$categories_string .= ' },' . PHP_EOL;
$categories_string .= ' active: ' . $category_active_id . PHP_EOL;

 

and replace the last line of that with:

 

$categories_string .= ' active: ' . $category_active_id . ',' . PHP_EOL;
$categories_string .= ' event: "mouseover"' . PHP_EOL;

 

Regards

Jim

[rudolfl]

I tried your mouseover trick -- does not quite work as expected.

If category has a subcategory, it does not expand. Basically, each menu item expands into empty box on mouseover

 

But I like the idea -- will try to expand on it.

 

Rudolf

[rudolfl]

I still have the problem where first category is selected when on index page of the site.

To fix, find line (in catalog/includes/modules/boxes/bm_categories_accordion.php)

$category_active_id = 'false';

 

and replace with;

$category_active_id = 0xFFFFFFFF;

 

I am not 100% sure how it happens in JS, but in other languages, numeric code of 'false' is 0, so first category was selected by default. I set it to the really large number instead.

 

Rudolf

[♥kymation]

@@rudolfl Oops. Yes, that changed the Accordion behavior, but the code that loads the subcategory/product list is separate. Find this code in the same file:

 

 $categories_string .= ' onclick="location.href=\'';

 

and change that to

 

 $categories_string .= ' onmouseover="location.href=\'';

 

For your other problem, that is not the correct fix. $category_active_id = 'false'; sets the variable to the text string "false", not to a number. That should set the active ID in the Javascript to that text value, turning off the expansion of any elements. While setting it to a number that will never exist should also work, I cannot explain why the text value does not perform as advertised.

 

Regards

Jim

Edited December 12, 2012 by kymation

[rudolfl]

Thanks, Jim,

 

That worked, but not the way expected -- as you hover through menu, page is changing to that category.

The idea is to just expand the menu and not to change to it until clicked.

 

Rudolf

[♥kymation]

That's not going to be easy. Let me think about it.

 

Regards

Jim

[CGhoST]

Everything seems to be working now but there is a problem with the mouseover.

 

As rudolfl mentioned it would be more practical if the the page did not refresh to the category under the mouse.

 

Also if you see when you have the mouse just hovering on top of the category the page just keeps refreshing non-stop unless you take the mouse of the category.

 

I have also observed that if you put the mouse on the first category (hardware), then move down the mouse to second category (software) it will open category gadgets because the menu is scrolling under the mouse so its taking the last category that goes under the mouse.

 

Can there be a time on the mouseover or slow it down from changing categories instantly please?