Jump to content
Latest News: (loading..)

Recommended Posts

There is somewhere around floating a tutorial how to make a add-on module  for oscommerce bootstrap

 

 

hi thanks yeah.

 

ive put the class file as a new class file.

 

created a new cm_navbar file and a new template navbar file.

 

Just not sure where that above short bit of code should go? Should i just dump it in the class file? Above, he said to to put in Html_output, but thats considered core code, so i don't want to touch that.

Share this post


Link to post
Share on other sites

Would it be ok to put this in the class file if making a module?

 

 

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;
}

Share this post


Link to post
Share on other sites

Hello,

 

Im trying to get this to work with duplicated drop downs for my four main categories, so in each copy it should show with my first level subcategories instead of root category id=0.

In the standard categories box I succeed it using this in the box module ( I duplicated and renamed four boxes with all constants numbered: bm_categories1, MODULE_BOXES_CATEGORIES_1_TITLE and so on 1-4):

      $OSCOM_CategoryTree->setRootCategoryID(149);

where 149 is one of my main, first level categories.

 

Now I tried the same in a header content module I created  with the given code and I couldn't succeed to get the $root_category_id variable passed to the explode_category_tree class.

 

I tried this modification:

    function _buildHoz($parent_id, $level = 0) {
      if(isset($this->_data[$root_category_id])) {
        foreach($this->_data[$root_category_id] as $category_id => $category) {

and it works if I define $root_category_id in that way:

    function _buildHoz($parent_id, $level = 0) {
    	$root_category_id = 149;
    	if(isset($this->_data[$root_category_id])) {
        foreach($this->_data[$root_category_id] as $category_id => $category) {

or that way in the variables list:

		$root_category_id = 149;
    
    function _buildHoz($parent_id, $level = 0) {
    	if(isset($this->_data[$root_category_id])) {
        foreach($this->_data[$root_category_id] as $category_id => $category) {

but can't get the variable retrieved from the header content module.

 

Any help??

Edited by raiwa

Share this post


Link to post
Share on other sites

Thank You @@wHiTeHaT, works great.

 

Here my complete set up, if someone is interested:

 

Standard categories box modified to show only on desktop (md+lg), 4 category boxes to show 4 main categories each where the box title is changed to the category names:

includes/modules/boxes/templates/categories1:

<div class="panel panel-default visible-md visible-lg">
<div class="panel-heading"><?php echo MODULE_BOXES_CATEGORIES_1_BOX_TITLE; ?></div>
<div class="panel-body"><?php echo $category_tree_1; ?></div>
</div>

includes/modules/boxes/bm_categories1:

  class bm_categories1 {
    var $code = 'bm_categories1';
    var $group = 'boxes';
    var $title;
    var $description;
    var $sort_order;
    var $enabled = false;

    function bm_categories1() {
      $this->title = MODULE_BOXES_CATEGORIES_1_TITLE;
      $this->description = MODULE_BOXES_CATEGORIES_1_DESCRIPTION;

      if ( defined('MODULE_BOXES_CATEGORIES_1_STATUS') ) {
        $this->sort_order = MODULE_BOXES_CATEGORIES_1_SORT_ORDER;
        $this->enabled = (MODULE_BOXES_CATEGORIES_1_STATUS == 'True');

        $this->group = ((MODULE_BOXES_CATEGORIES_1_CONTENT_PLACEMENT == 'Left Column') ? 'boxes_column_left' : 'boxes_column_right');
      }
    }

    function execute() {
      global $oscTemplate, $cPath;

      $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);
      $OSCOM_CategoryTree->setRootCategoryID(149);
      
      $category_tree_1 = $OSCOM_CategoryTree->getTree();
      
      ob_start();
      include(DIR_WS_MODULES . 'boxes/templates/categories1.php');
      $data = ob_get_clean();

      $oscTemplate->addBlock($data, $this->group);
    }

    function isEnabled() {
      return $this->enabled;
    }

    function check() {
      return defined('MODULE_BOXES_CATEGORIES_1_STATUS');
    }

    function install() {
      tep_db_query("insert into " . TABLE_CONFIGURATION . " (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, set_function, date_added) values ('Enable Categories Module', 'MODULE_BOXES_CATEGORIES_1_STATUS', 'True', 'Do you want to add the module to your shop?', '6', '1', 'tep_cfg_select_option(array(\'True\', \'False\'), ', now())");
      tep_db_query("insert into " . TABLE_CONFIGURATION . " (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, set_function, date_added) values ('Content Placement', 'MODULE_BOXES_CATEGORIES_1_CONTENT_PLACEMENT', 'Left Column', 'Should the module be loaded in the left or right column?', '6', '1', 'tep_cfg_select_option(array(\'Left Column\', \'Right Column\'), ', now())");
      tep_db_query("insert into " . TABLE_CONFIGURATION . " (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, date_added) values ('Sort Order', 'MODULE_BOXES_CATEGORIES_1_SORT_ORDER', '0', 'Sort order of display. Lowest is displayed first.', '6', '0', now())");
    }

    function remove() {
      tep_db_query("delete from " . TABLE_CONFIGURATION . " where configuration_key in ('" . implode("', '", $this->keys()) . "')");
    }

    function keys() {
      return array('MODULE_BOXES_CATEGORIES_1_STATUS', 'MODULE_BOXES_CATEGORIES_1_CONTENT_PLACEMENT', 'MODULE_BOXES_CATEGORIES_1_SORT_ORDER');
    }
  }

Observe: Added this line which defines the root category of each box:

$OSCOM_CategoryTree->setRootCategoryID(149);

For the category menu, new class:

 

includes/classes/explode_category_tree.php`:

<?php
 /*
  $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 $root_category_id = 0,
    		$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="glyphicon glyphicon-th-list"></span> ' . $link_title . '<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;
    }
    
    //New function: 
    function setNewRootCategoryID($root_category_id) {
      $this->root_category_id = $root_category_id;
    }

    function getExTree() {
      return $this->_buildHoz($this->root_category_id);
    }
  }
/* end explode_category_tree */

build_hoz function added to html_output.php:

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

    $OSCOM_CategoryTree = new explode_category_tree('$root_category_id');
    
    //Your new function
    $OSCOM_CategoryTree->setNewRootCategoryID($root_category_id);   

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

    return $data;
  }  

javascript added to includes/template_bottom.php (could be done in a header_tag module):

  <?php require(DIR_WS_INCLUDES . 'footer.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>

<script src="ext/bootstrap/js/bootstrap.min.js"></script>
<?php echo $oscTemplate->getBlocks('footer_scripts'); ?>

</body>
</html>

4 header content modules which serve tablet size, sm:

includes/modules/header/cm_header_categories1.php:

<?php
/*
  $Id$

  osCommerce, Open Source E-Commerce Solutions
  http://www.oscommerce.com

  Copyright (c) 2014 osCommerce

  Released under the GNU General Public License
*/

  class cm_header_categories1 {
    var $code;
    var $group;
    var $title;
    var $description;
    var $sort_order;
    var $enabled = false;

    function cm_header_categories1() {
      $this->code = get_class($this);
      $this->group = basename(dirname(__FILE__));

      $this->title = MODULE_CONTENT_HEADER_CATEGORIES_1_TITLE;
      $this->description = MODULE_CONTENT_HEADER_CATEGORIES_1_DESCRIPTION;
      $this->description .= '<div class="secWarning">' . MODULE_CONTENT_BOOTSTRAP_ROW_DESCRIPTION . '</div>';

      if ( defined('MODULE_CONTENT_HEADER_CATEGORIES_1_STATUS') ) {
        $this->sort_order = MODULE_CONTENT_HEADER_CATEGORIES_1_SORT_ORDER;
        $this->enabled = (MODULE_CONTENT_HEADER_CATEGORIES_1_STATUS == 'True');
      }
    }

    
    function execute() {
      global $oscTemplate;
      
      global $cPath;

      $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);
      $OSCOM_CategoryTree->setRootCategoryID(149);
      
      $category_tree = $OSCOM_CategoryTree->getTree();
      $content_width = (int)MODULE_CONTENT_HEADER_CATEGORIES_1_CONTENT_WIDTH;
      
      ob_start();
      include(DIR_WS_MODULES . 'content/' . $this->group . '/templates/categories1.php');
      $template = ob_get_clean();

      $oscTemplate->addContent($template, $this->group);
    }

    function isEnabled() {
      return $this->enabled;
    }

    function check() {
      return defined('MODULE_CONTENT_HEADER_CATEGORIES_1_STATUS');
    }

    function install() {
      tep_db_query("insert into configuration (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, set_function, date_added) values ('Enable Header Logo Module', 'MODULE_CONTENT_HEADER_CATEGORIES_1_STATUS', 'True', 'Do you want to enable the Logo content module?', '6', '1', 'tep_cfg_select_option(array(\'True\', \'False\'), ', now())");
      tep_db_query("insert into configuration (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, set_function, date_added) values ('Content Width', 'MODULE_CONTENT_HEADER_CATEGORIES_1_CONTENT_WIDTH', '4', 'What width container should the content be shown in?', '6', '1', 'tep_cfg_select_option(array(\'12\', \'11\', \'10\', \'9\', \'8\', \'7\', \'6\', \'5\', \'4\', \'3\', \'2\', \'1\'), ', now())");
      tep_db_query("insert into configuration (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, set_function, date_added) values ('Content Align', 'MODULE_CONTENT_HEADER_CATEGORIES_1_CONTENT_ALIGN', 'text-center', 'How should the content be aligned?', '6', '1', 'tep_cfg_select_option(array(\'text-left\', \'text-center\', \'text-right\'), ', now())");
      tep_db_query("insert into configuration (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, date_added) values ('Sort Order', 'MODULE_CONTENT_HEADER_CATEGORIES_1_SORT_ORDER', '0', 'Sort order of display. Lowest is displayed first.', '6', '0', now())");
    }

    function remove() {
      tep_db_query("delete from configuration where configuration_key in ('" . implode("', '", $this->keys()) . "')");
    }

    function keys() {
      return array('MODULE_CONTENT_HEADER_CATEGORIES_1_STATUS', 'MODULE_CONTENT_HEADER_CATEGORIES_1_CONTENT_WIDTH', 'MODULE_CONTENT_HEADER_CATEGORIES_1_CONTENT_ALIGN', 'MODULE_CONTENT_HEADER_CATEGORIES_1_SORT_ORDER');
    }
  }

includes/modules/header/templates/categories1.php:

<div class="clearfix"></div>
<div class="visible-sm col-sm-<?php echo $content_width . ' ' . MODULE_CONTENT_HEADER_CATEGORIES_1_CONTENT_ALIGN; ?> searchbox-margin">
              <?php echo '<a class="dropdown-toggle" data-toggle="dropdown" href="#">' . MODULE_CONTENT_HEADER_CATEGORIES_1_TEXT . '<span class="caret"></span></a>'; ?>
              <?php echo build_hoz('dropdown-menu', 149);?>
</div>

Observe: Root category for that module is passed here:

              <?php echo build_hoz('dropdown-menu', 149);?>

Navbar module for mobile, xs view, which inludes all categories (root category = 0):

This one could be used for a simplified setup to show also on tablet size (sm) instead of the above 4 modules).

includes/modules/header/cm_header_categories.php:

<?php
/*
  $Id$

  osCommerce, Open Source E-Commerce Solutions
  http://www.oscommerce.com

  Copyright (c) 2014 osCommerce

  Released under the GNU General Public License
*/

  class cm_header_categories {
    var $code;
    var $group;
    var $title;
    var $description;
    var $sort_order;
    var $enabled = false;

    function cm_header_categories() {
      $this->code = get_class($this);
      $this->group = basename(dirname(__FILE__));

      $this->title = MODULE_CONTENT_HEADER_CATEGORIES_TITLE;
      $this->description = MODULE_CONTENT_HEADER_CATEGORIES_DESCRIPTION;
      $this->description .= '<div class="secWarning">' . MODULE_CONTENT_BOOTSTRAP_ROW_DESCRIPTION . '</div>';

      if ( defined('MODULE_CONTENT_HEADER_CATEGORIES_STATUS') ) {
        $this->sort_order = MODULE_CONTENT_HEADER_CATEGORIES_SORT_ORDER;
        $this->enabled = (MODULE_CONTENT_HEADER_CATEGORIES_STATUS == 'True');
      }
    }

    
    function execute() {
      global $oscTemplate;
      
      global $cPath;

      $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);
      
      $category_tree = $OSCOM_CategoryTree->getTree();
      $content_width = (int)MODULE_CONTENT_HEADER_CATEGORIES_CONTENT_WIDTH;
      
      ob_start();
      include(DIR_WS_MODULES . 'content/' . $this->group . '/templates/categories.php');
      $template = ob_get_clean();

      $oscTemplate->addContent($template, $this->group);
    }

    function isEnabled() {
      return $this->enabled;
    }

    function check() {
      return defined('MODULE_CONTENT_HEADER_CATEGORIES_STATUS');
    }

    function install() {
      tep_db_query("insert into configuration (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, set_function, date_added) values ('Enable Header Logo Module', 'MODULE_CONTENT_HEADER_CATEGORIES_STATUS', 'True', 'Do you want to enable the Logo content module?', '6', '1', 'tep_cfg_select_option(array(\'True\', \'False\'), ', now())");
      tep_db_query("insert into configuration (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, set_function, date_added) values ('Content Width', 'MODULE_CONTENT_HEADER_CATEGORIES_CONTENT_WIDTH', '4', 'What width container should the content be shown in?', '6', '1', 'tep_cfg_select_option(array(\'12\', \'11\', \'10\', \'9\', \'8\', \'7\', \'6\', \'5\', \'4\', \'3\', \'2\', \'1\'), ', now())");
      tep_db_query("insert into configuration (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, set_function, date_added) values ('Content Align', 'MODULE_CONTENT_HEADER_CATEGORIES_CONTENT_ALIGN', 'text-center', 'How should the content be aligned?', '6', '1', 'tep_cfg_select_option(array(\'text-left\', \'text-center\', \'text-right\'), ', now())");
      tep_db_query("insert into configuration (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, date_added) values ('Sort Order', 'MODULE_CONTENT_HEADER_CATEGORIES_SORT_ORDER', '0', 'Sort order of display. Lowest is displayed first.', '6', '0', now())");
    }

    function remove() {
      tep_db_query("delete from configuration where configuration_key in ('" . implode("', '", $this->keys()) . "')");
    }

    function keys() {
      return array('MODULE_CONTENT_HEADER_CATEGORIES_STATUS', 'MODULE_CONTENT_HEADER_CATEGORIES_CONTENT_WIDTH', 'MODULE_CONTENT_HEADER_CATEGORIES_CONTENT_ALIGN', 'MODULE_CONTENT_HEADER_CATEGORIES_SORT_ORDER');
    }
  }

includes/modules/header/templates/categories.php:

<nav class="navbar navbar-no-corners navbar-no-margin visible-xs-block" role="navigation">
  <div class="container-fluid">
      	<ul class="nav navbar-nav">
            <li class="dropdown">
              <?php echo '<a class="dropdown-toggle" data-toggle="dropdown" href="#">' . MODULE_CONTENT_HEADER_CATEGORIES_TEXT . '<span class="caret"></span></a>'; ?>
              <?php echo build_hoz('dropdown-menu');?>
            </li>
        </ul>
  </div>
</nav>

Or merging together both templates:

<nav class="navbar navbar-no-corners navbar-no-margin visible-xs-block" role="navigation">
  <div class="container-fluid">
      	<ul class="nav navbar-nav">
            <li class="dropdown">
              <?php echo '<a class="dropdown-toggle" data-toggle="dropdown" href="#">' . MODULE_CONTENT_HEADER_CATEGORIES_TEXT . '<span class="caret"></span></a>'; ?>
              <?php echo build_hoz('dropdown-menu');?>
            </li>
        </ul>
  </div>
</nav>
<div class="clearfix"></div>
<div class="visible-sm col-sm-<?php echo $content_width . ' ' . MODULE_CONTENT_HEADER_CATEGORIES_CONTENT_ALIGN; ?> searchbox-margin">
              <?php echo '<a class="dropdown-toggle" data-toggle="dropdown" href="#">' . MODULE_CONTENT_HEADER_CATEGORIES_TEXT . '<span class="caret"></span></a>'; ?>
              <?php echo build_hoz('dropdown-menu');?>
</div>
Edited by raiwa

Share this post


Link to post
Share on other sites

Forgot the Stylesheets:

user.css:

/* category menu in navbar */
.dropdown-submenu { position:relative;}
.dropdown-menu > .dropdown > .dropdown-menu, .dropdown-submenu > .dropdown-menu{top:150%;left:0;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;}

Share this post


Link to post
Share on other sites

Hello @@vampirehunter,

Still waiting for someone to clarify my last question. Where abouts to put the short bit of code? Trying to put it into a plugin.

Which snippet you mean

 

has anyone get demos of this menu in action

 

In my develop store:

http://www.sarplataygemas.com/sarplataygemasbs/

See on xs and sm (mobile and tablet size)

 

regards

Rainer

Share this post


Link to post
Share on other sites

I think it was the buildhoz function.

 

If making this code into a module, where to put the function rather than edit html output file?

 

its needed in various modules, so if putted in the modules you should condition with:

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

    $OSCOM_CategoryTree = new explode_category_tree('$root_category_id');
    
    //Your new function
    $OSCOM_CategoryTree->setNewRootCategoryID($root_category_id);   

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

    return $data;
  } 
} 

otherwise you could put it in a own function file and include it in each module:

      require_once(DIR_WS_FUNCTIONS . 'build_hoz.php');

Hope this helps

Rainer

Share this post


Link to post
Share on other sites

 

Forgot the Stylesheets:

user.css:

/* category menu in navbar */
.dropdown-submenu { position:relative;}
.dropdown-menu > .dropdown > .dropdown-menu, .dropdown-submenu > .dropdown-menu{top:150%;left:0;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;}

 

hi

 

if i wanted to have the navbar go horizontal as in the 1st post example by glwalker instead of your vertical method.

 

do i need to change the line reffering to the following?

<ul class="nav nav-pills nav-stacked">

Im adding the navbar as a new header content module, so i can put it somewhere after the logo and search bar.

 

 

im looking at your code here:

<?php
/*
  $Id$

  osCommerce, Open Source E-Commerce Solutions
  http://www.oscommerce.com

  Copyright (c) 2014 osCommerce

  Released under the GNU General Public License
*/

  class cm_header_categories {
    var $code;
    var $group;
    var $title;
    var $description;
    var $sort_order;
    var $enabled = false;

    function cm_header_categories() {
      $this->code = get_class($this);
      $this->group = basename(dirname(__FILE__));

      $this->title = MODULE_CONTENT_HEADER_CATEGORIES_TITLE;
      $this->description = MODULE_CONTENT_HEADER_CATEGORIES_DESCRIPTION;
      $this->description .= '<div class="secWarning">' . MODULE_CONTENT_BOOTSTRAP_ROW_DESCRIPTION . '</div>';

      if ( defined('MODULE_CONTENT_HEADER_CATEGORIES_STATUS') ) {
        $this->sort_order = MODULE_CONTENT_HEADER_CATEGORIES_SORT_ORDER;
        $this->enabled = (MODULE_CONTENT_HEADER_CATEGORIES_STATUS == 'True');
      }
    }

    
    function execute() {
      global $oscTemplate;
      
      global $cPath;

      $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);
      
      $category_tree = $OSCOM_CategoryTree->getTree();
      $content_width = (int)MODULE_CONTENT_HEADER_CATEGORIES_CONTENT_WIDTH;
      
      ob_start();
      include(DIR_WS_MODULES . 'content/' . $this->group . '/templates/categories.php');
      $template = ob_get_clean();

      $oscTemplate->addContent($template, $this->group);
    }

    function isEnabled() {
      return $this->enabled;
    }

    function check() {
      return defined('MODULE_CONTENT_HEADER_CATEGORIES_STATUS');
    }

    function install() {
      tep_db_query("insert into configuration (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, set_function, date_added) values ('Enable Header Logo Module', 'MODULE_CONTENT_HEADER_CATEGORIES_STATUS', 'True', 'Do you want to enable the Logo content module?', '6', '1', 'tep_cfg_select_option(array(\'True\', \'False\'), ', now())");
      tep_db_query("insert into configuration (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, set_function, date_added) values ('Content Width', 'MODULE_CONTENT_HEADER_CATEGORIES_CONTENT_WIDTH', '4', 'What width container should the content be shown in?', '6', '1', 'tep_cfg_select_option(array(\'12\', \'11\', \'10\', \'9\', \'8\', \'7\', \'6\', \'5\', \'4\', \'3\', \'2\', \'1\'), ', now())");
      tep_db_query("insert into configuration (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, set_function, date_added) values ('Content Align', 'MODULE_CONTENT_HEADER_CATEGORIES_CONTENT_ALIGN', 'text-center', 'How should the content be aligned?', '6', '1', 'tep_cfg_select_option(array(\'text-left\', \'text-center\', \'text-right\'), ', now())");
      tep_db_query("insert into configuration (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, date_added) values ('Sort Order', 'MODULE_CONTENT_HEADER_CATEGORIES_SORT_ORDER', '0', 'Sort order of display. Lowest is displayed first.', '6', '0', now())");
    }

    function remove() {
      tep_db_query("delete from configuration where configuration_key in ('" . implode("', '", $this->keys()) . "')");
    }

    function keys() {
      return array('MODULE_CONTENT_HEADER_CATEGORIES_STATUS', 'MODULE_CONTENT_HEADER_CATEGORIES_CONTENT_WIDTH', 'MODULE_CONTENT_HEADER_CATEGORIES_CONTENT_ALIGN', 'MODULE_CONTENT_HEADER_CATEGORIES_SORT_ORDER');
    }
  }

Share this post


Link to post
Share on other sites

Hello @@vampirehunter,

 

If I remember well you need to modify only the css. In this line:

.dropdown-menu > .dropdown > .dropdown-menu, .dropdown-submenu > .dropdown-menu{top:150%;left:0;margin-top:-6px;;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;}

Change "left:0" to the width of the menu to shift it horizontal.

and change "margin-top:-6px;" to a more negative value to move the submenus up.

 

Be aware on mobile (xs) view. The submenus may move out of screen. It's the reason I show them vertical.

You can use different settings for different media by wrapping the alternative settings in "@@media (max-width: 768px) {" etc.

 

regards

Rainer
 

Share this post


Link to post
Share on other sites

I've been using this script for several months now and I'm wondering (@@raiwa) if you (or anyone else) have seen intermittent issues with this script on IOS?

<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>

I'm presuming it's the javascript.... but not 100% sure.

 

Intermittently, (I believe it may be when the looking at a cached page - but I'm not 100% on this) on IOS and then trying to use the menu it "just doesn't work". The main menu opens up...but subcats do not open and clicking takes you straight back to index?

 

A simple refresh fixes the issue.... but not ideal.

 

As a test I've moved this to a header_tag module....  but I presume it will make no difference? (below this the header tag).

<?php
/*
  $Id$

  osCommerce, Open Source E-Commerce Solutions
  http://www.oscommerce.com

  Copyright (c) 2014 osCommerce

  Released under the GNU General Public License
*/

  class ht_nav_menu {
    var $code = 'ht_nav_menu';
    var $group = 'footer_scripts';
    var $title;
    var $description;
    var $sort_order;
    var $enabled = false;

    function ht_nav_menu() {
      $this->title = MODULE_HEADER_TAGS_NAV_MENU_TITLE;
      $this->description = MODULE_HEADER_TAGS_NAV_MENU_DESCRIPTION;

      if ( defined('MODULE_HEADER_TAGS_NAV_MENU_STATUS') ) {
        $this->sort_order = MODULE_HEADER_TAGS_NAV_MENU_SORT_ORDER;
        $this->enabled = (MODULE_HEADER_TAGS_NAV_MENU_STATUS == 'True');
      }
    }

    function execute() {
      global $PHP_SELF, $oscTemplate;

      if (tep_not_null(MODULE_HEADER_TAGS_NAV_MENU_PAGES)) {
        $pages_array = array();

        foreach (explode(';', MODULE_HEADER_TAGS_NAV_MENU_PAGES) as $page) {
          $page = trim($page);

          if (!empty($page)) {
            $pages_array[] = $page;
          }
        }
        

$output = <<<EOD
<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>
EOD;



        if (in_array(basename($PHP_SELF), $pages_array)) {
           $oscTemplate->addBlock($output, $this->group);
        }
      }
    }

    function isEnabled() {
      return $this->enabled;
    }

    function check() {
      return defined('MODULE_HEADER_TAGS_NAV_MENU_STATUS');
    }

    function install() {
      tep_db_query("insert into " . TABLE_CONFIGURATION . " (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, set_function, date_added) values ('Enable Equal Heights Module', 'MODULE_HEADER_TAGS_NAV_MENU_STATUS', 'True', 'Do you want to enable the Equal Heights module?', '6', '1', 'tep_cfg_select_option(array(\'True\', \'False\'), ', now())");
      tep_db_query("insert into " . TABLE_CONFIGURATION . " (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, use_function, set_function, date_added) values ('Pages', 'MODULE_HEADER_TAGS_NAV_MENU_PAGES', '" . implode(';', $this->get_default_pages()) . "', 'The pages to add the script to.', '6', '0', 'ht_nav_menu_show_pages', 'ht_nav_menu_edit_pages(', now())");
      tep_db_query("insert into " . TABLE_CONFIGURATION . " (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, date_added) values ('Sort Order', 'MODULE_HEADER_TAGS_NAV_MENU_SORT_ORDER', '0', 'Sort order of display. Lowest is displayed first.', '6', '0', now())");
    }

    function remove() {
      tep_db_query("delete from " . TABLE_CONFIGURATION . " where configuration_key in ('" . implode("', '", $this->keys()) . "')");
    }

    function keys() {
      return array('MODULE_HEADER_TAGS_NAV_MENU_STATUS', 'MODULE_HEADER_TAGS_NAV_MENU_PAGES', 'MODULE_HEADER_TAGS_NAV_MENU_SORT_ORDER');
    }

    function get_default_pages() {
      return array('index.php');
    }
  }

  function ht_nav_menu_show_pages($text) {
    return nl2br(implode("\n", explode(';', $text)));
  }

  function ht_nav_menu_edit_pages($values, $key) {
    global $PHP_SELF;

    $file_extension = substr($PHP_SELF, strrpos($PHP_SELF, '.'));
    $files_array = array();
	  if ($dir = @[member=dir](DIR_FS_CATALOG)) {
	    while ($file = $dir->read()) {
	      if (!is_dir(DIR_FS_CATALOG . $file)) {
	        if (substr($file, strrpos($file, '.')) == $file_extension) {
            $files_array[] = $file;
          }
        }
      }
      sort($files_array);
      $dir->close();
    }

    $values_array = explode(';', $values);

    $output = '';
    foreach ($files_array as $file) {
      $output .= tep_draw_checkbox_field('ht_nav_menu_file[]', $file, in_array($file, $values_array)) . ' ' . tep_output_string($file) . '<br />';
    }

    if (!empty($output)) {
      $output = '<br />' . substr($output, 0, -6);
    }

    $output .= tep_draw_hidden_field('configuration[' . $key . ']', '', 'id="htrn_files"');

    $output .= '<script>
                function htrn_update_cfg_value() {
                  var htrn_selected_files = \'\';

                  if ($(\'input[name="ht_nav_menu_file[]"]\').length > 0) {
                    $(\'input[name="ht_nav_menu_file[]"]:checked\').each(function() {
                      htrn_selected_files += $(this).attr(\'value\') + \';\';
                    });

                    if (htrn_selected_files.length > 0) {
                      htrn_selected_files = htrn_selected_files.substring(0, htrn_selected_files.length - 1);
                    }
                  }

                  $(\'#htrn_files\').val(htrn_selected_files);
                }

                $(function() {
                  htrn_update_cfg_value();

                  if ($(\'input[name="ht_nav_menu_file[]"]\').length > 0) {
                    $(\'input[name="ht_nav_menu_file[]"]\').change(function() {
                      htrn_update_cfg_value();
                    });
                  }
                });
                </script>';

    return $output;
  }
?>

Edited by greasemonkey

Share this post


Link to post
Share on other sites

Hello Scott @@greasemonkey,

 

I have observed this issue due to an error I had in the modal login (pop up) and also an issue with paypal login.  It seems the script interferes with other scripts and it depends on the loading order of the scripts.

I had to modify paypal login to load it's script as a footer script.

Although my issues were not intermitent or cache related, it always didn't work.

As I do not know which modules you are using, it can be related to others on your store. Try to switch off step by step the modules which add javascript to isolate conflicts.

 

regards

Rainer

Share this post


Link to post
Share on other sites

@@raiwa thank you very much Rainer.

 

Moving the script out of template_bottom and into a header tag module seems to have fixed the issue completely.

 

I've been testing live for 2 days and have not been able to recreate the problem.

Share this post


Link to post
Share on other sites

@@raiwa on further testing i can absolutely say.... you are correct.

 

 

As I do not know which modules you are using, it can be related to others on your store. Try to switch off step by step the modules which add javascript to isolate conflicts.

 

It looks to conflict with grid/list script.

 

I moved my header_tag module to the head and all seems to be perfect.

Share this post


Link to post
Share on other sites

@@raiwa Rainer...could you post your language files for these modules as well...I could make them up but I'm lazy. :)

 

Here is the thread where you mention the modules so you know what I'm asking about.   I like the idea of having my top level categories in boxes and content modules that I can turn on and off depending on the site I want to use them on.   A great idea. :thumbsup:

 

http://forums.oscommerce.com/topic/398284-oscommerce-23-bootstrap-nav-menu/?p=1726334

 

Dan

Share this post


Link to post
Share on other sites

I love this add on.  So simple to install.  But can anyone tell me, how do I now disable the vertical menu.  I'm probably missing the obvious! 

many thanks

Share this post


Link to post
Share on other sites
15 minutes ago, Rosyweb said:

But can anyone tell me, how do I now disable the vertical menu.  I'm probably missing the obvious!

If you refer to the (left) column categories box: admin => modules => boxes => Categories => Remove Module

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

×