If you want to get instant help...please click here to submit a ticket [ link ]
We support 7000+ osCommerce add-ons! Affordable, Reliable, Speed on Rails services on customizations of osCommerce shipping, payment, marketing and others.

'Category Box as Nested Unordered List for EZ(er) CSS & Dynamic

for osCommerce Merchant version 2.2


Retail Price: $100.00


Ask a Question About:'Category Box as Nested Unordered List for EZ(er) CSS & Dynamic

06/30/2010 by nate_02631

This contribution is an alternate category box which will output your store's categories as a proper nested unordered list, instead of a collection of non-breaking spaces, quasi-bullets and break tags.

What's the big deal about that you ask? With the categories now output as an unordered list, you can now more easily apply a lot of nifty CSS to turn your category list into a horizontal drop-down or vertical fly-out menu, make it a collapsible menu, easily attach bullets, add cool mouseover effects, or just about anything you can dream up!

The advantage of this technique over pure javascript solutions is that it is much more flexible, easier to apply CSS trickery to, is more search-engine friendly and makes just one query to the database.

Output includes optional CSS class tags to mark categories as selected or as parent cats. You can also choose to render all of your categories (useful for dynamic menus) or to render only the root cats and the selected category tree. Note that this contribution merely provides a foundation for you to construct a more attractive/functional menu by providing a more semantically-correct output. A little CSS-magic is required on your end, though I have included a sample vertical flyout menu CSS. I have included some resources in the readme.

Add All Products Link with Styles

06/30/2010 by btwd

NOT THE FULL PACKAGE

Instructions for adding the ALL PRODUCTS link if installed to the top of your categories menu.

This is just a text doc with simple instructions.

NOT A FULL PACKAGE


Fixed for the "Orange Bubble" Template

06/24/2010 by move_man

FULL PACKED

I have fix for the "Orange Bubble" Template

Demo
http://hoffys-tiershop.de


Version 1.1.3 (ie style bug fix images bug fix)

04/26/2010 by kaczart

I added diffrent stylesheet's for IE browser.

Also found 'display image bug' in li classes: in ul_categories.php line 158:


if (isset($cPath_array) && in_array($key, $cPath_array) && $classname_for_selected) {
$this_cat_class = $classname_for_selected . ' ';
} else {
$this_cat_class = '';
}

$output .= '
  • }

    if (tep_has_category_subcategories($key) && $classname_for_parent) {
    $this_parent_class = ' class="'.$classname_for_parent.'"';
    } else {
    $this_parent_class = '';
    }

    $output .= tep_href_link(FILENAME_DEFAULT, $cPath_new) . '"'.$this_parent_class.'>'.$val;



    should be:

    if (!$level) {
    unset($GLOBALS['cPath_set']);
    $GLOBALS['cPath_set'][0] = $key;
    $cPath_new = 'cPath=' . $key;

    } else {
    $GLOBALS['cPath_set'][$level] = $key;
    $cPath_new = 'cPath=' . implode("_", array_slice($GLOBALS['cPath_set'], 0, ($level+1)));
    }

    $output .= '
  • $output .= $classname_for_parent.' ';
    } else {
    $this_parent_class = '';
    }

    $output .= $this_cat_class . 'cat_lev_'.$level.'">
    '.$val;


    FULL PACKAGE.
    Screenshot included.

  • Closing Tags Fix 2

    02/27/2009 by MickA

    The fix by vampirehunter is incorrect.

    On about line 196, it should read.

    $output .= '
    ';

    Not, $output .= '';

    ul_categories.php file and instructions for fix only.


    Closing Tags Fix

    02/26/2009 by vampirehunter

    This is just a single line fix to the previous contributions ul_categories file.

    The previous contribution does not have the correct closing tags for hyperlinks and lists for the "top level" categories.

    So i fixed this.
    This is simply a replacement file for that previous contributions.


    Version 1.1.2 (Fixed)

    06/10/2008 by irishfreakout

    I fixed a small issue on the last file with multiple classes not separated correctly. I also added a levels identifier for the links, it allowed me to have more fine-tuned control.

    Some CSS tips: you can use the multiple classes to drill down exactly how you want different levels to look. For example, I have the links on level 2 (starts at 0 so 1 is 2) turn red when it is the selected category:
    #nav li.selected.cat_lev_1 a.link_lev_1 { color: red;}
    Note: multiple classes may not work with some older browsers.

    Two Main Fixes:

    1) Incorporated category levels changes from "yourmanstan". His addition broke the Selected/Parent classes, so that's fixed now. I also added the levels to the links themselves.

    2) Moved the category count outside of the link. This is the behavior of the original category box. I liked it better as it gave me more control of modifying how the numbers look.

    If you want to change it back, replace lines 187-191 with this:
    $output .= ' (' . $products_in_category . ')';
    }
    }

    $output .= '';


    Version 1.1.2 (Fixed)

    06/10/2008 by irishfreakout

    Oops. My first one did not incorporate fixes for #1. Now it should work. Note that older browsers may have troubles with the multiple classes for one element.

    Two Main Fixes:

    1) Incorporated category levels changes from "yourmanstan". His addition broke the Selected/Parent classes, so that's fixed now.

    2) Moved the category count outside of the link. This is the behavior of the original category box. I liked it better as it gave me more control of modifying how the numbers look.

    If you want to change it back, replace lines 187-191 with this:
    $output .= ' (' . $products_in_category . ')';
    }
    }

    $output .= '';


    Version 1.1.2

    06/10/2008 by irishfreakout

    Two Main Fixes:

    1) Incorporated category levels changes from "yourmanstan". His addition broke the Selected/Parent classes, so that's fixed now.

    2) Moved the category count outside of the link. This is the behavior of the original category box. I liked it better as it gave me more control of modifying how the numbers look.

    If you want to change it back, replace lines 187-191 with this:
    $output .= ' (' . $products_in_category . ')';
    }
    }

    $output .= '';


    If using CSS

    07/06/2007 by shooter-boy

    I am using a pure CSS layout, and there was an extra DIV that messed the whole layout up.

    If i removed the before_nobox_html and after_nobox_html (two opening and one closing DIV tag) then it works.

    I realise my store is highly modified, I don't have a table in sight. If you are using tables then this likely doesn't affect you at all as the tables will override the div commands if the DIV is nested inside a cell.

    ul_categories.php file only.

    Rob


    updated with category levels

    03/03/2007 by yourmanstan

    made a small change to add the category level to each item


    Version 1.1 Bug fix and extras

    05/02/2006 by nate_02631

    This version fixes a slight bug with respect to closing off the unordered lists in certain situations. I have also added a couple extra config options to allow placement of HTML before and/or after the rendered menu in case it's needed to better flow with your layout.

    A couple of CSS examples have been included. They are fairly lame, but should give you an idea of what is possible. Other, better submissions are welcome in the forums. ;)


    Forum Thread for Contribution

    04/30/2006 by nate_02631

    Ooops - forgot to inclue the forum thread associated with this contribution:

    http://forums.oscommerce.com/index.php?showtopic=207277

    Any feedback, bug reports are welcome, or if you just want to post some cool unordered list menu resources or show off what you've done!


    'Category Box as Nested Unordered List for EZ(er) CSS & Dynamic menus v 1.00

    04/30/2006 by nate_02631

    This contribution is an alternate category box which will output your store's categories as a proper nested unordered list, instead of a collection of non-breaking spaces, quasi-bullets and break tags.

    What's the big deal about that you ask? With the categories now output as an unordered list, you can now more easily apply a lot of nifty CSS to turn your category list into a horizontal drop-down or vertical fly-out menu, make it a collapsible menu, easily attach bullets, add cool mouseover effects, or just about anything you can dream up!

    The advantage of this technique over pure javascript solutions is that it is much more flexible, easier to apply CSS trickery to, is more search-engine friendly and makes just one query to the database.

    Output includes optional CSS class tags to mark categories as selected or as parent cats. You can also choose to render all of your categories (useful for dynamic menus) or to render only the root cats and the selected category tree. Note that this contribution merely provides a foundation for you to construct a more attractive/functional menu by providing a more semantically-correct output. A little CSS-magic is required on your end, though I have included a sample vertical flyout menu CSS. I have included some resources in the readme.


    As experienced osCommerce Experts, we are glad to help you to install this addon. The process is as follow:
    • You placed an order of this addon or other addons, checkout and receive an email notification of order status
    • Or you can contact us directly using email form, asking us to install this addon for you
    • Once you and we have agreed to start, please send us FTP access by email
    • You will be updated of the installation status
    • You may ask for customization jobs of this addon

    You Risk Nothing: No Upfront Payment Required

    Our NO RISK POLICY is clear. You pay only for the successful completion of the installation. If you are not satisfied or we are unsuccessful, your site will be returned to its previous working state and you pay nothing! NOT A PENNY!
    Once you are satisfied with our help, you can pay us through Paypal.

    OUR NO RISK GUARANTEE 1. No upfront payment is required 2. You only pay on successful completion 3. Money Back Guarantee within 90 Days ! You don't get guarantee like this any where else . . . You Don't Risk One Peny!
    Add to Cart:



    Copyright © 2006-2012 www.oscexp.com