Jump to content

Recommended Posts

 

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:
 

 

 


Help shape the future of Phoenix; join the Phoenix Club

Share this post


Link to post
Share on other sites

This would be good at admin side too..


:blink:
osCommerce based shop owner with minimal design and focused on background works. When the less is more.
Email managment with tracking pixel, package managment for shipping, stock management, warehouse managment with bar code reader, parcel shops management on 3000 pickup points without local store.

Share this post


Link to post
Share on other sites

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?

Edited by azpro

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

×