♥GLWalker Posted October 20, 2014 Share Posted October 20, 2014 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 More sharing options...
De Dokta Posted October 20, 2014 Share Posted October 20, 2014 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 More sharing options...
♥GLWalker Posted October 20, 2014 Author Share Posted October 20, 2014 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 More sharing options...
De Dokta Posted October 20, 2014 Share Posted October 20, 2014 Ahhh I see - a lot of ways to configure that for different needs.. :thumbsup: Link to comment Share on other sites More sharing options...
ArtcoInc Posted October 21, 2014 Share Posted October 21, 2014 Do you have an example of this in action? Malcolm Link to comment Share on other sites More sharing options...
♥GLWalker Posted October 21, 2014 Author Share Posted October 21, 2014 In the live shops area there is a minimal example if browsing in mobile view 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 More sharing options...
ArtcoInc Posted October 23, 2014 Share Posted October 23, 2014 Ops, please delete Link to comment Share on other sites More sharing options...
ArtcoInc Posted October 24, 2014 Share Posted October 24, 2014 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 More sharing options...
♥GLWalker Posted October 24, 2014 Author Share Posted October 24, 2014 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 More sharing options...
ArtcoInc Posted October 24, 2014 Share Posted October 24, 2014 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 Link to comment Share on other sites More sharing options...
vampirehunter Posted October 24, 2014 Share Posted October 24, 2014 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 More sharing options...
♥GLWalker Posted October 24, 2014 Author Share Posted October 24, 2014 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 More sharing options...
vampirehunter Posted October 28, 2014 Share Posted October 28, 2014 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 More sharing options...
burt Posted October 28, 2014 Share Posted October 28, 2014 @@vampirehunter - install the Bootstrap version which will answer most of your questions. Link to comment Share on other sites More sharing options...
greasemonkey Posted October 29, 2014 Share Posted October 29, 2014 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 More sharing options...
ArtcoInc Posted November 15, 2014 Share Posted November 15, 2014 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 Link to comment Share on other sites More sharing options...
ArtcoInc Posted November 15, 2014 Share Posted November 15, 2014 *update* Tested it with IE11 ... works fine. Malcolm Link to comment Share on other sites More sharing options...
allaboutwicker Posted December 27, 2014 Share Posted December 27, 2014 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? Link to comment Share on other sites More sharing options...
♥Tsimi Posted December 27, 2014 Share Posted December 27, 2014 Hi Dudette You should have a custom.css and user.css file. Add any new css code to the user.css file. Link to comment Share on other sites More sharing options...
allaboutwicker Posted December 27, 2014 Share Posted December 27, 2014 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! Link to comment Share on other sites More sharing options...
♥Tsimi Posted December 27, 2014 Share Posted December 27, 2014 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 More sharing options...
ArtcoInc Posted January 19, 2015 Share Posted January 19, 2015 @@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 More sharing options...
icecold Posted February 5, 2015 Share Posted February 5, 2015 @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. Link to comment Share on other sites More sharing options...
James Turner Posted March 9, 2015 Share Posted March 9, 2015 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 More sharing options...
vampirehunter Posted March 9, 2015 Share Posted March 9, 2015 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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.