Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Adding extras to Navbar


Recommended Posts

I am trying to modify the navbar so it looks like the image I have attached, all good so far apart from the search and cart only open when I click the icons in sequence from right to left.

 

Simpy put the navs do not open and close correctly.

 

http://s19.postimg.org/pw3c28mgz/Screenshot_9.png

<nav class="navbar navbar-default navbar-no-corners navbar-no-margin" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">

      <button type="button" class="btn-icon navbar-toggle" data-toggle="collapse" data-target="#bs-navbar-collapse-1">
        <span class="sr-only"><?php echo HEADER_TOGGLE_NAV; ?></span>
        <span class="fa fa-align-justify"></span>
      </button>

      <button type="button" class="btn-icon navbar-toggle" data-toggle="collapse" data-target="#bs-navbar-collapse-2">
        <span class="sr-only"><?php echo HEADER_TOGGLE_NAV; ?></span>
        <span class="fa fa-search"></span>
      </button>

      <button type="button" class="btn-icon navbar-toggle" data-toggle="collapse" data-target="#bs-navbar-collapse-3">
        <span class="sr-only"><?php echo HEADER_TOGGLE_NAV; ?></span>
        <span class="fa fa-shopping-cart"></span>
      </button>

      <a class="hidden-lg navbar-brand" href="#"><?php echo '<a href="' . tep_href_link('index.php') . '">' . tep_image(DIR_WS_IMAGES . STORE_LOGO, STORE_NAME) . '</a>'; ?></a>

    </div>

    <div class="collapse navbar-collapse" id="bs-navbar-collapse-1">
      <div class="container-fluid hidden-lg">
        <ul class="nav navbar-nav">
          <?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">
          <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>
        </ul>
      </div>

     <div class="collapse navbar-collapse" id="bs-navbar-collapse-2">
      <div class="container-fluid hidden-lg">
        <ul class="nav navbar-nav navbar-right">
         <?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 . '"') . '<span class="input-group-btn"><button type="submit" class="btn btn-info"><i class="glyphicon glyphicon-search"></i></button></span>' .
		                      '  </div>';
		      $search_box .= '</div>';
		      $search_box .=  tep_hide_session_id() . '</form>';
          ?>
              <li><?php echo $search_box; ?></li>
            </ul>
          </li>
        </ul>
      </div>

     <div class="collapse navbar-collapse" id="bs-navbar-collapse-3">
      <div class="container-fluid hidden-lg">
        <ul class="nav navbar-nav navbar-right">
          <?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>
          </li>
        </ul>
      </div>
    </div>
  </div>
</nav>
Link to comment
Share on other sites

I can see what you're attempting to do, and it's a cool idea.  The problems as I see them (note this is a quick glance, no in-depth at all);

 

1.  you have some bits of broken markup

=> what looks like an extra li and ul in each bs-navbar-collapse section

 

2.  the bs-navbar-collapse-3 is inside the bs-navbar-collapse-2 which is inside the bs-navbar-collapse-1

=> 3 will only work is both 1 and 2 are open

=> 2 will only work if 1 is open

Link to comment
Share on other sites

Try:

 

 

<nav class="navbar navbar-default navbar-no-corners navbar-no-margin" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
 
      <button type="button" class="btn-icon navbar-toggle" data-toggle="collapse" data-target="#bs-navbar-collapse-1">
        <span class="sr-only"><?php echo HEADER_TOGGLE_NAV; ?></span>
        <span class="fa fa-align-justify"></span>
      </button>
 
      <button type="button" class="btn-icon navbar-toggle" data-toggle="collapse" data-target="#bs-navbar-collapse-2">
        <span class="sr-only"><?php echo HEADER_TOGGLE_NAV; ?></span>
        <span class="fa fa-search"></span>
      </button>
 
      <button type="button" class="btn-icon navbar-toggle" data-toggle="collapse" data-target="#bs-navbar-collapse-3">
        <span class="sr-only"><?php echo HEADER_TOGGLE_NAV; ?></span>
        <span class="fa fa-shopping-cart"></span>
      </button>
 
      <a class="hidden-lg navbar-brand" href="#"><?php echo '<a href="' . tep_href_link('index.php') . '">' . tep_image(DIR_WS_IMAGES . STORE_LOGO, STORE_NAME) . '</a>'; ?></a>
 
    </div>
 
    <div class="collapse navbar-collapse" id="bs-navbar-collapse-1">
      <div class="container-fluid hidden-lg">
        <ul class="nav navbar-nav">
          <?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">
          <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>
        </ul>
      </div>      
    </div>
    
    <div class="collapse navbar-collapse" id="bs-navbar-collapse-2">
      <div class="container-fluid hidden-lg">
        <ul class="nav navbar-nav navbar-right">
          <?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 . '"') . '<span class="input-group-btn"><button type="submit" class="btn btn-info"><i class="glyphicon glyphicon-search"></i></button></span>' .
                     '  </div>';
     $search_box .= '</div>';
     $search_box .=  tep_hide_session_id() . '</form>';
          ?>
          <li><?php echo $search_box; ?></li>
        </ul>
      </div>
    </div>
      
    <div class="collapse navbar-collapse" id="bs-navbar-collapse-3">
      <div class="container-fluid hidden-lg">
        <ul class="nav navbar-nav navbar-right">
          <?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>
    </div>      
  </div>
</nav>
Link to comment
Share on other sites

@@burt

 

thats better but if I click on the shopping cart and then immediately the search icon the search box is loaded on top of the shopping cart.

 

I was thinking that the shopping cart should close before opening the search box

 

if that makes sense (w00t)

Link to comment
Share on other sites

What makes more sense to me ... 

 

I click "A" button, the "A" content opens.

I click "B" button, the "B" content opens.

I now click "A" button, the "A" content closes.

 

 

Some .js would do what you want, someone must have already made such.

If not, should be simple enough for you to handle.

Link to comment
Share on other sites

What makes more sense to me ... 

 

I click "A" button, the "A" content opens.

I click "B" button, the "B" content opens.

I now click "A" button, the "A" content closes.

 

 

Some .js would do what you want, someone must have already made such.

If not, should be simple enough for you to handle.

 

@@burt

 

now I see that a different way

 

I click "A" button, the 'A' content opens.

I click "B" button, the "A" content closes and the "B" content opens.

 

personal taste I suppose

 

back to google for the .js :-

Link to comment
Share on other sites

Archived

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

×
×
  • Create New...