Two Minute Menu ...

[burt]

 

Please note that this is not the absolute best way to do things, but is an example of a quick way to make the standard menu look "different".  Done the proper way would involve creating a copy of the bm_categories box, template file and language file, renaming some stuff, then amending it.  As I don't have time to do all that, this little tutorial will have to do and maybe someone can read between the lines and create an addon out of it.

 

Step 1.  Find a nice menu, something a bit out of the ordinary.

http://bootsnipp.com/snippets/featured/bootstrap-30-treeview

 

Step 2.  Open up /includes/modules/boxes/bm_categories.php

 

Find:

$OSCOM_CategoryTree = new category_tree();
$OSCOM_CategoryTree->setCategoryPath($cPath, '<strong>', '</strong>');
$OSCOM_CategoryTree->setSpacerString('  ', 1);
 
$OSCOM_CategoryTree->setParentGroupString('<ul class="nav nav-pills nav-stacked">', '</ul>', true);

Change to:

$OSCOM_CategoryTree = new category_tree();
$OSCOM_CategoryTree->setParentGroupString('<ul>', '</ul>', false);

Step 3.  Open up /includes/modules/boxes/templates/categories.php

 

Find:

<div class="panel-body"><?php echo $category_tree; ?></div>

Change to:

<ul id="tree"><?php echo $category_tree; ?></ul>

Add below everything in that same file:

<script>
$.fn.extend({
    treed: function (o) {
 
      var openedClass = 'glyphicon-minus-sign';
      var closedClass = 'glyphicon-plus-sign';
 
      if (typeof o != 'undefined'){
        if (typeof o.openedClass != 'undefined'){
        openedClass = o.openedClass;
        }
        if (typeof o.closedClass != 'undefined'){
        closedClass = o.closedClass;
        }
      };
 
        //initialize each of the top levels
        var tree = $(this);
        tree.addClass("tree");
        tree.find('li').has("ul").each(function () {
            var branch = $(this); //li with children ul
            branch.prepend("<i class='indicator glyphicon " + closedClass + "'></i>");
            branch.addClass('branch');
            branch.on('click', function (e) {
                if (this == e.target) {
                    var icon = $(this).children('i:first');
                    icon.toggleClass(openedClass + " " + closedClass);
                    $(this).children().children().toggle();
                }
            })
            branch.children().children().toggle();
        });
        //fire event from the dynamically added icon
      tree.find('.branch .indicator').each(function(){
        $(this).on('click', function () {
            $(this).closest('li').click();
        });
      });
        //fire event to open branch if the li contains an anchor instead of text
        tree.find('.branch>a').each(function () {
            $(this).on('click', function (e) {
                $(this).closest('li').click();
                e.preventDefault();
            });
        });
        //fire event to open branch if the li contains a button instead of text
        tree.find('.branch>button').each(function () {
            $(this).on('click', function (e) {
                $(this).closest('li').click();
                e.preventDefault();
            });
        });
    }
});
 
//Initialization of treeviews
$('#tree').treed({openedClass:'glyphicon-chevron-down', closedClass:'glyphicon-chevron-right'});
</script>

 

This is simply the .js code (click the js button) from http://bootsnipp.com/snippets/featured/bootstrap-30-treeview - with the addition of an opening <script> and a closing </script>

 

Step 4.  CSS change.  Open up user.css and add:

 

.tree, .tree ul {
    margin:0;
    padding:0;
    list-style:none
}
.tree ul {
    margin-left:1em;
    position:relative
}
.tree ul ul {
    margin-left:.5em
}
.tree ul:before {
    content:"";
    display:block;
    width:0;
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    border-left:1px solid
}
.tree li {
    margin:0;
    padding:0 1em;
    line-height:2em;
    color:#369;
    font-weight:700;
    position:relative
}
.tree ul li:before {
    content:"";
    display:block;
    width:10px;
    height:0;
    border-top:1px solid;
    margin-top:-1px;
    position:absolute;
    top:1em;
    left:0
}
.tree ul li:last-child:before {
    background:#fff;
    height:auto;
    top:1em;
    bottom:0
}
.indicator {
    margin-right:5px;
}
.tree li a {
    text-decoration: none;
    color:#369;
}
.tree li button, .tree li button:active, .tree li button:focus {
    text-decoration: none;
    color:#369;
    border:none;
    background:transparent;
    margin:0px 0px 0px 0px;
    padding:0px 0px 0px 0px;
    outline: 0;
}

 

This is simply the CSS code from the Bootsnipp Page.  Click the CSS button...

 

Refresh your osCommerce, the categories box now shows like this:

 

 

 

[tgely]

This would be good at admin side too..

[azpro]

I have been testing with this menu - testing different settings $OSCOM_CategoryTree-> to see if I could come up with the desired behaviour I need. I ended up editing the  category_tree.php class file ... which we don't want because it's core code.

 

What i need to do is create a category output that starts at level 0 if you are in level 2 but still gives the full category path and does not output level 0 cats that are not present in cPath . Example:

 

Standard output category_tree class with $root_category_id = 0,  $max_level = 0,
 

cat - level 0 - cPath 14

cat - level 0 - cPath 15

          cat - level 1 - cPath 15_20

                           cat - level 2 - cPath 15_20_33

                           cat - level 2 - cPath 15_20_34

                           cat - level 2 - cPath 15_20_35

          cat - level 1 - cPath 15_21

          cat - level 1 - cPath 15_22

          cat - level 1 - cPath 15_23

cat - level 0 - cPath 16

cat - level 0 - cPath 17

cat - level 0 - cPath 18

 

Desired output category_tree class with $root_category_id = 0,  $max_level = 0,
 

cat - level 0 - cPath 15

          cat - level 1 - cPath 15_20

                           cat - level 2 - cPath 15_20_33

                           cat - level 2 - cPath 15_20_34

                           cat - level 2 - cPath 15_20_35

          cat - level 1 - cPath 15_21

          cat - level 1 - cPath 15_22

          cat - level 1 - cPath 15_23

 

Note - this only gives the Level 0 if its $category_id is in $cPath_array. Changing $OSCOM_CategoryTree->setRootCategoryID() doesn't do the trick because than we loose full cPath 15_20_35 ... wil output cPath 20_35

 

Is there a $OSCOM_CategoryTree-> setting I have missed or do I need to extend category_tree.php class?