change navigation bar bootstrap 2.3.4

[dinopacha]

Hello all,

I would like to make a change in 2.3.4 bs.

I would like to adjust the right side of my navigation bar.

Instead of site settings, my account, checkout, I want a search bar and social icons.

Must I do this through: includes modules content-navigation templates-navbar.php,

or should I create a new navbar in header.php.

 

friendly regards

Will,​

[Hotclutch]

You will have to remove the code from \includes\modules\content\navigation\templates\navbar.php and add in your code for the search bar and icons.

[dinopacha]

Hello Hotclutch,

 

I've tried that.

For example, the search bar.

 

<ul class = "nav-nav navbar navbar-right">

<div class = "col-sm - <? php echo $ content_width;> navbar-right?">   <? php echo $ search_box?; ?> </ div>

</ ul>

 

but it is not working.

please help.

[Hotclutch]

If you can't code, there's a commercial section where you can hire somebody from here to code a solution for you.

[dinopacha]

Yes I know but I want to learn.

[allaboutwicker]

Hi Will,

 

You will need to do a little different then what you are. In includes/modules/content/navigation/templates/navbar.php remove all coding between <ul class="nav navbar-nav navbar-right"> and the end </u> You can copy and paste the top part of the file in there for code to use to work with as such in mine. Note: yours may be a little different, but should look close: 

 

         <?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>'; ?>

     

You can then modify and put in what you want, but you will also need to go to the following file and define what you need in there: includes/languages/english/modules/content/navigation/cm_navbar.php As in notice the define code for What's New: 

 

 define('HEADER_WHATS_NEW', '<i class="glyphicon glyphicon-certificate"></i><span class="hidden-sm">  New Products</span>');

 

You can put actual page links in there as well as here if you like: 

 

 <?php echo '<li><a href="http://www.YourSite Name.com/shipping.php">' . SHIPPING_INFO . '</a></li>'; ?>

 

I hope that helps

[dinopacha]

Hi Leslie,

wow, this way I can learn it.

I will,try this out.

already thanks. really top

[dinopacha]

Do I have to make the anchor tags in: includes/modules/content/navigation/templates/navbar.php

or do I have to make the anchor tags also in: includes/languages/english/modules/content/navigation/cm_navbar.php​

I'm asking because this is working but now nothing is in: includes/languages/english/modules/content/navigation/cm_navbar.php.​

 

<ul class="nav navbar-nav navbar-right social">
          <a class="btn btn-social-icon btn-twitter" href="https://twitter.com/">
                <i class="fa fa-twitter"></i>
            </a>

 

            <a class="btn btn-social-icon btn-youtube" href="https://www.youtube.com">
                <i class="fa fa-youtube"></i>
            </a>

 

            <a class="btn btn-social-icon btn-facebook" href="https://www.facebook.com/">
                <i class="fa fa-facebook"></i>
            </a>

 

            <a class="btn btn-social-icon btn-rss" href="https://www.rss.com/">
                <i class="fa fa-rss"></i>
            </a>
 </ul>

​

​Thank you,

[Hotclutch]

Think you should make them in templates\navbar.php

 

BTW: If you want to use $search_box, the code for the search box is in cm_header_search.php

      $search_box = '<div class="searchbox-margin">';
      $search_box .= tep_draw_form('quick_find', tep_href_link('advanced_search_result.php', '', $request_type, false), 'get', 'class="form-horizontal"');
      $search_box .= '  <div class="input-group">' .
                          tep_draw_input_field('keywords', '', 'required placeholder="' . TEXT_SEARCH_PLACEHOLDER . '"', 'search') . '<span class="input-group-btn"><button type="submit" class="btn btn-info"><i class="glyphicon glyphicon-search"></i></button></span>' .
                      '  </div>';
      $search_box .=  tep_hide_session_id() . '</form>';
      $search_box .= '</div>';

So you now need to place that in cm_navbar.php if you want to have the search box in the navigation. 

[dinopacha]

I think I have it, but I only have to put a class (class="btn btn-social-icon") in the anchor tags for the designing.

 

 

includes/modules/content/navigation/templates/navbar.php​

<ul class="nav navbar-nav navbar-right social">
          <?php echo '<li><a href="https://twitter.com/">'. HEADER_TWITTER . '</a></li>'; ?>
          <?php echo '<li><a href="https://www.youtube.com">'. HEADER_YOUTUBE . '</a></li>'; ?>
          <?php echo '<li><a href="https://www.facebook.com/">'. HEADER_FACEBOOK . '</a></li>'; ?>
          <?php echo '<li><a href="https://www.rss.com/">'. HEADER_RSS . '</a></li>'; ?>
      </ul>​

 

includes/languages/english/modules/content/navigation/cm_navbar.php​

 define('HEADER_TWITTER', '<i class="fa fa-twitter"></i><span class="hidden-sm"></span>');
  define('HEADER_YOUTUBE', '<i class="fa fa-youtube"></i><span class="hidden-sm"></span>');
  define('HEADER_FACEBOOK', '<i class="fa fa-facebook"></i><span class="hidden-sm"></span>');
  define('HEADER_RSS', '<i class="fa fa-rss"></i><span class="hidden-sm"></span>');​

[dinopacha]

No I have put the css in.

 

ul.btn-social {
 list-style: none;
 padding: 0px;
}

 

ul.btn-social li {
 float: right;
 position: relative;
}

 

ul.btn-social li a {
 display: inline-block;
 color: #337AB7;
 text-decoration: none;
 outline: none;
 border: none;
 padding: 6px 15px;
 margin: 0px;
}

 

i.fa {
 float: left;
 color: #337AB7;
}

 

i.fa:hover {
 color: #333;
}

Is there a way to put the .class (btn btn-social) right in the code because this is already styled by bootstrap.

[dinopacha]

I have changed the class in: includes/modules/content/navigation/templates/navbar.php​

<ul class="nav navbar-nav navbar-right social">

to

<ul class="nav navbar-nav navbar-right btn btn-social">

[dinopacha]

i have try to put the above $search_box code from Ashley in cm_navbar.php but nothing happens.

Please help..

[Hotclutch]

It works, I have tried it quickly on my test store i.e search bar in the navigation, left of site settings.

 

Place this:

      $search_box = '<div class="searchbox-margin">';
      $search_box .= tep_draw_form('quick_find', tep_href_link('advanced_search_result.php', '', $request_type, false), 'get', 'class="form-horizontal"');
      $search_box .= '  <div class="input-group">' .
                          tep_draw_input_field('keywords', '', 'required placeholder="' . TEXT_SEARCH_PLACEHOLDER . '"', 'search') . '<span class="input-group-btn"><button type="submit" class="btn btn-info"><i class="glyphicon glyphicon-search"></i></button></span>' .
                      '  </div>';
      $search_box .=  tep_hide_session_id() . '</form>';
      $search_box .= '</div>'; 

below

      global $PHP_SELF, $cart, $lng, $language, $currencies, $HTTP_GET_VARS, $request_type, $currency, $oscTemplate;
      global $customer_first_name; 

In cm_navbar.php

 

Then in templates/navbar.php

 

Find

 

<ul class="nav navbar-nav navbar-right">

 

and place this below it:

 

<?php echo $search_box; ?>

 

Then you need to size it the way you want it.

[dinopacha]

hi Ashley,

I will try it tommorow as soon as I get up.

Ps. Sorry for all the silly questions but I really want to learn it.

 

Thank you ,

[Hotclutch]

cm_navbar.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_navbar {
    var $code;
    var $group;
    var $title;
    var $description;
    var $sort_order;
    var $enabled = false;

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

      $this->title = MODULE_CONTENT_NAVBAR_TITLE;
      $this->description = MODULE_CONTENT_NAVBAR_DESCRIPTION;

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

    function execute() {
      global $PHP_SELF, $cart, $lng, $language, $currencies, $HTTP_GET_VARS, $request_type, $currency, $oscTemplate;
      global $customer_first_name;
	  
      $search_box .= tep_draw_form('quick_find', tep_href_link('advanced_search_result.php', '', $request_type, false), 'get', 'class="form-horizontal"');
      $search_box .= '  <div class="input-group">' .
                          tep_draw_input_field('keywords', '', 'required placeholder="' . TEXT_SEARCH_PLACEHOLDER . '"', 'search') . '<span class="input-group-btn"><button type="submit" class="btn btn-info"><i class="glyphicon glyphicon-search"></i></button></span>' .
                      '  </div>';
      $search_box .=  tep_hide_session_id() . '</form>';	  

      ob_start();
      include(DIR_WS_MODULES . 'content/' . $this->group . '/templates/navbar.php');
      $template = ob_get_clean();

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

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

    function check() {
      return defined('MODULE_CONTENT_NAVBAR_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 Navbar Module', 'MODULE_CONTENT_NAVBAR_STATUS', 'True', 'Should the Navbar be shown? ', '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, date_added) values ('Sort Order', 'MODULE_CONTENT_NAVBAR_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_CONTENT_NAVBAR_STATUS', 'MODULE_CONTENT_NAVBAR_SORT_ORDER');
    }
  }

navbar.php

<nav class="navbar navbar-inverse navbar-no-corners navbar-no-margin" role="navigation">
  <div class="<?php echo BOOTSTRAP_CONTAINER; ?>">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-navbar-collapse-core-nav">
        <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-core-nav">
        <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>'; ?>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <?php
          if (substr(basename($PHP_SELF), 0, 8) != 'checkout') {
            ?>
            <li class="dropdown">
              <a class="dropdown-toggle" data-toggle="dropdown" href="#"><?php echo HEADER_SITE_SETTINGS; ?></a>
              <ul class="dropdown-menu">
                <li class="text-center text-muted bg-primary"><?php echo sprintf(USER_LOCALIZATION, ucwords($language), $currency); ?></li>
                <?php
                // languages
                if (!isset($lng) || (isset($lng) && !is_object($lng))) {
                 include(DIR_WS_CLASSES . 'language.php');
                  $lng = new language;
                }
                if (count($lng->catalog_languages) > 1) {
                  echo '<li class="divider"></li>';
                  reset($lng->catalog_languages);
                  while (list($key, $value) = each($lng->catalog_languages)) {
                    echo '<li><a href="' . tep_href_link(basename($PHP_SELF), tep_get_all_get_params(array('language', 'currency')) . 'language=' . $key, $request_type) . '">' . tep_image(DIR_WS_LANGUAGES .  $value['directory'] . '/images/' . $value['image'], $value['name'], null, null, null, false) . ' ' . $value['name'] . '</a></li>';
                  }
                }
                // currencies
                if (isset($currencies) && is_object($currencies) && (count($currencies->currencies) > 1)) {
                  echo '<li class="divider"></li>';
                  reset($currencies->currencies);
                  $currencies_array = array();
                  while (list($key, $value) = each($currencies->currencies)) {
                    $currencies_array[] = array('id' => $key, 'text' => $value['title']);
                    echo '<li><a href="' . tep_href_link(basename($PHP_SELF), tep_get_all_get_params(array('language', 'currency')) . 'currency=' . $key, $request_type) . '">' . $value['title'] . '</a></li>';
                  }
                }
                ?>
              </ul>
            </li>
            <?php
          }
          ?>
          <li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#"><?php echo (tep_session_is_registered('customer_id')) ? sprintf(HEADER_ACCOUNT_LOGGED_IN, $customer_first_name) : HEADER_ACCOUNT_LOGGED_OUT; ?></a>
            <ul class="dropdown-menu">
              <?php
              if (tep_session_is_registered('customer_id')) {
                echo '<li><a href="' . tep_href_link(FILENAME_LOGOFF, '', 'SSL') . '">' . HEADER_ACCOUNT_LOGOFF . '</a>';
              }
              else {
                 echo '<li><a href="' . tep_href_link(FILENAME_LOGIN, '', 'SSL') . '">' . HEADER_ACCOUNT_LOGIN . '</a>';
                 echo '<li><a href="' . tep_href_link(FILENAME_CREATE_ACCOUNT, '', 'SSL') . '">' . HEADER_ACCOUNT_REGISTER . '</a>';
              }
              ?>
              <li class="divider"></li>
              <li><?php echo '<a href="' . tep_href_link(FILENAME_ACCOUNT, '', 'SSL') . '">' . HEADER_ACCOUNT . '</a>'; ?></li>
              <li><?php echo '<a href="' . tep_href_link(FILENAME_ACCOUNT_HISTORY, '', 'SSL') . '">' . HEADER_ACCOUNT_HISTORY . '</a>'; ?></li>
              <li><?php echo '<a href="' . tep_href_link(FILENAME_ADDRESS_BOOK, '', 'SSL') . '">' . HEADER_ACCOUNT_ADDRESS_BOOK . '</a>'; ?></li>
              <li><?php echo '<a href="' . tep_href_link(FILENAME_ACCOUNT_PASSWORD, '', 'SSL') . '">' . HEADER_ACCOUNT_PASSWORD . '</a>'; ?></li>
            </ul>
          </li>
          <?php
          if ($cart->count_contents() > 0) {
            ?>
            <li class="dropdown">
              <a class="dropdown-toggle" data-toggle="dropdown" href="#"><?php echo sprintf(HEADER_CART_CONTENTS, $cart->count_contents()); ?></a>
              <ul class="dropdown-menu">
                <li><?php echo '<a href="' . tep_href_link(FILENAME_SHOPPING_CART) . '">' . sprintf(HEADER_CART_HAS_CONTENTS, $cart->count_contents(), $currencies->format($cart->show_total())) . '</a>'; ?></li>
                <?php
                if ($cart->count_contents() > 0) {
                  echo '<li class="divider"></li>';
                  echo '<li><a href="' . tep_href_link(FILENAME_SHOPPING_CART) . '">' . HEADER_CART_VIEW_CART . '</a></li>';
                }
                ?>
              </ul>
            </li>
            <?php
            echo '<li><a href="' . tep_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL') . '">' . HEADER_CART_CHECKOUT . '</a></li>';
          }
          else {
            echo '<li class="nav navbar-text">' . HEADER_CART_NO_CONTENTS . '</li>';
          }
          ?>
        </ul>
      <div class="pull-right searchbox-margin col-sm-2"><?php echo $search_box; ?></div>
    </div>
  </div>
</nav>

OR navbar.php

<nav class="navbar navbar-inverse navbar-no-corners navbar-no-margin" role="navigation">
  <div class="<?php echo BOOTSTRAP_CONTAINER; ?>">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-navbar-collapse-core-nav">
        <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-core-nav">
        <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>'; ?>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <?php
          if (substr(basename($PHP_SELF), 0, 8) != 'checkout') {
            ?>
            <li class="dropdown">
              <a class="dropdown-toggle" data-toggle="dropdown" href="#"><?php echo HEADER_SITE_SETTINGS; ?></a>
              <ul class="dropdown-menu">
                <li class="text-center text-muted bg-primary"><?php echo sprintf(USER_LOCALIZATION, ucwords($language), $currency); ?></li>
                <?php
                // languages
                if (!isset($lng) || (isset($lng) && !is_object($lng))) {
                 include(DIR_WS_CLASSES . 'language.php');
                  $lng = new language;
                }
                if (count($lng->catalog_languages) > 1) {
                  echo '<li class="divider"></li>';
                  reset($lng->catalog_languages);
                  while (list($key, $value) = each($lng->catalog_languages)) {
                    echo '<li><a href="' . tep_href_link(basename($PHP_SELF), tep_get_all_get_params(array('language', 'currency')) . 'language=' . $key, $request_type) . '">' . tep_image(DIR_WS_LANGUAGES .  $value['directory'] . '/images/' . $value['image'], $value['name'], null, null, null, false) . ' ' . $value['name'] . '</a></li>';
                  }
                }
                // currencies
                if (isset($currencies) && is_object($currencies) && (count($currencies->currencies) > 1)) {
                  echo '<li class="divider"></li>';
                  reset($currencies->currencies);
                  $currencies_array = array();
                  while (list($key, $value) = each($currencies->currencies)) {
                    $currencies_array[] = array('id' => $key, 'text' => $value['title']);
                    echo '<li><a href="' . tep_href_link(basename($PHP_SELF), tep_get_all_get_params(array('language', 'currency')) . 'currency=' . $key, $request_type) . '">' . $value['title'] . '</a></li>';
                  }
                }
                ?>
              </ul>
            </li>
            <?php
          }
          ?>
          <li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#"><?php echo (tep_session_is_registered('customer_id')) ? sprintf(HEADER_ACCOUNT_LOGGED_IN, $customer_first_name) : HEADER_ACCOUNT_LOGGED_OUT; ?></a>
            <ul class="dropdown-menu">
              <?php
              if (tep_session_is_registered('customer_id')) {
                echo '<li><a href="' . tep_href_link(FILENAME_LOGOFF, '', 'SSL') . '">' . HEADER_ACCOUNT_LOGOFF . '</a>';
              }
              else {
                 echo '<li><a href="' . tep_href_link(FILENAME_LOGIN, '', 'SSL') . '">' . HEADER_ACCOUNT_LOGIN . '</a>';
                 echo '<li><a href="' . tep_href_link(FILENAME_CREATE_ACCOUNT, '', 'SSL') . '">' . HEADER_ACCOUNT_REGISTER . '</a>';
              }
              ?>
              <li class="divider"></li>
              <li><?php echo '<a href="' . tep_href_link(FILENAME_ACCOUNT, '', 'SSL') . '">' . HEADER_ACCOUNT . '</a>'; ?></li>
              <li><?php echo '<a href="' . tep_href_link(FILENAME_ACCOUNT_HISTORY, '', 'SSL') . '">' . HEADER_ACCOUNT_HISTORY . '</a>'; ?></li>
              <li><?php echo '<a href="' . tep_href_link(FILENAME_ADDRESS_BOOK, '', 'SSL') . '">' . HEADER_ACCOUNT_ADDRESS_BOOK . '</a>'; ?></li>
              <li><?php echo '<a href="' . tep_href_link(FILENAME_ACCOUNT_PASSWORD, '', 'SSL') . '">' . HEADER_ACCOUNT_PASSWORD . '</a>'; ?></li>
            </ul>
          </li>
          <?php
          if ($cart->count_contents() > 0) {
            ?>
            <li class="dropdown">
              <a class="dropdown-toggle" data-toggle="dropdown" href="#"><?php echo sprintf(HEADER_CART_CONTENTS, $cart->count_contents()); ?></a>
              <ul class="dropdown-menu">
                <li><?php echo '<a href="' . tep_href_link(FILENAME_SHOPPING_CART) . '">' . sprintf(HEADER_CART_HAS_CONTENTS, $cart->count_contents(), $currencies->format($cart->show_total())) . '</a>'; ?></li>
                <?php
                if ($cart->count_contents() > 0) {
                  echo '<li class="divider"></li>';
                  echo '<li><a href="' . tep_href_link(FILENAME_SHOPPING_CART) . '">' . HEADER_CART_VIEW_CART . '</a></li>';
                }
                ?>
              </ul>
            </li>
            <?php
            echo '<li><a href="' . tep_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL') . '">' . HEADER_CART_CHECKOUT . '</a></li>';
          }
          else {
            echo '<li class="nav navbar-text">' . HEADER_CART_NO_CONTENTS . '</li>';
          }
          ?>
        </ul>
      <div class="searchbox-margin col-sm-2"><?php echo $search_box; ?></div>
    </div>
  </div>
</nav>

[Hotclutch]

If you want to make the search box bigger change col-sm-2 to col-sm-4

[dinopacha]

Hi Ashley,

I've tried it and it works really great.

hurray....

thanks for the explanation, and where to put code.

I've researched how and what with the code, and understand now how to do it.

(with these then !!)

 

thanks again

I'm really glad you helped me. :thumbsup:

​