Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

[Addon} Superfish Categories Box


Recommended Posts

This addon provides a Categories box styled with the jQuery Superfish plugin. Top-level categories are listed in the left or right column, and subcategories pop out to the side and down from each category. There is no limit to the number of subcategories or to the number of category levels. See a screenshot for an idea of what it looks like.

 

Thanks to everyone in this thread for the hep, advice, and testing of this Addon.

 

The download is here.

 

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

This will work fine for 2.3 as a horizontal menu with a bit of adjustment in the html to place it nicely in the header.

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

 

The key feature of the above contribution is adapting btwd's conversion of the categories menu to an unordered list http://addons.oscommerce.com/info/4201 to jquery/superfish

Edited by npn2531

Oscommerce site:

 

 

OSC to CSS, http://addons.oscommerce.com/info/7263 -Mail Manager, http://addons.oscommerce.com/info/8120

Link to comment
Share on other sites

first of all i would like to say that i feel like i've been a pain and i'm sorry for that..i've decided that this module is better for my website and have abandoned the accordion box..any tips on setting this up?..i have a custom theme loaded using your theme switcher module

Link to comment
Share on other sites

Hi John;

 

No you have not been a pain we need this addon wait a bit as there will be a few options shortly just an issue with a big bear.

 

regards

Joli

Edited by joli1811
To improve is to change; to be perfect is to change often.

 

Link to comment
Share on other sites

@@jcannaveno

It's easy to install so just try it out. If you like the way it works, then we can help with styling. The top-level categories will use your theme, but the subcategories need to be adjusted in the CSS files.

 

Regards

Jim

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

Link to comment
Share on other sites

ok thank you..please keep me posted..i'm very anxious to load this module..it's what i've wanted my categories to do all along but up until now i have not seen any good modules that will do this..i downloaded the package it's just a little confusing to me as to how to install

Link to comment
Share on other sites

The styles are in catalog/ext/jquery/superfish/css/superfish.css. Use Firebug in Firefox to find the exact line you need to change in that file.

 

Regards

Jim

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

Link to comment
Share on other sites

Hi '

 

AT OWN RISK

 

This is maybe not a clean code because I think a bit of css has to be removed up top but....to custimise the subs add this to bottom

 

/**** OSCOMMECE CUSTOMIZATION *****/

 

/*Optional coloured link when category visited for customer navigation purpose*/

.sf-menu a:visited {

color:#C13100;

}

/* box color for top-level menu items leave empty for your theme OSCOMMERCE to appear text colour comes from theme*/

.sf-menu li {

position: relative;

/* background: #BDD2FF;*/

}

/* background colour first level for menu background when the mouse hovers over 2nd level OSCOMMERCE*/

.sf-menu li:hover, .sf-menu li.sfHover,

.sf-menu li a:focus, .sf-menu li a:hover, .sf-menu li a:active {

background: #FFA500;

outline: 0;

}

/* first level text colour when mouse on second level*/

.sf-menu > li:hover > a, .sf-menu > li.sfHover > a {

color: #ffffff;

}

/* Colour for text first level menu items when the mouse hovers over them OSCOMMERCE*/

.sf-menu li a:hover {

color: #fff !important;

}

/*Background colour 2nd level menu background*/

.sf-menu ul li {

background: #638B47;

}

/*Text colour for 2nd level menu*/

.sf-menu >ul li:hover a, .sf-menu > .sfHover a,

.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active{

color: #FFFbd0;

}

/* Optional text colour on hover 2nd level */

.sf-menu ul li a:hover {

color: #FFF6FB !important;

}

/*Background colour for 2nd level on hover*/

.sf-menu > li li:hover > a, .sf-menu > li li.sfHover > a {

background: #87be61;

}

.sf-menu ul li li {

/* Background colour for 3rd-level menu background */

background: #C23505 ;

}

/*Text colour for 3nd level menu level*/

.sf-menu >ul li:hover a, .sf-menu > .sfHover a,

.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active{

color: #FFFbd0;

}

/*Background colour for 3rd level on hover*/

.sf-menu > ul li li:hover > a, .sf-menu > li li li.sfHover > a {

background: #e33e05;

}

/* Optional text colour on hover 3nd level */

.sf-menu ul li li a:hover {

color: #DCFFF2!important;

}

To improve is to change; to be perfect is to change often.

 

Link to comment
Share on other sites

It's all working great..firebug is an excellent tool that i never knew about..thank you for that..my last issue is that i don't seem to have any arrows..i can see arrows in your screenshot..and i see the section for the arrows in the css file but i'm not sure how to make them show up

Link to comment
Share on other sites

The arrows should show up with the current configuration. I've seen that problem before but still haven't isolated the cause.

 

Regards

Jim

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

Link to comment
Share on other sites

Don't forget to clear the cache when futzing with styling.

I am not a professional webmaster or PHP coder by background or training but I will try to help as best I can.

I remember what it was like when I first started with osC. It can be overwhelming.

However, I strongly recommend considering hiring a professional for extensive site modifications, site cleaning, etc.

There are several good pros here on osCommerce. Look around, you'll figure out who they are.

Link to comment
Share on other sites

Incompatible versions of jQuery and various jQuery plugins can cause all sorts of weird errors. Removing duplicates and upgrading to the latest version will fix a number of problems.

 

You will probably also need to include jQuery Migrate if you are using version 1.9 or later of jQuery. It's available from the jQuery site.

 

Regards

Jim

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

Link to comment
Share on other sites

Superfish categories works fine with my lightly modified 2.3.3. But upgrading jquery has killed my jquery-created buttons (like Cart Contents at the top-right).

 

I see passing references to the problem but no soolution. I think all my jquery refs are now to 1.10 versions and that seems to be the only thing wrong.

 

I'd be grateful for a hint.

 

Toby

Link to comment
Share on other sites

As I mentioned in my previous post, you'll need to add jQuery Migrate to your site. You can get a copy from the jQuery site.

 

If that doesn't help, check that your theme is the same version as your copy of jQuery UI, and that your copy of jQuery is compatible with your jQuery UI.

 

Regards

Jim

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

Link to comment
Share on other sites

@@kymation

I installed this contribution and it's working except I need help with styling. I would like to make the content that lists the categories just as wide as the box header. And I would like to adjust the background colors of the top level categories.

 

Thanks

Edited by discxpress
Link to comment
Share on other sites

@@kymation

I installed this contribution and it's working except I need help with styling. I would like to make the content that lists the categories just as wide as the box header. And I would like to adjust the background colors of the top level categories.

 

Thanks

 

Hi Lecarl,

 

I believe if I understand the question right and memory still working :) in the development phase the

/includes/modules/boxes/bm_categories_superfish.php used the superfish.css for top level categories this was then changed to use the..... jQuery UI theme .....about post #55

 

http://www.oscommerce.com/forums/topic/393249-super-fish-navagation-menu-vertical-superfish/page__st__40

 

As it would be more suitable for most shops so if you downloaded an earlier version

 

and compare and change about line 158 you would be able to use the superfish.css for top level instead of YOUR theme

 

foreach( $data_array as $category ) {

if( $category['parent_id'] == 0 ) {

$output .= ' <li class="sf-menu sf-vertical ui-state-default ui-corner-all" onmouseover="$(\'a#categories\').removeClass(\'ui-state-default\').addClass(\'ui-state-hover ui-state-focus\');" onmouseout="$(\'a#categories\').addClass(\'ui-state-default\').removeClass(\'ui-state-hover ui-state-focus\'">' . PHP_EOL;

} else {

$output .= ' <li class="subcat">' . PHP_EOL;

}

 

need to be careful to compare and merge just the lines as there was a lot of work done later as regards cache etc

have a read of the forum mentioned above and you will understand.

 

regards

Joli

To improve is to change; to be perfect is to change often.

 

Link to comment
Share on other sites

  • 1 month later...

Hi Jim...

Thank you this great contribution. This is what I look for. I really really appreciate your work. I installed this on my site (wahanastore.com), and it works great. But I have some problems.

Before install this add-on, I have also installed product cycle slideshow, PIM-osc slideshow and image zoom. Now they don't work. I guess the problem is caused by jQuery (mine is jquery-1.4.2.min.js). But I don't know how to solve this. I just copy jquery-1.10.1 to catalog/admin/ext/jquery without modify/delete the older version.

You said about jquery-migrate plugin but I don't know how to install this plugin.

I really need your help to fix these. Thank you....

Link to comment
Share on other sites

Thanks for your fast reply, Jim.

I have upgraded the jQuery to 1.10 as you said above. But my problems don't go away.

Here is the script from admin/includes/template_top:

<base href="<?php echo HTTP_SERVER . DIR_WS_ADMIN; ?>" />

<!--[if IE]><script type="text/javascript" src="<?php echo tep_catalog_href_link('ext/flot/excanvas.min.js'); ?>"></script><![endif]-->

<link rel="stylesheet" type="text/css" href="<?php echo tep_catalog_href_link('ext/jquery/ui/redmond/jquery-ui-1.10.3.css'); ?>">

<script type="text/javascript" src="<?php echo tep_catalog_href_link('ext/jquery/jquery-1.10.1.min.js'); ?>"></script>

<script type="text/javascript" src="<?php echo tep_catalog_href_link('ext/jquery/ui/jquery-ui-1.10.3.min.js'); ?>"></script>

 

And here is from includes/template_top:

<meta http-equiv="Content-Type" content="text/html; charset=<?php echo CHARSET; ?>" />

<?php include(DIR_WS_INCLUDES . 'easy_meta_tags.php'); ?>

<title><?php echo tep_output_string_protected($oscTemplate->getTitle()); ?></title>

<base href="<?php echo (($request_type == 'SSL') ? HTTPS_SERVER : HTTP_SERVER) . DIR_WS_CATALOG; ?>" />

<link rel="stylesheet" type="text/css" href="ext/jquery/ui/redmond/jquery-ui-1.10.3.css" />

<script type="text/javascript" src="ext/jquery/jquery-1.10.1.min.js"></script>

<script type="text/javascript" src="ext/jquery/ui/jquery-ui-1.10.3.min.js"></script>

 

What is wrong?

 

Regards,

 

Wicara

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