Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

[Addon] Categories Accordion Box for 2.3.1


kymation

Recommended Posts

#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

Link to comment
Share on other sites

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

See my profile for a list of my addons and ways to get support.

Link to comment
Share on other sites

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 by rudolfl
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

@@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 by kymation

See my profile for a list of my addons and ways to get support.

Link to comment
Share on other sites

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

See my profile for a list of my addons and ways to get support.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • 2 weeks later...

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.

Link to comment
Share on other sites

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

See my profile for a list of my addons and ways to get support.

Link to comment
Share on other sites

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 by rudolfl
Link to comment
Share on other sites

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 by rudolfl
Link to comment
Share on other sites

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

See my profile for a list of my addons and ways to get support.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

See my profile for a list of my addons and ways to get support.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

@@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 by kymation

See my profile for a list of my addons and ways to get support.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Unfortunately, your content contains terms that we do not allow. Please edit your content to remove the highlighted words below.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...