Jump to content

Recommended Posts

The following code snippets will extend the categories class as found in the osCommerce to Bootstrap community build. Please note it only works on this version as no other version is using this category class (in production).

 

Its up to you where you place this class, you can make a file and add it with the other classes, just add it to template_top.php for quick setup, or go all out and take all the code and make a module.

 

So first lets extend the category class with need markup for a bootstrap nav menu.

  /*
  $Id$ explode_category_tree

  osCommerce, Open Source E-Commerce Solutions
  http://www.oscommerce.com
  Copyright (c) 2010 osCommerce
  
  extended class author: G.L. Walker
  Copyright (c) 2014 G.L. Walker

  Released under the GNU General Public License
*/
  class explode_category_tree extends category_tree {
    
    var $parent_group_start_string = null,
	    $parent_group_end_string = null,
		$parent_group_apply_to_root = false,
		$root_start_string = '<li class="dropdown">',
		$root_end_string = '</li>',
		$parent_start_string = '<ul class="dropdown-menu">',
		$parent_end_string = '</ul>',
		$child_start_string = '<li>',
		$child_end_string = '</li>';
    
    function _buildHoz($parent_id, $level = 0) {
      if(isset($this->_data[$parent_id])) {
        foreach($this->_data[$parent_id] as $category_id => $category) {
          if($this->breadcrumb_usage === true) {
            $category_link = $this->buildBreadcrumb($category_id);
          } else {
            $category_link = $category_id;
          }
          if(($this->follow_cpath === true) && in_array($category_id, $this->cpath_array)) {
            $link_title = $this->cpath_start_string . $category['name'] . $this->cpath_end_string;
          } else {
            $link_title = $category['name'];
          }

		  if (isset($this->_data[$category_id]) && ($level != 0)) {
            $result .= '<li class="dropdown dropdown-submenu"><a href="#" tabindex="-1" class="dropdown-toggle" data-toggle="dropdown">';
            $caret = false;
          } elseif(isset($this->_data[$category_id]) && (($this->max_level == '0') || ($this->max_level > $level + 1))) {
            $result .= $this->root_start_string;
            $result .= '<a href="#" tabindex="-1" class="dropdown-toggle" data-toggle="dropdown">';
            $caret =   '<span class="caret"></span>';
			
          } else {
            $result .= $this->child_start_string;
            $result .= '<a href="' . tep_href_link(FILENAME_DEFAULT, 'cPath=' . $category_link) . '">';
            $caret = false;
          }
		  
          $result .= str_repeat($this->spacer_string, $this->spacer_multiplier * $level);
          $result .= $link_title . (($caret != false) ? $caret : null) . '</a>';
		  
          if(isset($this->_data[$category_id]) && (($this->max_level == '0') || ($this->max_level > $level + 1))) {
            // uncomment below to show parent category link //
		    //$root_link_title =  '<span class="hidden-xs"><span class="glyphicon glyphicon-th-list"></span> ' . $link_title . '</span><li class="divider"></li>';
			// divider added for clarity - comment out if you no like //
			//$root_link_title .= '<li class="visible-xs divider"></li>';
			
            $result .= $this->parent_start_string;
            $result .= '<li><a href="' . tep_href_link(FILENAME_DEFAULT, 'cPath=' . $category_link) . '">' . $root_link_title . '</a></li>';
            $result .= $this->_buildHoz($category_id, $level + 1);
            $result .= $this->parent_end_string;
            $result .= $this->child_end_string;
          } else {
            $result .= $this->root_end_string;
          }
        }
      }
      return $result;
    }
    function getExTree() {
      return $this->_buildHoz($this->root_category_id);
    }
  }
/* end explode_category_tree */

Now you need to add a function somewhere, either in html_output.php or just slap it in template_top if doing a quick setup:

  function build_hoz($class='') {
    global $cPath, $level;
	
    if (empty($class)) $class = 'nav navbar-nav';

    $OSCOM_CategoryTree = new explode_category_tree();
    $data = '<ul class="' . $class . '">' . $OSCOM_CategoryTree->getExTree() . '</ul>';

    return $data;
  }

Notice the class variable, you may or may not need to use it according to the later steps.

 

Now here is the css markup to add to your stylesheet:

.dropdown-submenu { position:relative;}
.dropdown-menu > .dropdown > .dropdown-menu, .dropdown-submenu > .dropdown-menu{top:0;left:100%;margin-top:-6px;;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;}
.dropdown-menu > .dropdown > a:after, .dropdown-submenu > a:after{display:block;content:" ";float:right;width:0;height:0;border-color:transparent;border-style:solid;border-width:5px 0 5px 5px;border-left-color:#cccccc;margin-top:5px;margin-right:-10px;}
.dropdown-submenu:hover > a:after{border-left-color:#555;}

And you may or may not need the javascript, it depends on a couple of things, I'll let you figure it out, but start by adding it to template_bottom.php


<script>
$(document).ready(function(){
    $('ul.dropdown-menu > li.dropdown > a.dropdown-toggle .caret').removeClass('caret');
    $('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
      event.preventDefault();
      event.stopPropagation(); 
      $(this).parent().siblings().removeClass('open');
      $(this).parent().toggleClass('open');
    });
});
</script>

If you do not have any subcategories, and you are using a  nav menu the top categories displaying across the menu, you wont need any of the javascript. If you want to nest the category menu inside a single dropdown link, you will only need the first line after document ready(or you can actually modify the extended class)  I simply gave a way of doing things that would fit a variety of applications. If I am confusing you, just add everything.

 

 

Now inside your markup for a bootstrap nav menu their are 2 ways you can output the category tree

 


    <nav class="navbar navbar-default navbar-no-corners navbar-no-margin" role="navigation">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-navbar-collapse">
          <span class="sr-only"><?php echo HEADER_TOGGLE_NAV; ?></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      </div>
      
      <div class="collapse navbar-collapse" id="bs-navbar-collapse">
        <div class="container-fluid">
          <ul class="nav navbar-nav">
            <li class="dropdown">
              <a class="dropdown-toggle" data-toggle="dropdown" href="#">Categories<span class="caret"></span></a>
              <?php echo build_hoz('dropdown-menu');?>
            </li>
          </ul>
          <?php echo build_hoz(); ?>
        </div>
      </div>
    </nav>

I combined the 2 together in the above code. You can pretty much make it part of the navbar top links, or next it inside one top link.

 

Ive tested this up to eight sub-categories deep with great results - but if you go that crazy on a live shop, you probably need a consultant to help you better categorize- maybe an auto parts store may need that many.

 


Follow the community build:

BS3 to osCommerce Responsive from the Get Go!

Check out the new construction:

Admin Gone to Total BS!

Share this post


Link to post
Share on other sites

Nice!

Two things:

1.) Toggling the carets does not work for me.

2.) I can not directly call categories which have subs. For example: if I click on DVD movies, the subcategories menu opens - if I click again, the sub menu is closed - but there is no way to open the DVD movies site. Is that intended?

 

J.J.

Share this post


Link to post
Share on other sites

1) The carets are part of the css, and wont toggle, but the markup can be removed from the style and <span class="caret"></span> can be added to the class where you find:

$caret = false;

 

depending how using it, you may also need to comment out the javascript where it is set to removeClass

 

2) Yes, it is intentional, if you look in the class you will find this:

//$root_link_title =  '<span class="hidden-xs"><span class="glyphicon glyphicon-th-list"></span> ' . $link_title . '</span><li class="divider"></li>';

 

Uncomment it and a root link will show in the next opened.

 

It could also be marked up to make the category name bring you straight to the root, and then a separate icon to the right to click on, but when subcategories exist, the main point is navigation to get where you need to be and I didn't want to over think things.

 

I could have used just 2 areas in the class to create the dropdown links, but instead used 3 so that deeper customization can be easily done.

 

This section deals with that, the first being the subcategory, second the parent, third the actual list items:

 

if (isset($this->_data[$category_id]) && ($level != 0)) {
            $result .= '<li class="dropdown dropdown-submenu"><a href="#" tabindex="-1" class="dropdown-toggle" data-toggle="dropdown">';
            $caret = false;
          } elseif(isset($this->_data[$category_id]) && (($this->max_level == '0') || ($this->max_level > $level + 1))) {
            $result .= $this->root_start_string;
            $result .= '<a href="#" tabindex="-1" class="dropdown-toggle" data-toggle="dropdown">';
            $caret =   '<span class="caret"></span>';
  
          } else {
            $result .= $this->child_start_string;
            $result .= '<a href="' . tep_href_link(FILENAME_DEFAULT, 'cPath=' . $category_link) . '">';
            $caret = false;
          }

 

Have fun :)

Edited by WebSource 5

Follow the community build:

BS3 to osCommerce Responsive from the Get Go!

Check out the new construction:

Admin Gone to Total BS!

Share this post


Link to post
Share on other sites

I have been playing around with this, and am trying to come up with something not too different from your sample website.

 

So, I have the in the nav-bar 5 choices:

 

1) Home

2) Categories (I renamed it to Products, but it's still all the same)

3) Reports (another drop-down menu listing several reports)

4) My Account (a drop-down menu copying the stock osCbs nav-bar)

5) Shopping Cart (also copying the stock osCbs nav-bar)

 

Beneath the nav-bar, I have the breadcrumb and search bars.

 

 

 

As the screen minimizes, the nav-bar shrinks to a single drop-down 'Menu' bar, and the search bar slides under the breadcrumb.

 

 

 

However, sometimes the 'Menu' bar collapses to a single button on the right ...

 

 

 

And when you click on either the Menu 'bar' or 'button', as the menu expands below, the bar collapses into the single button ...

 

 

 

 

I think that this is a CSS problem, but need some guidance ...

 

Secondly, I use the KissER add-on to help catch my programming mistakes. It has identified a 3 undefined variables:

 

 

 

and here's the relevant code ...

 

 

 

Thank you for all of your contributions to this community!

 

Malcolm

 

 

 

 

 

 

 

 


Get the latest Responsive osCommerce CE (community edition) here .

Share this post


Link to post
Share on other sites

I'm not sure why the button is there, unless you copied the source of the site that uses it. If so that menu has various css markup to make things work and look the way they do on its shop.

 

The variables, $result, and $root_link_title could probably be added to the list at start of the code.


Follow the community build:

BS3 to osCommerce Responsive from the Get Go!

Check out the new construction:

Admin Gone to Total BS!

Share this post


Link to post
Share on other sites

Upon further research, it seems that the menu bar/button had somehow inherited the "float:right" attribute. So, I added to the CSS file:

 

float: none;

width: 100%;

 

and that seems to have solved it. Thanks!

 

Malcolm


Get the latest Responsive osCommerce CE (community edition) here .

Share this post


Link to post
Share on other sites

I'm not sure why the button is there, unless you copied the source of the site that uses it. If so that menu has various css markup to make things work and look the way they do on its shop.

 

The variables, $result, and $root_link_title could probably be added to the list at start of the code.

 

Is this menu something different to the one in the default bootstrap oscommerce download?

Or does that default bootstrap oscommerce not even come with a menu?

Share this post


Link to post
Share on other sites

This is an addon that can be placed in the nav menu, or used as the nav menu. It does not come with the default install, but does depend on the default installs category_tree class.


Follow the community build:

BS3 to osCommerce Responsive from the Get Go!

Check out the new construction:

Admin Gone to Total BS!

Share this post


Link to post
Share on other sites

This is an addon that can be placed in the nav menu, or used as the nav menu. It does not come with the default install, but does depend on the default installs category_tree class.

 

hi

thanks

 

so the default bootstrap installation does not have a menu whatsoever?

or does it have the menu as it is shown on that demo?

 

this one you have made, what is the major difference between this and the default one?

Share this post


Link to post
Share on other sites

@@vampirehunter - install the Bootstrap version which will answer most of your questions.  


This is a signature that appears on all my posts.  
IF YOU MAKE A POST REQUESTING HELP...please state the exact version
of osCommerce that you are using. THANKS

 
Get the latest Responsive osCommerce CE (community edition) here

Share this post


Link to post
Share on other sites

Great little addon @@GLWalker thank you kindly - I'm building a new smaller sub-brand site for my store using 2.3.4bs and was worried how the categories moves to the bottom of the page with smaller devices. This solves my issue perfectly.

 

I'm using;

<li class="dropdown">
              <a class="dropdown-toggle" data-toggle="dropdown" href="#">Categories<span class="caret"></span></a>
              <?php echo build_hoz('dropdown-menu');?>
            </li>

in my header like this;

      <ul class="nav navbar-nav">
        <?php echo '<li><a class="store-brand" href="' . tep_href_link(FILENAME_DEFAULT) . '">' . HEADER_HOME . '</a></li>'; ?>
        <?php echo '<li><a href="' . tep_href_link(FILENAME_PRODUCTS_NEW) . '">' . HEADER_WHATS_NEW . '</a></li>'; ?>
        <?php echo '<li><a href="' . tep_href_link(FILENAME_SPECIALS) . '">' . HEADER_SPECIALS . '</a></li>'; ?>
        <?php echo '<li><a href="' . tep_href_link(FILENAME_REVIEWS) . '">' . HEADER_REVIEWS . '</a></li>'; ?>
            <li class="dropdown">
              <a class="dropdown-toggle" data-toggle="dropdown" href="#"><i class="glyphicon glyphicon-th-list"></i><span class="hidden-sm"> Products</span><span class="caret"></span></a>
              <?php echo build_hoz('dropdown-menu');?>
            </li>
      </ul>
Edited by greasemonkey

Share this post


Link to post
Share on other sites

I have added this to my site, and it works well with current versions of Chrome and Firefox. It fails miserably with IE8 (no surprise there), but it also fails with IE9. Has anyone tested this with IE10 or IE11?

 

Malcolm


Get the latest Responsive osCommerce CE (community edition) here .

Share this post


Link to post
Share on other sites

Maybe someone can help me? I am trying to build out a new 2.3.4BS site and would like to try this addon, but cannot for the life of me locate the stylesheet.css file. It is supposed to be in the top root folder no?

Share this post


Link to post
Share on other sites

Hi Dudette

 

You should have a custom.css and user.css file.

Add any new css code to the user.css file.

Share this post


Link to post
Share on other sites

Hi Dude! I tried putting snippet of code as instructed in addon into the user.css file but alas it did not work, so been thinking I am losing my mind since I cannot find the regular stylesheet.css file anywhere!

Share this post


Link to post
Share on other sites

There is no "regular" stylesheet.css anymore in osC Bootstrap.

What does your includes/template_top.php say?

I have never installed this mod so can't be of much help. Maybe someone who installed it can be of more assistance to you.

Share this post


Link to post
Share on other sites

@@GLWalker

 

Has anyone tested this on an iPad, or other Apple devices?

 

I have just had the opportunity to test my site on an iPad, and have run into some issues. When the menus drop down, they are hidden behind the text in the main screen body, and are not clickable (sorry I can't provide a screen shot).

 

I've also noted a similar issue regarding drop down boxes being hidden on the iPad here:

 

http://forums.oscommerce.com/topic/399514-bugs-in-gold-version-of-234-responsive/?p=1713108

 

Thanks!

 

Malcolm


Get the latest Responsive osCommerce CE (community edition) here .

Share this post


Link to post
Share on other sites

@GLWalker

 

I modified your code for a version I am doing, but maybe you can help me split the results into multiple ULs. Any ideas appreciated. I need to check for different css markdowns depending on the category.

Edited by icecold

Share this post


Link to post
Share on other sites

I have added this to my site, and it works well with current versions of Chrome and Firefox. It fails miserably with IE8 (no surprise there), but it also fails with IE9. Has anyone tested this with IE10 or IE11?

 

Malcolm

I still use the normal category structure for my site, but have added this to the navbar to make the categories more accessible for mobile devices. Using a media query in the user.css to hide this is one way to go to avoid problems with old versions of IE, but you could also simply hide it for old versions of IE.

 

<!--[if ! lt IE 11]>-->

Your navbar UL here

<!--<![endif]-->

 

Hope this helps, it works for me.

Share this post


Link to post
Share on other sites

The following code snippets will extend the categories class as found in the osCommerce to Bootstrap community build. Please note it only works on this version as no other version is using this category class (in production).

 

Its up to you where you place this class, you can make a file and add it with the other classes, just add it to template_top.php for quick setup, or go all out and take all the code and make a module.

 

So first lets extend the category class with need markup for a bootstrap nav menu.

  /*
  $Id$ explode_category_tree

  osCommerce, Open Source E-Commerce Solutions
  http://www.oscommerce.com
  Copyright (c) 2010 osCommerce
  
  extended class author: G.L. Walker
  Copyright (c) 2014 G.L. Walker

  Released under the GNU General Public License
*/
  class explode_category_tree extends category_tree {
    
    var $parent_group_start_string = null,
	    $parent_group_end_string = null,
		$parent_group_apply_to_root = false,
		$root_start_string = '<li class="dropdown">',
		$root_end_string = '</li>',
		$parent_start_string = '<ul class="dropdown-menu">',
		$parent_end_string = '</ul>',
		$child_start_string = '<li>',
		$child_end_string = '</li>';
    
    function _buildHoz($parent_id, $level = 0) {
      if(isset($this->_data[$parent_id])) {
        foreach($this->_data[$parent_id] as $category_id => $category) {
          if($this->breadcrumb_usage === true) {
            $category_link = $this->buildBreadcrumb($category_id);
          } else {
            $category_link = $category_id;
          }
          if(($this->follow_cpath === true) && in_array($category_id, $this->cpath_array)) {
            $link_title = $this->cpath_start_string . $category['name'] . $this->cpath_end_string;
          } else {
            $link_title = $category['name'];
          }

		  if (isset($this->_data[$category_id]) && ($level != 0)) {
            $result .= '<li class="dropdown dropdown-submenu"><a href="#" tabindex="-1" class="dropdown-toggle" data-toggle="dropdown">';
            $caret = false;
          } elseif(isset($this->_data[$category_id]) && (($this->max_level == '0') || ($this->max_level > $level + 1))) {
            $result .= $this->root_start_string;
            $result .= '<a href="#" tabindex="-1" class="dropdown-toggle" data-toggle="dropdown">';
            $caret =   '<span class="caret"></span>';
			
          } else {
            $result .= $this->child_start_string;
            $result .= '<a href="' . tep_href_link(FILENAME_DEFAULT, 'cPath=' . $category_link) . '">';
            $caret = false;
          }
		  
          $result .= str_repeat($this->spacer_string, $this->spacer_multiplier * $level);
          $result .= $link_title . (($caret != false) ? $caret : null) . '</a>';
		  
          if(isset($this->_data[$category_id]) && (($this->max_level == '0') || ($this->max_level > $level + 1))) {
            // uncomment below to show parent category link //
		    //$root_link_title =  '<span class="hidden-xs"><span class="glyphicon glyphicon-th-list"></span> ' . $link_title . '</span><li class="divider"></li>';
			// divider added for clarity - comment out if you no like //
			//$root_link_title .= '<li class="visible-xs divider"></li>';
			
            $result .= $this->parent_start_string;
            $result .= '<li><a href="' . tep_href_link(FILENAME_DEFAULT, 'cPath=' . $category_link) . '">' . $root_link_title . '</a></li>';
            $result .= $this->_buildHoz($category_id, $level + 1);
            $result .= $this->parent_end_string;
            $result .= $this->child_end_string;
          } else {
            $result .= $this->root_end_string;
          }
        }
      }
      return $result;
    }
    function getExTree() {
      return $this->_buildHoz($this->root_category_id);
    }
  }
/* end explode_category_tree */

Now you need to add a function somewhere, either in html_output.php or just slap it in template_top if doing a quick setup:

  function build_hoz($class='') {
    global $cPath, $level;
	
    if (empty($class)) $class = 'nav navbar-nav';

    $OSCOM_CategoryTree = new explode_category_tree();
    $data = '<ul class="' . $class . '">' . $OSCOM_CategoryTree->getExTree() . '</ul>';

    return $data;
  }

Notice the class variable, you may or may not need to use it according to the later steps.

 

Now here is the css markup to add to your stylesheet:

.dropdown-submenu { position:relative;}
.dropdown-menu > .dropdown > .dropdown-menu, .dropdown-submenu > .dropdown-menu{top:0;left:100%;margin-top:-6px;;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;}
.dropdown-menu > .dropdown > a:after, .dropdown-submenu > a:after{display:block;content:" ";float:right;width:0;height:0;border-color:transparent;border-style:solid;border-width:5px 0 5px 5px;border-left-color:#cccccc;margin-top:5px;margin-right:-10px;}
.dropdown-submenu:hover > a:after{border-left-color:#555;}

And you may or may not need the javascript, it depends on a couple of things, I'll let you figure it out, but start by adding it to template_bottom.php

<script>
$(document).ready(function(){
    $('ul.dropdown-menu > li.dropdown > a.dropdown-toggle .caret').removeClass('caret');
    $('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
      event.preventDefault();
      event.stopPropagation(); 
      $(this).parent().siblings().removeClass('open');
      $(this).parent().toggleClass('open');
    });
});
</script>

If you do not have any subcategories, and you are using a  nav menu the top categories displaying across the menu, you wont need any of the javascript. If you want to nest the category menu inside a single dropdown link, you will only need the first line after document ready(or you can actually modify the extended class)  I simply gave a way of doing things that would fit a variety of applications. If I am confusing you, just add everything.

 

 

Now inside your markup for a bootstrap nav menu their are 2 ways you can output the category tree

 

    <nav class="navbar navbar-default navbar-no-corners navbar-no-margin" role="navigation">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-navbar-collapse">
          <span class="sr-only"><?php echo HEADER_TOGGLE_NAV; ?></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      </div>
      
      <div class="collapse navbar-collapse" id="bs-navbar-collapse">
        <div class="container-fluid">
          <ul class="nav navbar-nav">
            <li class="dropdown">
              <a class="dropdown-toggle" data-toggle="dropdown" href="#">Categories<span class="caret"></span></a>
              <?php echo build_hoz('dropdown-menu');?>
            </li>
          </ul>
          <?php echo build_hoz(); ?>
        </div>
      </div>
    </nav>

I combined the 2 together in the above code. You can pretty much make it part of the navbar top links, or next it inside one top link.

 

Ive tested this up to eight sub-categories deep with great results - but if you go that crazy on a live shop, you probably need a consultant to help you better categorize- maybe an auto parts store may need that many.

 

Hi,

can anyone explain how to add this as a module?

 

if you add a module, where abouts to put this bit?

Since html_output is not supposed to be touched when adding a module.

im not sure where to put this bit of the code

Now you need to add a function somewhere, either in html_output.php or just slap it in template_top if doing a quick setup:

  function build_hoz($class='') {
    global $cPath, $level;
	
    if (empty($class)) $class = 'nav navbar-nav';

    $OSCOM_CategoryTree = new explode_category_tree();
    $data = '<ul class="' . $class . '">' . $OSCOM_CategoryTree->getExTree() . '</ul>';

    return $data;
  }

thanks

Edited by vampirehunter

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

×