ArtcoInc Posted March 25, 2015 Posted March 25, 2015 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
Guest Posted March 25, 2015 Posted March 25, 2015 @@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
ArtcoInc Posted March 26, 2015 Author Posted March 26, 2015 @@grandpaj Hey there, John I've got other changes in this file, so I don't know what line 126 in your file says. If you post it it here, I'll do what I can to assist you ... Malcolm
Guest Posted March 26, 2015 Posted March 26, 2015 @@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
De Dokta Posted March 26, 2015 Posted March 26, 2015 @@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.
ArtcoInc Posted March 26, 2015 Author Posted March 26, 2015 @@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
Guest Posted March 26, 2015 Posted March 26, 2015 @@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
ArtcoInc Posted March 26, 2015 Author Posted March 26, 2015 @@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
ArtcoInc Posted March 26, 2015 Author Posted March 26, 2015 @@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
PiLLaO Posted March 26, 2015 Posted March 26, 2015 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 :)
ArtcoInc Posted March 26, 2015 Author Posted March 26, 2015 @@PiLLaO Yes, Gustavo. If I could edit my first post, I would. :wacko: The problem, and the fix, was identified by @@De Dokta here: http://www.oscommerce.com/forums/topic/407367-consolidation-of-items-in-navbar/?p=1725298 Thanks. Malcolm
Guest Posted March 26, 2015 Posted March 26, 2015 @@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
ArtcoInc Posted March 27, 2015 Author Posted March 27, 2015 @@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
piernas Posted March 27, 2015 Posted March 27, 2015 @@grandpaj I've just been on your site and noticed the navbar overlaps your store logo.
ArtcoInc Posted March 27, 2015 Author Posted March 27, 2015 @@piernas @@grandpaj I've just been on your site and noticed the navbar overlaps your store logo. To my (aging) eyes, it looks like the logo 'touches' the navbar, but there's no overlap. And yes, a little padding around the logo would help. Malcolm
piernas Posted March 27, 2015 Posted March 27, 2015 @@ArtcoInc in http://www.grandpas.co.nz/BS234 the navbar is purple but wth high resolutions (1200 pixels width or more) it turns out blak and overlaps the header completely. I'll post an image if you need it for debug.
piernas Posted March 27, 2015 Posted March 27, 2015 In fact all the template changes when the resolution goes over 1200 px width, please see attached pictures
ArtcoInc Posted March 27, 2015 Author Posted March 27, 2015 Ahhh ... I don't run my screen at that high of a resolutions, so I didn't see it. Nevermind ;) Malcolm
Guest Posted March 27, 2015 Posted March 27, 2015 @@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
PupStar Posted March 27, 2015 Posted March 27, 2015 @@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; }
ArtcoInc Posted March 27, 2015 Author Posted March 27, 2015 @@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
Recommended Posts
Archived
This topic is now archived and is closed to further replies.