Latest News: (loading..)
kymation

[Addon} Superfish Categories Box

212 posts in this topic

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
docauonline likes this

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

@@kymation

 

got it loaded..works great..everything seems to function properly..just need some help with the styling of the subcategories when they pop out..thank you so much

Share this post


Link to post
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

Share this post


Link to post
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;

}

Share this post


Link to post
Share on other sites

Hope a mod removes the first post

 

wrong css soon have asked ??

 

regards

Joli

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Not sure if you saw the post in my other thread..but i fixed my no arrows problem by getting rid of an old jquery file

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

@@discxpress

Use Firebug in Firefox to find out what styles are applied to each element. It will show you the line number and page to change.

 

Regards

Jim

Share this post


Link to post
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://forums.oscommerce.com/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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

This addon will help you upgrade your jQuery. Don't delete the old jQuery files as they are used by your Admin.

 

Regards

Jim

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now