Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

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!

Link to comment
Share on other sites

  • Replies 54
  • Created
  • Last Reply

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.

Link to comment
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 :)

Follow the community build:

BS3 to osCommerce Responsive from the Get Go!

Check out the new construction:

Admin Gone to Total BS!

Link to comment
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

 

 

 

 

 

 

 

 

Link to comment
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!

Link to comment
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?

Link to comment
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!

Link to comment
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?

Link to comment
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>
Link to comment
Share on other sites

  • 3 weeks later...
  • 1 month later...

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.

Link to comment
Share on other sites

  • 4 weeks later...

@@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://www.oscommerce.com/forums/topic/399514-bugs-in-gold-version-of-234-responsive/?p=1713108

 

Thanks!

 

Malcolm

Link to comment
Share on other sites

  • 3 weeks later...
  • 1 month later...

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.

Link to comment
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

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...