[TomatoCart] Build a Top Menu for your Glass Gray Template

You may have noticed that there is an elegant top menu added in the bootstrap template. But, there isn’t such kind of top menu in the glass gray template.

Snip20140921_2

Figure 1. Top categories menus in bootstrap template

Snip20140921_4

 

 

 

 

 

 

 

Figure 2. General top menu in glass gray template

Don’t be frustrated. It is also possible to show a similar top menus in your glass gray template. You will find a simple solution for it in this article. Now, let me teach you how to achieve it.

Step 1. Download the maticmenu.zip.

Step 2. Unzip it and then copy maticmenu fold into your TomatoCart root directory > templates > glass_gray fold.

Step 3. Open index.php under templates > glass_gray fold with your favourite text editor and then find following code snippet at the top of file:

/*
  $Id: index.php $
  TomatoCart Open Source Shopping Cart Solutions
  http://www.tomatocart.com

  Copyright (c) 2009 Wuxi Elootec Technology Co., Ltd;  Copyright (c) 2006 osCommerce

  This program is free software; you can redistribute it and/or modify
  it under the terms of the GNU General Public License v2 (1991)
  as published by the Free Software Foundation.
*/

Add following code after it:

//include general helper
require_once 'maticmenu/helper.php';

Find following code snippet:

<div id="navigationBar">
    <div id="navigationInner">
      <ul id="navigation">
        <?php
          echo '<li ' . ($osC_Template->getGroup() == 'index' && $osC_Template->getModule() == 'index' ? 'class="navVisited"' : null) . '><span class="navLeftHook"> </span>' . osc_link_object(osc_href_link(FILENAME_DEFAULT, 'index'), $osC_Language->get('home')) . '<span class="navHoverDownHook"> </span><span class="navRightHook"> </span></li>' .
               '<li ' . ($osC_Template->getGroup() == 'products' && $osC_Template->getModule() == 'new' ? 'class="navVisited"' : null) . '><span class="navLeftHook"> </span>' . osc_link_object(osc_href_link(FILENAME_PRODUCTS, 'new'), $osC_Language->get('new_products')) . '<span class="navHoverDownHook"> </span><span class="navRightHook"> </span></li>';
  
          if ($osC_Customer->isLoggedOn()) {
            echo '<li><span class="navLeftHook"></span>' . osc_link_object(osc_href_link(FILENAME_ACCOUNT, 'logoff', 'SSL'), $osC_Language->get('sign_out')) . '<span class="navHoverDownHook"> </span><span class="navRightHook"> </span></li>';
          }
  
          echo '<li ' . ($osC_Template->getGroup() == 'account' ? 'class="navVisited"' : null) . '><span class="navLeftHook"> </span>' . osc_link_object(osc_href_link(FILENAME_ACCOUNT, null, 'SSL'), $osC_Language->get('my_account')) . '<span class="navHoverDownHook"> </span><span class="navRightHook"> </span></li>' .
               '<li ' . ($osC_Template->getGroup() == 'checkout' ? 'class="navVisited"' : null) . '><span class="navLeftHook"> </span>' . osc_link_object(osc_href_link(FILENAME_CHECKOUT, 'checkout', 'SSL'), $osC_Language->get('checkout')) . '<span class="navHoverDownHook"> </span><span class="navRightHook"> </span></li>' .
               '<li ' . ($osC_Template->getGroup() == 'info' && $osC_Template->getModule() == 'contact' ? 'class="navVisited"' : null) . '><span class="navLeftHook"> </span>' . osc_link_object(osc_href_link(FILENAME_INFO, 'contact'), $osC_Language->get('contact_us')) . '<span class="navHoverDownHook"> </span><span class="navRightHook"> </span></li>';
        ?>
      </ul>
      
      <div style="float: right;width: 206px">
        <form name="search" action="<?php echo osc_href_link(FILENAME_SEARCH, null, 'NONSSL', false);?>" method="get">
          <p class="keywords"><?php echo osc_draw_input_field('keywords', null, 'maxlength="20"') ?></p>
          <p><input type="image" src="<?php echo 'templates/' . $osC_Template->getCode() . '/images/button_quick_find.png'; ?>" alt="<?php echo $osC_Language->get('box_search_heading'); ?>" title="<?php echo $osC_Language->get('box_search_heading'); ?>" id="quickSearch" /><?php echo osc_draw_hidden_session_id_field(); ?></p>
        </form>
      </div>  
    </div>
  </div>

Replace it with:

  <div id="navigationBar">
    <div id="navigationInner" class="clearfix">
      <?php echo build_categories_dropdown_menu(); ?>
      
      <div style="float: right;width: 206px">
        <form name="search" action="<?php echo osc_href_link(FILENAME_SEARCH, null, 'NONSSL', false);?>" method="get">
          <p class="keywords"><?php echo osc_draw_input_field('keywords', null, 'maxlength="20"') ?></p>
          <p><input type="image" src="<?php echo 'templates/' . $osC_Template->getCode() . '/images/button_quick_find.png'; ?>" alt="<?php echo $osC_Language->get('box_search_heading'); ?>" title="<?php echo $osC_Language->get('box_search_heading'); ?>" id="quickSearch" /><?php echo osc_draw_hidden_session_id_field(); ?></p>
        </form>
      </div>  
    </div>
  </div>

Find following code:

<?php if ($osC_Services->isStarted('debug') && defined('SERVICE_DEBUG_SHOW_CSS_JAVASCRIPT') && SERVICE_DEBUG_SHOW_CSS_JAVASCRIPT == 1) { ?>

Add following code before it:

<!-- Begin: For to menus -->
<?php if (defined('BOX_CATEGORIES_DISPLAY_DROP_DOWN_MENU')): ?>
<?php if (BOX_CATEGORIES_DISPLAY_DROP_DOWN_MENU == -1): ?>
<script type="text/javascript" src="ext/menumatic/MenuMatic_0.68.3.js"></script>
<?php endif;?>
<?php else: ?>
<script type="text/javascript" src="ext/menumatic/MenuMatic_0.68.3.js"></script>
<?php endif; ?>
<script>
	window.addEvent('domready', function() {
		var maticMenu = new MenuMatic({ id:'nav', hideDelay: 200, duration: 200});
	});
</script>
<!-- End: For to menus -->

Step 4. Open both stylesheet.css and all.min.css under templates > glass_gray fold.

Add following code at bottom of stylesheet.css and all.min.css:

/* Start: Top Menus */
#nav .subMenuParentBtn, 
#nav .subMenuParentBtnFocused, 
#nav .mainMenuParentBtn, 
#nav .mainMenuParentBtnFocused,
#nav a:hover, 
#nav a.navVisited:hover
{
    background: url('images/top_menu_arrow.png') right center no-repeat;
}


#subMenusContainer li:hover {
    background: #2998DB;
}
#subMenusContainer li:hover a {
    color: #FFFFFF;
}
/* End: Top Menus */

That’s it. In this way, a similar top categories menu will be shown in your store.

Snip20140921_1

Figure 3. A similar top categories menu in glass gray template

Looking for quality TomatoCart Hosting? Look no further than Arvixe Web Hosting!

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

Author Spotlight

Jack Yin

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

10 Comments on [TomatoCart] Build a Top Menu for your Glass Gray Template

  1. miltos kouis says:

    hello. does it really work? i can’t install it anyway.

  2. Francis says:

    Hi Jack, I have been exploring such changes for a while and your detailed steps provided above was comprehensive and useful. After applying your instructions, I managed to get my products/services populated on the top navigation menu. Thanks a million for your tireless support!

  3. Ali says:

    Hello there ,
    I am getting the following error message when I try to access mysite:
    Parse error: syntax error, unexpected ‘more’ (T_STRING) in /home/safae1up/public_html/tomato/templates/glass_gray/index.php on line 15
    Snap shot :
    http://prntscr.com/5m2u93

    Kind regards
    Ali

  4. Ali says:

    Hello there ,
    Could you please have look at this URL
    http://safaei.biz/tomato/index.php
    and let me know what i did wrong to Build a Top Menu.
    Regards
    Ali

    • Jack Yin says:

      Please send following information to support@tomatocart.com:

      1. Host, username and password to connect to your ftp account.

      2. Url address, username and password to access your tomatocart admin panel.

      And, please describe the problem in the email. Once i receive the information, i will arrange time to have a look for you as soon as possible.

  5. Kirubakaran says:

    Hello there ,
    Could you please have look at this URL
    http://www.graceandnobleopticals.com/
    and let me know what i did wrong. Failed opening required ‘maticmenu/helper.php’
    Regards
    Kiruba

    • Jack Yin says:

      Hi,

      Okay. I will arrange time to check it for you freely in this week. Once i find the reason of problem, i will give you a reply in time.

Leave a Reply to Noah S Cancel reply

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