Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

[Addon} Superfish Categories Box


Recommended Posts

I think the latest migrate fixes the fancy box issue at least for me solved that by placing the latest jquery-migrate-1.2.1.min.js" just below the jquery-ui-1.8.22.min.js

 

if you put below the fancy box the fancy box will break

 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Webwinkel het Varaantje</title>
<base href="http://www.osc-design.com/holland/" />
<link rel="stylesheet" type="text/css" href="ext/jquery/ui/pallets/minified/jquery-ui.min.css" />
<script type="text/javascript" src="ext/jquery/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="ext/jquery/ui/jquery-ui-1.8.22.min.js"></script>
<script type="text/javascript" src="ext/jquery/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript">
// fix jQuery 1.8.0 and jQuery UI 1.8.22 bug with dialog buttons; http://bugs.jqueryui.com/ticket/8484
if ( $.attrFn ) { $.attrFn.text = true; }
</script>
<script type="text/javascript" src="ext/jquery/ui/i18n/jquery.ui.datepicker-nl.js"></script>
<script type="text/javascript">
$.datepicker.setDefaults($.datepicker.regional['nl']);
</script>
<script type="text/javascript" src="ext/jquery/bxGallery/jquery.bxGallery.1.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="ext/jquery/fancybox/jquery.fancybox-1.3.4.css" />
<script type="text/javascript" src="ext/jquery/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="ext/960gs/960_24_col.css" />
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<link rel="stylesheet" type="text/css" href="pallet.css" />
 <script type="text/javascript" src="ext/jquery/superfish/js/jquery.hoverIntent.minified.js"></script>
 <script type="text/javascript" src="ext/jquery/superfish/js/superfish.js"></script>
 <script type="text/javascript" src="ext/jquery/superfish/js/supersubs.js"></script>
 <link rel="stylesheet" media="screen" href="ext/jquery/superfish/css/superfish.css" />
 <link rel="stylesheet" media="screen" href="ext/jquery/superfish/css/superfish-vertical.css">

 <script type="text/javascript">
   jQuery(document).ready(function(){
  jQuery('ul.sf-menu').superfish({
    animation: {height:'show'},   // slide-down effect without fade-in
    delay:	 1200			   // 1.2 second delay on mouseout
  });
   });
 </script>

 

Regards

Joli

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

 

Link to comment
Share on other sites

Nothing to do with superfish works perfectly Fancy Box bugs would be a different topic and probably do not belong in the superfish thread

 

it is a problem with the latest jquery versions read my post above for a possible fix or downgrade the jquery another option the newest fancy box files that works are available on git hub but I believe they are now commercial.

Regards

Joli

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

 

Link to comment
Share on other sites

  • 1 month later...

I'm using the responsive Usemantic CSS Framework, it is like 960gs but grid based on %'s.

Is it possible to have the width of the categories match the full width of the (varying size) column,

I fiddled with the css but couldn't seem to find where that is controlled. I know very little css beyond the basics. I tried adding some class statements but it got messy.

 

I like superfish over categories accordion, but I'm finding it more difficult getting superfish to behave elegantly on the responsive design..

 

Thank you in advance for any advice,

Dave

-Dave

Link to comment
Share on other sites

Thanks!

Just had to change this in superfish.css

.sf-menu li {
/* background: #BDD2FF;  */
*white-space: nowrap; /* no need for Supersubs plugin */
white-space: normal; /* ...unless you support IE7 (let it wrap) */
-webkit-transition: background .2s;
transition: background .2s;
 /*  min-width: 148px; *//* Make the top-level categories fit in the column width */
   width: 100%;  /* for full responsive width */

 

When sized to mobile the category blocks now stack nicely, but if you tap a category the fly out goes off page to the right.

 

Thinking about it, it seems accordion menu is just structured better for narrow screen mobile...back to the dungeon for me and see if I can mobilize this somewhat

 

Thx

-Dave

Link to comment
Share on other sites

  • 4 weeks later...

Hi and thanks for picking up my random query in General Addons :)

 

I have changed the width of the SUperfish menu successfully. I now have the problem of changing the arrow color. Currently I am using the AMY grey template bought from one of the OSC partners and the Supertfish menu bars are very light with white arrows which you cannot really see.

 

I have to say that I really struggle with the way templates / colors work in OSC!!!!!! Any pointers please would be a great help.

 

Thanks

Alan

Edited by Digibooks
Link to comment
Share on other sites

First you need to know the color codes that are used in the amy template. Look for a custom css file or contact the template seller to get the color codes.

next look for the superfish.css file inside the catalog/ext/jquery/superfish/css/ folder. (instead of catalog you might have a different name)

in that file you have to play around with the background color codes and look for the sf-arrows classes.

 

I have to say that I really struggle with the way templates / colors work in OSC!!!!!!

 

It's not so difficult once you get the hang of it. It's basically all css.

 

http://www.w3schools.com/css/default.asp

Edited by Tsimi
Link to comment
Share on other sites

OK - Thanks Tsimi - I'm beginning to get it through trial and error! My understanding of CSS and all these different browsers is clearly not as good as yours :) I have worked out where to change for IE8 and other browsers.

 

Thank you all here on the Superfish add-on topic - finally a group that actually talks to us newbies sensibly :)

Link to comment
Share on other sites

Was just messing about the code below turns my arrows black if pasted to the bottom of superfish css but my stylesheet is a bit custom but will give you an idea only tested with x 1 subcategory

 

.sf-arrows > li > .sf-with-ul:focus:after,

.sf-arrows > li:hover > .sf-with-ul:after,

.sf-arrows > .sfHover > .sf-with-ul:after {

border-top-color: black; /* IE8 fallback colour */

}

 

/* styling for right-facing arrows */

.sf-arrows li .sf-with-ul:after {

margin-top: -5px;

margin-right: -3px;

border-color: transparent;

border-left-color: #000000; /* edit this to suit design (no rgba in IE8) */

}

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

 

Link to comment
Share on other sites

  • 3 months later...

Hi,

 

First off many thanks for this mod - it's something I've been looking for for a long time...

 

I want to add images to the categories in this mod, so far all I have managed is the image name :rolleyes:

 

I've also tried using

tep_db_fetch_array($image)

to no avail

 

 

Can anyone point me in the direction I should be looking

 

Thanks

My store is currently running Phoenix 1.0.3.0

I'm currently working on 1.0.7.2 and hope to get it live before 1.0.8.0 arrives (maybe 🙄 )

I used to have a list of add-ons here but I've found that with the ones that supporters of Phoenix get any other add-ons are not really neccessary

Link to comment
Share on other sites

Which images? If you want the stock category images, you first need to retrieve the image name from the database in the get_subcategories() method:

 

 

          $categories_query_raw = "
            select
              c.categories_id,
              c.parent_id,
              cd.categories_name,
              c.categories_image

 

Then add it to the array:

 

 

              $categories_data[$index] = array (
                'id' => $categories_id,
                'name' => $categories['categories_name'],
                'parent_id' => $categories['parent_id'],
                'path' => $path_string,
                'image' +> $categories['categories_image']
              );

 

Then use that image name in the output. I don't know where in the box you want the image to show, so you will have to figure that out. You will need to add

 

 

            $output .= $category['image'];

 

somewhere in the format_data() method.

 

Regards

Jim

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

Link to comment
Share on other sites

Thank you Jim - I was on  the right track - it was the output that I couldn't get right, I've now done it, I will post the code and a screen capture of how it looks when I reduce the images a littie ;)

My store is currently running Phoenix 1.0.3.0

I'm currently working on 1.0.7.2 and hope to get it live before 1.0.8.0 arrives (maybe 🙄 )

I used to have a list of add-ons here but I've found that with the ones that supporters of Phoenix get any other add-ons are not really neccessary

Link to comment
Share on other sites

As promised:

 

add

c.categories_image

to the select query:

          $categories_query_raw = "

            select

              c.categories_id,

              c.parent_id,

              c.categories_image,

              cd.categories_name



add    

'image' => $categories['categories_image'],

to the array:

            if ($categories_id != 0) {

              $categories_data[$index] = array (

                'id' => $categories_id,

                'name' => $categories['categories_name'],

                'image' => $categories['categories_image'],

                'parent_id' => $categories['parent_id'],

                'path' => $path_string

              );



finally add

$output .= '      <img src="images/' . $category['image'] . '">  ';

before or after the name output

          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;

            }

            

            $output .= '      <a href="' . tep_href_link( FILENAME_DEFAULT, $category['path'], 'NONSSL' ) . '">';

            $output .= '      <img src="images/' . $category['image'] . '">  ';

            $output .= $category['name'];

            $output .= '</a>' . PHP_EOL;

            if( $category['subcat'] !== false ) {

              $output .= $this->format_data( $category['subcat'], true );

            }

            $output .= '    </li>' . PHP_EOL;

          }



The result:

 

ImagedFlyOut.jpg

 

The logos are 30px high while the pics are 180px wide - you have to make the pics all the correct (similar) size

post-192021-0-84505900-1406820335_thumb.jpg

Edited by Xpajun

My store is currently running Phoenix 1.0.3.0

I'm currently working on 1.0.7.2 and hope to get it live before 1.0.8.0 arrives (maybe 🙄 )

I used to have a list of add-ons here but I've found that with the ones that supporters of Phoenix get any other add-ons are not really neccessary

Link to comment
Share on other sites

  • 3 months later...

You can override the theme by adding CSS code to your main /stylesheet.css, or by making changes to the /ext/jquery/superfish/css/superfish.css. There's also this line in the /includes/modules/boxes/bm_categories_superfish.php:

              $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;

You can remove every class starting with ui-state- to remove the jQuery UI styling completely, or replace those classes with your own if you want. Note that some of the spacing/formatting is dependent on those classes.

 

I recommend using Firebug in Firefox to see exactly what styles are applied to each element. You can also make temporary changes to those styles to see what the effect will be.

 

Regards

Jim

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

Link to comment
Share on other sites

  • 2 weeks later...

Hello,

 

I recently had a problem with site security and my SSL certificate as browsers have recently become more strict about this.  The problem was being caused by something on the site calling for jquery-1.9.1.min.js.  I don't know what element was calling on this jquery file.  I still had the file on my site I had just changed it to jquery-1.9.1.min.old after I loaded jquery-1.10.1.min.js.  When I changed it back to .js from .old it fixed my site security issue but now the arrows in my Superfish categories no longer show up.  Any ideas?

Link to comment
Share on other sites

You can only have one version of jQuery in use. Look in your /includes/template_top.php for a line like this:

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

That example shows the version number as 1.11.1. If you have one of those lines with the version number 1.10.1 and one with a version number 1.9.1, delete the line with  1.9.1.

 

Regards

Jim

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

Link to comment
Share on other sites

yeah there is a weird bug there somewhere seen it a few times I believe it is something to do with the positioning of the super fish scripts and css in template-top.php

 

Try first the js then the css and most important

<!-- <script type="text/javascript">
    jQuery(document).ready(function(){
      jQuery('ul.sf-menu').superfish({
        animation: {height:'show'},   // slide-down effect without fade-in
        delay:     1200               // 1.2 second delay on mouseout
      });
    });
  </script>/-->

this is where i think the bug is try swapping positions he should be before most of the other loads best just below

<script type="text/javascript" src="ext/jquery/ui/i18n/jquery.ui.datepicker-<?php echo JQUERY_DATEPICKER_I18N_CODE; ?>.js"></script>
<script type="text/javascript">
$.datepicker.setDefaults($.datepicker.regional['<?php echo JQUERY_DATEPICKER_I18N_CODE; ?>']);
</script>
<?php
  }
?>

well lets know  if you isolate i have 2 virtually identical template-top.php one has arrows one does not only difference is the position of css and scripts.

 

i was moving the css to the top because of page speeds when i lost my arrows :-  got them back though so happy chappy

 

using

 

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

 

myself

 

but that should not make a difference

 

Regards

Joli

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

 

Link to comment
Share on other sites

<script type="text/javascript" src="ext/jquery/bxGallery/jquery.bxGallery.1.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="ext/jquery/fancybox/jquery.fancybox-1.3.4.css" />
<script type="text/javascript" src="ext/jquery/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="ext/960gs/960_24_col.css" />
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
  <script type="text/javascript" src="ext/jquery/superfish/js/jquery.hoverIntent.minified.js"></script>
  <script type="text/javascript" src="ext/jquery/superfish/js/superfish.js"></script>
  <script type="text/javascript" src="ext/jquery/superfish/js/supersubs.js"></script>
  <link rel="stylesheet" media="screen" href="ext/jquery/superfish/css/superfish.css" />
  <link rel="stylesheet" media="screen" href="ext/jquery/superfish/css/superfish-vertical.css">
  <script type="text/javascript">
    jQuery(document).ready(function(){
      jQuery('ul.sf-menu').superfish({
        animation: {height:'show'},   // slide-down effect without fade-in
        delay:     1200               // 1.2 second delay on mouseout
      });
    });
  </script>
<script type="text/javascript" src="ext/jquery/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="ext/jquery/ui/jquery-ui-1.10.3.min.js"></script>
<link rel="stylesheet" type="text/css" href="ext/jquery/ui/custom-theme/jquery-ui-1.10.3.css" />

 

This is the block of code that has the jquery-1.9.1.mis.js line in it.  But this is not in my template_top.php

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