Jump to content
Latest News: (loading..)

Search the Community

Showing results for tags 'categories menu'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • News and Announcements
    • News and Announcements
    • Partner Announcements
    • Ambassadors
  • Commercial Support
    • Developer Feedback
  • osCommerce Online Merchant v2.x
    • General Support
    • Installation and Configuration
    • Upgrading from Earlier Versions (v2.x to v2.x)
    • Add-Ons
    • Tips and Tricks
    • Security
  • Development
    • osCommerce Online Merchant v2.4
    • osCommerce Online Merchant Community Bootstrap Edition
    • osCommerce Online Merchant v3.x
    • Development Proposals
  • General
    • OSCOMMERCE.TV
    • Next Steps / Optimizations / Marketing
    • Live Shop Reviews
    • E-Commerce Laws
    • General Discussions
    • PHP / SQL / Web Design
  • oscBooks and oscTemplates's Announcements
  • PayPal's Announcements
  • Sage Pay's Announcements
  • Solomono - new level osCommerce templates's Announcements
  • German Community's OSCOM v2.x
  • German Community's Allgemein
  • German Community's OSCOM v3.x

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Real Name


Location


Interests


Website


Skype

Found 1 result

  1. 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.
×