[TomatoCart] Elegant header bar and menu for bootstrap template within phone device

As you  know, TomatoCart bootstrap template is responsive. It means your customers could view your store within phone and tablet. For example, if I access my store via my iPhone, it should looks like:

Snip20150124_10

As you can see, the header bar includes too many menus and the logo is too big. In this case, I must scroll down the page to find products. The user experience is not good. In addition, some users reported that the dropped down menus didn’t work when they click the menu button.

Now, I will teach you how to improve the header bar and fix the bug. After applying the following changes for your bootstrap template, it will looks like:

Snip20150124_7

Snip20150124_8

Step 1. Go into your Tomatocart root directory.

Step 2. Open index.php under templates/bootstrap fold with your favorite editor.

Find following code snippet:

<link rel="apple-touch-icon-precomposed" href="templates/<?php echo $osC_Template->getCode(); ?>/images/apple-touch-icon-57-precomposed.png">

Add following code after it:

<style type="text/css">
    	.nav-collapse {display:block !important;}
    	.phone-logo {float: left;}
</style>

Find following code snippet:

<div class="row-fluid">
                <div class="span4 logo"><?php echo site_logo(); ?></div>
                <div class="span8">
                	<div class="top-nav clearfix">
                        <ul>
                            <li>
                            	<?php 
                            		if ($toC_Wishlist->hasContents()) {
																	$wishlists_products = $toC_Wishlist->getProducts();
																	
																	echo osc_link_object(osc_href_link(FILENAME_ACCOUNT, 'wishlist', 'SSL'), $osC_Language->get('my_wishlist') . ' <span class="label label-info">' . count($wishlists_products) . '</span>');
                            		}else {
                            		  echo osc_link_object(osc_href_link(FILENAME_ACCOUNT, 'wishlist', 'SSL'), $osC_Language->get('my_wishlist'));
                            		}
                            	?>
                            </li>
                            <?php 
                                if (!$osC_Customer->isLoggedOn()) { 
                            ?>
                            <li><?php echo osc_link_object(osc_href_link(FILENAME_ACCOUNT, 'create', 'SSL'), $osC_Language->get('create_account')); ?></li>
                            <?php 
                                }
                            ?>
                            <?php 
                                if ((MAINTENANCE_MODE == 1) && isset($_SESSION['admin'])) { 
                            ?>
                            <li id="admin_logout"><?php echo osc_link_object(osc_href_link(FILENAME_DEFAULT, 'maintenance=logoff', 'SSL'), $osC_Language->get('admin_logout')); ?></li>
                            <?php 
                                } 
                            ?>
                            <li id="bookmark"><i class="icon-star"></i></li>    
                            <li class="cart"><?php echo osc_link_object(osc_href_link(FILENAME_CHECKOUT, null, 'SSL'), '<span id="popupCart"><i class="icon-shopping-cart"></i> ' . '<span id="popupCartItems">' . $osC_ShoppingCart->numberOfItems() . '</span>' . '<span>' . $osC_Language->get('text_items') . '</span></span>') ; ?></li>
                        </ul>
                    </div>
                    <div class="main-nav">
                        <ul>
                            <li class="visible-desktop"><?php echo osc_link_object(osc_href_link(FILENAME_DEFAULT, 'index'), $osC_Language->get('home')); ?></li>
                            <li><?php echo osc_link_object(osc_href_link(FILENAME_PRODUCTS, 'new'), $osC_Language->get('new_products')); ?></li>
                            <?php 
                                if ($osC_Customer->isLoggedOn()) { 
                            ?>
                            <li><?php echo osc_link_object(osc_href_link(FILENAME_ACCOUNT, 'logoff', 'SSL'), $osC_Language->get('logoff')); ?></li>
                            <?php 
                                } else { 
                            ?>
                            <li><?php echo osc_link_object(osc_href_link(FILENAME_ACCOUNT, 'login', 'SSL'), $osC_Language->get('login')); ?></li>
                            <?php 
                                } 
                            ?>
                            <li><?php echo osc_link_object(osc_href_link(FILENAME_ACCOUNT, null, 'SSL'), $osC_Language->get('my_account')); ?></li>
                            <li><?php echo osc_link_object(osc_href_link(FILENAME_CHECKOUT, 'checkout', 'SSL'), $osC_Language->get('checkout')); ?></li>
                            <li><?php echo osc_link_object(osc_href_link(FILENAME_INFO, 'contact'), $osC_Language->get('contact_us')); ?></li>
                        </ul>
                    </div>
                </div>
            </div>

Replace it with following code:

<div class="row-fluid">
                <div class="span4 logo hidden-phone"><?php echo site_logo(); ?></div>
               <img class="visible-phone phone-logo" src="images/phone_store_logo.png" />
                <div class="span8">
                	<div class="top-nav clearfix">
                        <ul>
                        		 <li>
                            	<?php 
                            		if ($toC_Wishlist->hasContents()) {
																	$wishlists_products = $toC_Wishlist->getProducts();
																	
																	echo osc_link_object(osc_href_link(FILENAME_ACCOUNT, 'wishlist', 'SSL'), $osC_Language->get('my_wishlist') . ' <span class="label label-info">' . count($wishlists_products) . '</span>');
                            		}else {
                            		  echo osc_link_object(osc_href_link(FILENAME_ACCOUNT, 'wishlist', 'SSL'), $osC_Language->get('my_wishlist'));
                            		}
                            	?>
                            </li>
                            <?php 
                                if ((MAINTENANCE_MODE == 1) && isset($_SESSION['admin'])) { 
                            ?>
                            <li id="admin_logout"><?php echo osc_link_object(osc_href_link(FILENAME_DEFAULT, 'maintenance=logoff', 'SSL'), $osC_Language->get('admin_logout')); ?></li>
                            <?php 
                                } 
                            ?>
                            <li id="bookmark"><i class="icon-star"></i></li>    
                            <li class="cart"><?php echo osc_link_object(osc_href_link(FILENAME_CHECKOUT, null, 'SSL'), '<span id="popupCart"><i class="icon-shopping-cart"></i> ' . '<span id="popupCartItems">' . $osC_ShoppingCart->numberOfItems() . '</span>' . '<span>' . $osC_Language->get('text_items') . '</span></span>') ; ?></li>
                        </ul>
                    </div>
                    <div class="main-nav hidden-phone">
                        <ul>
                            <li class="visible-desktop"><?php echo osc_link_object(osc_href_link(FILENAME_DEFAULT, 'index'), $osC_Language->get('home')); ?></li>
                            <li><?php echo osc_link_object(osc_href_link(FILENAME_PRODUCTS, 'new'), $osC_Language->get('new_products')); ?></li>
                            <?php 
                                if ($osC_Customer->isLoggedOn()) { 
                            ?>
                            <li><?php echo osc_link_object(osc_href_link(FILENAME_ACCOUNT, 'logoff', 'SSL'), $osC_Language->get('logoff')); ?></li>
                            <?php 
                                } else { 
                            ?>
                            <li><?php echo osc_link_object(osc_href_link(FILENAME_ACCOUNT, 'login', 'SSL'), $osC_Language->get('login')); ?></li>
                            <?php 
                                } 
                            ?>
                            <li><?php echo osc_link_object(osc_href_link(FILENAME_ACCOUNT, null, 'SSL'), $osC_Language->get('my_account')); ?></li>
                            <li><?php echo osc_link_object(osc_href_link(FILENAME_CHECKOUT, 'checkout', 'SSL'), $osC_Language->get('checkout')); ?></li>
                            <li><?php echo osc_link_object(osc_href_link(FILENAME_INFO, 'contact'), $osC_Language->get('contact_us')); ?></li>
                        </ul>
                    </div>
                </div>
            </div>

Find following code snippet:

<!-- BEGIN: Navigation -->
    <div class="container">
    	<div class="navbar navbar-inverse">
    		<div class="navbar-inner">
                <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                </button>
                <form name="search" method="get" action="<?php echo osc_href_link(FILENAME_SEARCH, null, 'NONSSL', false);?>" class="navbar-search pull-right">
                    <input id="keywords" type="text" name="keywords" class="search-query keywords" placeholder="Search" />
                    <div class="icon-search"></div>
                </form>
    			<div class="nav-collapse collapse">
        			<?php echo build_categories_dropdown_menu(); ?>
                </div>
            </div>
        </div>
    </div>
    <!-- END: Navigation -->

Replace it with following code:

<!-- BEGIN: Navigation -->
    <div class="container">
    	<div class="navbar navbar-inverse">
    		<div class="navbar-inner">
                <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
	                <span class="icon-bar"></span>
	                <span class="icon-bar"></span>
	                <span class="icon-bar"></span>
                </button>
                <form name="search" method="get" action="<?php echo osc_href_link(FILENAME_SEARCH, null, 'NONSSL', false);?>" class="navbar-search pull-right">
                    <input id="keywords" type="text" name="keywords" class="search-query keywords" placeholder="Search" />
                    <div class="icon-search"></div>
                </form>
    						<div class="nav-collapse collapse">
        					<?php echo build_categories_dropdown_menu(); ?>
        					
        					<ul class="nav visible-phone">
        							<li><?php echo osc_link_object(osc_href_link(FILENAME_DEFAULT, 'index'), $osC_Language->get('home')); ?></li>
											<?php 
												if (!$osC_Customer->isLoggedOn()) { 
											?>
											<li><?php echo osc_link_object(osc_href_link(FILENAME_ACCOUNT, 'create', 'SSL'), $osC_Language->get('create_account')); ?></li>
											<?php 
												}
											?>
											<li><?php echo osc_link_object(osc_href_link(FILENAME_PRODUCTS, 'new'), $osC_Language->get('new_products')); ?></li>
											<?php 
												if ($osC_Customer->isLoggedOn()) { 
											?>
											<li><?php echo osc_link_object(osc_href_link(FILENAME_ACCOUNT, 'logoff', 'SSL'), $osC_Language->get('logoff')); ?></li>
											<?php 
												} else { 
											?>
											<li><?php echo osc_link_object(osc_href_link(FILENAME_ACCOUNT, 'login', 'SSL'), $osC_Language->get('login')); ?></li>
											<?php 
												} 
											?>
											<li><?php echo osc_link_object(osc_href_link(FILENAME_ACCOUNT, null, 'SSL'), $osC_Language->get('my_account')); ?></li>
											<li><?php echo osc_link_object(osc_href_link(FILENAME_CHECKOUT, 'checkout', 'SSL'), $osC_Language->get('checkout')); ?></li>
											<li><?php echo osc_link_object(osc_href_link(FILENAME_INFO, 'contact'), $osC_Language->get('contact_us')); ?></li>
        					</ul>
                </div>
            </div>
        </div>
    </div>
    <!-- END: Navigation -->

Done. After applying above code changes for your bootstrap template, you will see the changes in the phone device.

 Looking for quality TomatoCart hosting? Check out Arvixe Web Solutions

Tags: , , , , , , | Posted under TomatoCart | RSS 2.0

Author Spotlight

Jack Yin

TomatoCart Developer & Co Founder - Arvixe Web Hosting / TomatoCart Community Liaison

Leave a Reply

Your email address will not be published. Required fields are marked *