Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Consolidation of Items in Navbar


Recommended Posts

I wrote this for 234bs-gold. This alters only one template file ... no core changes.

 

 

After addressing the Account/Login issue in the navbar:

 

http://www.oscommerce.com/forums/topic/399771-faster-login-with-bootstrap-modal/

 

I then turned my attention to the 'Shopping Cart' and 'Checkout' buttons...

 

In the stock code, once you add an item to your cart, the 'Shopping Cart' in the navbar shows the number of items in your cart, and offers a drop-down. When you click on the drop-down, two choices are shown. The first tells you (again) how many items are in your cart, plus displaying the total dollar amount. The second choice says 'View Cart'. Click on *either* choice, and you are taken to shopping_cart.php. In other words, *both* choices do exactly the same thing.

 

In addition, when you add an item to your cart, a new 'button' is added to the navbar: 'Checkout'. Depending on your screen size and how you may have laid out your store, the addition of this new button can mess up the formatting of the page.

 

So, I set out to consolidate these two buttons, plus add some additional functionality ...

 

In /catalog/includes/modules/content/navigation/templates/navbar.php

 

 

Find: (near the bottom of the file)

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

?>

And replace with this:

<!-- Consolidate 'Cart' and 'Checkout' functions  -->

<!-- STYLING THAT SHOULD BE INSERTED INSIDE THE USER.CSS FILE. THESE ARE HERE JUST FOR DEMO PURPOSE //-->
        <style>
          @[member=media] (min-width: 768px) {
            .mini-cart-width {
              min-width: 350px; /* Make this wide enough to handle your longest part number */
            }
          }

          .custom_scrollbar {
            position: relative;
            max-height: 300px; /* Or whatever you want (eg. 400px) */
            overflow-y: auto;
          }
        </style>


<?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 mini-cart-width">
              <li>

                <div class="custom_scrollbar">
                  <table class="table table-striped">
<?php
                    $products = $cart->get_products();
                    for ($i=0, $n=sizeof($products); $i<$n; $i++) {
                      echo '<tr>';

                        echo '  <td>';
                          echo ($products[$i]['quantity']) . 'x' ;
                        echo '  </td>';

                        echo '  <td>';
                          echo '<a href="' . tep_href_link(FILENAME_PRODUCT_INFO) . '?products_id=' . ($products[$i]['id']) .  ">' . ($products[$i]['name']) . '</a>';
                        echo '  </td>';

                        echo '  <td align="right">';
                          $number = (($products[$i]['quantity']) * ($products[$i]['price']));
                          echo '$' . (number_format($number, 2,'.', ','));
                        echo '  </td>';

                      echo '</tr>';
                    }
?>

                  </table>
                </div>
              </li>

              <li class="divider"></li>

<?php

              echo '<li>
                      <span class="col-xs-6">
                        <a href="' . tep_href_link(FILENAME_SHOPPING_CART) . '">
                          <i class="glyphicon glyphicon-shopping-cart"></i> ' . HEADER_CART_VIEW_CART . '</a>
                      </span>
                      <span class="col-xs-6 text-right">
                        <a href="' . tep_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL') . '">'
                          . HEADER_CART_CHECKOUT . '
                        </a>
                      </span>
                    </li>';

?>
            </ul>
          </li>
<?php
        } else {
          echo '<li class="nav navbar-text">' . HEADER_CART_NO_CONTENTS . '</li>';
        }
?>

Now, when an item is added to the cart, the 'Shopping Cart' in the navbar still shows the number of items in your cart. But, when you click on it, the drop-down shows an itemized list of what's in the cart, including the quantity, part number, and total cost for each line item. Beneath the list are 2 choices: one takes you to shopping_cart.php, and the other to checkout.

 

For this proof-of-concept, we put some styling elements in this file ... they should be moved to user.css.

 

Once again, I want to thank @@Tsimi for his assistance in cleaning up my sloppy code, and including several improvements.

 

Malcolm

Link to comment
Share on other sites

@@ArtcoInc

 

Hi

 

Thought Id give this a go and followed carefully, but got the following error.

 

Parse error: syntax error, unexpected 'right' (T_STRING), expecting ',' or ';' in /home/grandp/public_html/BS234/includes/modules/content/navigation/templates/navbar.php on line 126

 

What do I need to change.

 

Cheers

Grandpa

Link to comment
Share on other sites

@@ArtcoInc

Hi Malcolm,

 

Her's the file

<nav class="navbar navbar-inverse navbar-no-corners navbar-no-margin navbar-fixed-top" 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_CONTACT_US) . '">' . HEADER_CONTACT . '</a></li>'; ?>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <?php
          if (substr(basename($PHP_SELF), 0, 8) != 'checkout') {
            ?>
           
            <?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>
            <!-- Wishlist //-->
  <li><?php echo '<a href="' . tep_href_link(FILENAME_WISHLIST, '', 'SSL') . '">' . HEADER_ACCOUNT_WISHLIST . '</a>'; ?></li>
<!-- EOF Wishlist //-->

			</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>
              <!-- Consolidate 'Cart' and 'Checkout' functions  -->

<!-- STYLING THAT SHOULD BE INSERTED INSIDE THE USER.CSS FILE. THESE ARE HERE JUST FOR DEMO PURPOSE //-->
        <style>
          @[member=media] (min-width: 768px) {
            .mini-cart-width {
              min-width: 350px; /* Make this wide enough to handle your longest part number */
            }
          }

          .custom_scrollbar {
            position: relative;
            max-height: 300px; /* Or whatever you want (eg. 400px) */
            overflow-y: auto;
          }
        </style>


<?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 mini-cart-width">
              <li>

                <div class="custom_scrollbar">
                  <table class="table table-striped">
<?php
                    $products = $cart->get_products();
                    for ($i=0, $n=sizeof($products); $i<$n; $i++) {
                      echo '<tr>';

                        echo '  <td>';
                          echo ($products[$i]['quantity']) . 'x' ;
                        echo '  </td>';

                        echo '  <td>';
                          echo '<a href="' . tep_href_link(FILENAME_PRODUCT_INFO) . '?products_id=' . ($products[$i]['id']) .  ">' . ($products[$i]['name']) . '</a>';
                        echo '  </td>';

                        echo '  <td align="right">';
                          $number = (($products[$i]['quantity']) * ($products[$i]['price']));
                          echo '$' . (number_format($number, 2,'.', ','));
                        echo '  </td>';

                      echo '</tr>';
                    }
?>

                  </table>
                </div>
              </li>

              <li class="divider"></li>

<?php

              echo '<li>
                      <span class="col-xs-6">
                        <a href="' . tep_href_link(FILENAME_SHOPPING_CART) . '">
                          <i class="glyphicon glyphicon-shopping-cart"></i> ' . HEADER_CART_VIEW_CART . '</a>
                      </span>
                      <span class="col-xs-6 text-right">
                        <a href="' . tep_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL') . '">'
                          . HEADER_CART_CHECKOUT . '
                        </a>
                      </span>
                    </li>';

?>
            </ul>
          </li>
<?php
        } else {
          echo '<li class="nav navbar-text">' . HEADER_CART_NO_CONTENTS . '</li>';
        }
?>
        </ul>
    </div>
  </div>
</nav>


Here's the error

Parse error: syntax error, unexpected 'right' (T_STRING), expecting ',' or ';' in /home/grandp/public_html/BS234/includes/modules/content/navigation/templates/navbar.php on line 101

 

Many thanks

 

John

Link to comment
Share on other sites

@@grandpaj

 

Try this:                     

 echo '<a href="' . tep_href_link(FILENAME_PRODUCT_INFO) . '?products_id=' . ($products[$i]['id']) .  '">' . ($products[$i]['name']) . '</a>';

@@ArtcoInc

 

Is there any reason to calculate the price with:

                          $number = (($products[$i]['quantity']) * ($products[$i]['price']));
                          echo '$' . (number_format($number, 2,'.', ','));

?

 

Why not use:

echo $currencies->display_price($products[$i]['final_price'], tep_get_tax_rate($products[$i]['tax_class_id']), $products[$i]['quantity']);

????

 

J.J.

 

 

Link to comment
Share on other sites

@@De Dokta


@@ArtcoInc

 

Is there any reason to calculate the price with:

                          $number = (($products[$i]['quantity']) * ($products[$i]['price']));
                          echo '$' . (number_format($number, 2,'.', ','));

?

 

Why not use:

echo $currencies->display_price($products[$i]['final_price'], tep_get_tax_rate($products[$i]['tax_class_id']), $products[$i]['quantity']);

????

 

J.J.

 

 

Because I didn't know how to do that :blush:   Thanks!

 

Malcolm

Link to comment
Share on other sites

@@De Dokta

 

Hi JJ

 

Tried as suggested,

Got this

Parse error: syntax error, unexpected end of file in /home/grandp/public_html/BS234/includes/modules/content/navigation/templates/navbar.php on line 141

 

Line 141 is the line immediately after </nav>

 

Any thoughts.

 

Cheers

 

John

Link to comment
Share on other sites

@@grandpaj

 

 @@De Dokta did indeed catch my mistake :)

 

Apparently, when I was copying the code onto here, I managed to delete the   '   from line 98.  I should have seen something was wrong if I had only looked at the color(s) of the code in the post.

 

Without that single-quote, things got out of sync, resulting in the syntax error in line 101. Line 101 was fine, which made debugging harder when the error message pointed you to the wrong line.

 

Malcolm

Link to comment
Share on other sites

@@grandpaj

 

@@De Dokta

 

Hi JJ

 

Tried as suggested,

Got this

Parse error: syntax error, unexpected end of file in /home/grandp/public_html/BS234/includes/modules/content/navigation/templates/navbar.php on line 141

 

Line 141 is the line immediately after </nav>

 

Any thoughts.

 

Cheers

 

John

 

John

 

That tells me that there is an un-closed tag somewhere. Could be a missing </div>, </ul>, or </li>.

 

Malcolm

Link to comment
Share on other sites

I wrote this for 234bs-gold. This alters only one template file ... no core changes.

 

 

After addressing the Account/Login issue in the navbar:

 

http://www.oscommerce.com/forums/topic/399771-faster-login-with-bootstrap-modal/

 

I then turned my attention to the 'Shopping Cart' and 'Checkout' buttons...

 

In the stock code, once you add an item to your cart, the 'Shopping Cart' in the navbar shows the number of items in your cart, and offers a drop-down. When you click on the drop-down, two choices are shown. The first tells you (again) how many items are in your cart, plus displaying the total dollar amount. The second choice says 'View Cart'. Click on *either* choice, and you are taken to shopping_cart.php. In other words, *both* choices do exactly the same thing.

 

In addition, when you add an item to your cart, a new 'button' is added to the navbar: 'Checkout'. Depending on your screen size and how you may have laid out your store, the addition of this new button can mess up the formatting of the page.

 

So, I set out to consolidate these two buttons, plus add some additional functionality ...

 

In /catalog/includes/modules/content/navigation/templates/navbar.php

 

 

Find: (near the bottom of the file)

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

?>

And replace with this:

<!-- Consolidate 'Cart' and 'Checkout' functions  -->

<!-- STYLING THAT SHOULD BE INSERTED INSIDE THE USER.CSS FILE. THESE ARE HERE JUST FOR DEMO PURPOSE //-->
        <style>
          @[member='media'] (min-width: 768px) {
            .mini-cart-width {
              min-width: 350px; /* Make this wide enough to handle your longest part number */
            }
          }

          .custom_scrollbar {
            position: relative;
            max-height: 300px; /* Or whatever you want (eg. 400px) */
            overflow-y: auto;
          }
        </style>


<?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 mini-cart-width">
              <li>

                <div class="custom_scrollbar">
                  <table class="table table-striped">
<?php
                    $products = $cart->get_products();
                    for ($i=0, $n=sizeof($products); $i<$n; $i++) {
                      echo '<tr>';

                        echo '  <td>';
                          echo ($products[$i]['quantity']) . 'x' ;
                        echo '  </td>';

                        echo '  <td>';
                          echo '<a href="' . tep_href_link(FILENAME_PRODUCT_INFO) . '?products_id=' . ($products[$i]['id']) .  ">' . ($products[$i]['name']) . '</a>';
                        echo '  </td>';

                        echo '  <td align="right">';
                          $number = (($products[$i]['quantity']) * ($products[$i]['price']));
                          echo '$' . (number_format($number, 2,'.', ','));
                        echo '  </td>';

                      echo '</tr>';
                    }
?>

                  </table>
                </div>
              </li>

              <li class="divider"></li>

<?php

              echo '<li>
                      <span class="col-xs-6">
                        <a href="' . tep_href_link(FILENAME_SHOPPING_CART) . '">
                          <i class="glyphicon glyphicon-shopping-cart"></i> ' . HEADER_CART_VIEW_CART . '</a>
                      </span>
                      <span class="col-xs-6 text-right">
                        <a href="' . tep_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL') . '">'
                          . HEADER_CART_CHECKOUT . '
                        </a>
                      </span>
                    </li>';

?>
            </ul>
          </li>
<?php
        } else {
          echo '<li class="nav navbar-text">' . HEADER_CART_NO_CONTENTS . '</li>';
        }
?>

Now, when an item is added to the cart, the 'Shopping Cart' in the navbar still shows the number of items in your cart. But, when you click on it, the drop-down shows an itemized list of what's in the cart, including the quantity, part number, and total cost for each line item. Beneath the list are 2 choices: one takes you to shopping_cart.php, and the other to checkout.

 

For this proof-of-concept, we put some styling elements in this file ... they should be moved to user.css.

 

Once again, I want to thank @@Tsimi for his assistance in cleaning up my sloppy code, and including several improvements.

 

Malcolm

 

This line:

echo '<a href="' . tep_href_link(FILENAME_PRODUCT_INFO) . '?products_id=' . ($products[$i]['id']) .  ">' . ($products[$i]['name']) . '</a>';

Must be:

echo '<a href="' . tep_href_link(FILENAME_PRODUCT_INFO) . '?products_id=' . ($products[$i]['id']) .  '">' . ($products[$i]['name']) . '</a>';

Thanks for this addon :)

Link to comment
Share on other sites

@@ArtcoInc

Hi

 

Got it going, its great.simple did as JJ mentioned and also deleted a line of code that I had missed deleting.

 

Just one question, the drop down menu shows the first item "highlighted" and subsequent items are just "plain" .

Maybe supposed to be. (www.grandpas.co.nz/BS234)

 

Looks good.

 

Kind regards

 

John

Link to comment
Share on other sites

@@grandpaj

 


Just one question, the drop down menu shows the first item "highlighted" and subsequent items are just "plain" .

Maybe supposed to be. (www.grandpas.co.nz/BS234)

 

 

John,

 

Add another item to the cart. Then another. The colors alternate in the table:

                 <table class="table table-striped">

Malcolm

Link to comment
Share on other sites

@@piernas

@@ArtcoInc

 

Hi guys,

 

Many thanks for your feedback.

I suspect the problem maybe caused by the fact that I have a fixed Nav Bar at the top,  are you able to check again for me and make sure that the scroll bar is right to the top.

I have no idea how to fix this, other than "unfix" the nav bar.

I have this in my user.css

 

body {   font-family: 'Roboto Condensed', sans-serif;font-size:15px; padding-top: 40px !important;
    width: 1200px;margin:0 auto;-overflow-y:scroll;-ms-overflow-style:scrollbar; }
@@media (max-width: 1200px) {

 

Many thanks

 

John

Link to comment
Share on other sites

@@piernas

@@ArtcoInc

 

Hi guys,

 

Many thanks for your feedback.

I suspect the problem maybe caused by the fact that I have a fixed Nav Bar at the top,  are you able to check again for me and make sure that the scroll bar is right to the top.

I have no idea how to fix this, other than "unfix" the nav bar.

 

Many thanks

 

John

@@grandpaj

 

open the user.css and increase the padding-top, should sort it

 body {   font-family: 'Roboto Condensed', sans-serif;font-size:15px; 
    width: 1200px;margin:0 auto;-overflow-y:scroll;-ms-overflow-style:scrollbar; }
@[member=media] (max-width: 1200px) {
body {
    width: 100%;padding-top: 40px !important;
}
Link to comment
Share on other sites

 

@@grandpaj

 

open the user.css and increase the padding-top, should sort it

 body {   font-family: 'Roboto Condensed', sans-serif;font-size:15px; 
    width: 1200px;margin:0 auto;-overflow-y:scroll;-ms-overflow-style:scrollbar; }
@[member='media'] (max-width: 1200px) {
body {
    width: 100%;padding-top: 40px !important;
}

 

That helped a lot, but the header is 52px tall. You're going to have to increase your 40px to at least 52px (and maybe a few px extra).

 

Malcolm

Link to comment
Share on other sites

Archived

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

×
×
  • Create New...