How to manage top menu in OpenCart

How to manage top menu in OpenCart

  • Go to your OpenCart installation directory on server using the FTP connection or hosting control panel.
  • Find the header.tpl file located in the /catalog/view/theme/themeXXX/template/common folder.
  • Open the file with some code editor like Dreamweaver or Notepad++. You can use the editor directly on your hosting control panel as well.
  • Look for the class <ul class=”links”>.
  • The links are represented by the following code:
<ul class="links"><br>
<?php if (!isset($this->request->get['route'])) { $route='active'; }  else {$route='';}?> <li class="first"><a class="<?php echo $route; if (isset($this->request->get['route']) && $this->request->get['route']=="common/home") {echo "active";} ?>" href="<?php echo $home; ?>"><i class="fa fa-home"></i><?php echo $text_home; ?></a></li><br>
<li><a class="<?php if (isset($this->request->get['route']) && $this->request->get['route']=="account/wishlist") {echo "active";} ?>" href="<?php echo $wishlist; ?>" id="wishlist-total"><i class="fa fa-star"></i><?php echo $text_wishlist; ?></a></li><br>
<li><a class="<?php if (isset($this->request->get['route']) && $this->request->get['route']=="account/account") {echo "active";} ?>" href="<?php echo $account; ?>"><i class="fa fa-user"></i><?php echo $text_account; ?></a></li><br>
<li><a class="<?php if (isset($this->request->get['route']) && $this->request->get['route']=="checkout/cart") {echo "active";} ?>" href="<?php echo $shopping_cart; ?>"><i class="fa fa-shopping-cart"></i><?php echo $text_shopping_cart; ?></a></li><br>
<li><a class="<?php if (isset($this->request->get['route']) && $this->request->get['route']=="checkout/checkout") {echo "active";} ?>" href="<?php echo $checkout; ?>"><i class="fa fa-check"></i><?php echo $text_checkout; ?></a></li><br>
</ul>

code

 

Note: the code may differ in some templates.

 

  • Each
<li>
  •  item represents a separate menu link, for example,:
    <li><a class="<?php if (isset($this->request->get['route']) && $this->request->get['route']=="account/wishlist") {echo "active";} ?>" href="<?php echo $wishlist; ?>" id="wishlist-total"><i class="fa fa-star"></i><?php echo $text_wishlist; ?></a></li>
  • You can change the order of the items here, delete them or add new link.
  • Save your changes and refresh the front page to check the links after editing.

    ! Make sure to have a saved copy of the file in case any errors appear after editing it.

  • You can edit the titles of these header links in the header.php file in /catalog/language/your language/common/ folder.

The mobile view menu can be edited in the same header.tpl file in /catalog/view/theme/themeXXX/template/common folder on your server.

  • To find the mobile view menus, look for the HTML class <div class=”swipe-menu”>.
  • The list of mobile view links includes both header and footer links:

mobile_links

The whole code of the links looks like this:

<div class="swipe"><br>       <div class="swipe-menu"><br>          <ul class="links"><br>                <?php if (!isset($this->request->get['route'])) { $route='active'; }  else {$route='';}?> <li class="first"><a class="<?php echo $route; if (isset($this->request->get['route']) && $this->request->get['route']=="common/home") {echo "active";} ?>" href="<?php echo $home; ?>"><i class="fa fa-home"></i><?php echo $text_home; ?></a></li><br>                <li><a class="<?php if (isset($this->request->get['route']) && $this->request->get['route']=="account/wishlist") {echo "active";} ?> wishlist-total" id="wishlist-total1" href="<?php echo $wishlist; ?>"><i class="fa fa-star"></i><?php echo $text_wishlist; ?></a></li><br>                <li><a class="<?php if (isset($this->request->get['route']) && $this->request->get['route']=="account/account") {echo "active";} ?>" href="<?php echo $account; ?>"><i class="fa fa-user"></i><?php echo $text_account; ?></a></li><br>               <li><a class="<?php if (isset($this->request->get['route']) && $this->request->get['route']=="checkout/cart") {echo "active";} ?>" href="<?php echo $shopping_cart; ?>"><i class="fa fa-shopping-cart"></i><?php echo $text_shopping_cart; ?></a></li><br>                <li><a class="<?php if (isset($this->request->get['route']) && $this->request->get['route']=="checkout/checkout") {echo "active";} ?>" href="<?php echo $checkout; ?>"><i class="fa fa-check"></i><?php echo $text_checkout; ?></a></li><br>              <?php if (!$logged) { ?><br>              <?php echo $text_welcome; ?><br>              <?php } else { ?><br>             <?php echo $text_logged; ?><br>               <?php } ?><br>            </ul><br>         <?php echo $language; ?><br>          <?php echo $currency; ?><br>          <?php if ($informations) { ?><br>         <ul class="foot"><br>             <?php foreach ($informations as $information) { ?><br>                <li><a href="<?php echo $information['href']; ?>"><?php echo $information['title']; ?></a></li><br>             <?php } ?><br>            </ul><br>         <?php } ?><br>            <ul class="foot foot-1"><br>              <li><a href="<?php echo $contact; ?>"><?php echo $text_contact; ?></a></li><br>             <li><a href="<?php echo $return; ?>"><?php echo $text_return; ?></a></li><br>               <li><a href="<?php echo $sitemap; ?>"><?php echo $text_sitemap; ?></a></li><br>         </ul><br>         <ul class="foot foot-2"><br>              <li><a href="<?php echo $manufacturer; ?>"><?php echo $text_manufacturer; ?></a></li><br>               <li><a href="<?php echo $voucher; ?>"><?php echo $text_voucher; ?></a></li><br>             <li><a href="<?php echo $affiliate; ?>"><?php echo $text_affiliate; ?></a></li><br>             <li><a href="<?php echo $special; ?>"><?php echo $text_special; ?></a></li><br>         </ul><br>         <ul class="foot foot-3"><br>              <li><a href="<?php echo $order; ?>"><?php echo $text_order; ?></a></li><br>             <li><a href="<?php echo $newsletter; ?>"><?php echo $text_newsletter; ?></a></li><br>           </ul><br>     </div><br>    </div>
  • Here you can delete or add new links or change their order.
  • Each link on the mobile menu has a Font Awesome icon next to it. It is added with the help of a specific class, like
<i class=”fa fa-home”>
    • You can find the list of icons and their classes by going to the following link. The version of Font icons can be checked in the/catalog/view/theme/themeXXX/stylesheet/font-awesome.css file of the template.

       

    • Save the file to see the changes.

Was this article helpful?

Related Articles

Leave A Comment?