Berkhamsted Web Design

This will be an on-going post documenting the steps required for customizing various aspects of OpenCart templates. Includes adding navigation to your OpenCart footer and re-using cart elements elsewhere within your template

There are some very professional commercially available OpenCart templates, for very minimal cost, $20 to $30 range which will save you a lot of time. Take a look at our round-up of some of the better templates out there here and here. Many of them have fully configurable options in the themes that allow customization of pretty much everything.

The templates in the posts above are usually good for those starting a new shop, if however you already have a template and need to integrate the shop into your existing site then you will need to do some Opencart template customization

1. Footer Navigation in Opencart

To add navigation into the footer template, you need to also edit /catalog/controller/common/footer.php and add the following code, after line 6 (text_powered_by)

/* ADDED */
 $this->data['home'] = HTTP_SERVER . 'index.php?route=common/home';
 $this->data['special'] = HTTP_SERVER . 'index.php?route=product/special';
 $this->data['contact'] = HTTP_SERVER . 'index.php?route=information/contact';
 $this->data['sitemap'] = HTTP_SERVER . 'index.php?route=information/sitemap';
 $this->data['account'] = HTTPS_SERVER . 'index.php?route=account/account';
 $this->data['logged'] = $this->customer->isLogged();
 $this->data['login'] = HTTPS_SERVER . 'index.php?route=account/login';
 $this->data['logout'] = HTTP_SERVER . 'index.php?route=account/logout';
 $this->data['cart'] = HTTP_SERVER . 'index.php?route=checkout/cart';
 $this->data['checkout'] = HTTPS_SERVER . 'index.php?route=checkout/shipping';
 /* ADDED */

This will then give you the URL’s for various areas of opencart, which you can then include as links in your footer.tpl file, such as

<a href="<?php echo str_replace('&', '&amp;', $home); ?>">HOME</a>

2. Header Navigation containing count of items in basket

The specification for the current OpenCart project I am working on requires a ‘Basket’ text link in the header.tpl file, that updates as shoppers add items, to better descibe the effect I am after, see the screenshot below

There is a thread on the OpenCart Forums that describes specifically how to achieve this effect, even to the extent of making the effect AJAX. I added the following code to header.tpl in our custom theme to get the result. Note that if there are no items in the basket, the shopper doesn’t see ‘(0)’ or similar.

<li><a href="<?php echo str_replace('&', '&amp;', $cart); ?>" id="tab_cart">My Basket <?php $countItems = $this->cart->countProducts(); if (!$countItems) {} else { echo '<span class="count">' . $countItems . '</span>';} ?></a></li>

The span that has a class = count was added to give the number a text-decoration of underline from the styleaheet

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Tags: opencart, template

This entry was posted on Sunday, June 27th, 2010 at 7:43 am and is filed under Templates & Themes. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.