Since starting an eCommerce site 3 months ago, with only 50 products, my Home page has had 1,800 unique page views. Not bad I guess, but the site has had 22,300 unique page views. So should I concentrate on making my Home page beautiful, or should I make the other pages the best they can be, to turn visits into sales?

Those templates with the lovely graphics on the Home page, the AJAX sliders and image galleries… they look beautiful. They look tempting. They look like they are worth $10. Hell, they look like they are worth $150. I want to lick them. I want to design a site that looks that beautiful. If I could, I’d die happy. But those lovely graphics are not there to help you sell your products. They are there to sell you a template. Don’t be a sucker.

When I look at the demos these sites have to offer and visit the Category pages and the Product pages I am almost always disappointed. They have hardly been changed from the default. They look…, well… frankly, a lot of them look rubbish.

Why is that a problem when you have such a beautiful Home page? Because, if you’re doing things right, most of your visitors will never even look at the Home page. Unless you’re Amazon the only impression visitors will have of your site is from looking at a Product page. If you’ve done your SEO properly, and I hope you have, someone searching for one of your products will find that product’s page. If they like what they see they will buy it, or look for more information.

If a visitor doesn’t like what they see they will leave and go to a competitor. If visitors do look at the Home page, it’s only because they decided to check out another page on your site after looking at a Product page.

Remember, no one ever buys anything from the Home page. So when buying a template, or designing your own site, forget about the Home page and ask yourself, would you buy from this Product page?

As an example, at this time of year you might have some products that you want to promote for Christmas. You could use a Category page to create a beautiful Christmas page and list your Christmas products there. However, you may prefer to promote this page on your home page with a big splash image and link to it from there, rather than have it appear in your main navigation, which you may want to keep the same all year round.

This bit of code adapts the original code in my How to list categories in the header in OpenCart post. It starts by creating an array of the categories that you wish to exclude from the main navigation. I’ve used some of the original OpenCart default categories as examples. You will need to enter the names of the specific categories you do not want to list in the first line.

If you use more than one language, you’ll have to list all the translations of the category name. Sorry about that. Admittedly this could have been avoided if I had excluded categories by category id, but if you are using SEO URLs it is difficult to find out what the id of a category is without having a look at your database and I wanted to make this as easy to use as possible.

This is how it works. Before listing a category the code loops through the $excludes array. If the name of the category appears in the array then $listcat is set to false and the category is not listed. It’s as simple as that.

<?php
$excludes = array('Desktops', 'Components', 'Software');
$this->load->model('tool/seo_url');
$results = $this->model_catalog_category->getCategories();
if ($results) {$output = '<ul>';}
foreach ($results as $result) {
$listcat = true;
foreach ($excludes as $exclude) {
if ($result['name'] == $exclude) {$listcat = false;}
}
if ($listcat == true) {
$output .= '<li>';
$new_path = $result['category_id'];
$unrewritten = HTTP_SERVER.'index.php?route=product/category&path='.$new_path;
$rewritten = $this->model_tool_seo_url->rewrite($unrewritten);
$output .= '<a href="'.str_replace('&', '&amp;', $rewritten).'">'.$result['name'].'</a>';
$output .= '</li>';
}
}
if ($results) {$output .= '</ul>';}
echo $output;
?>


The principle is exactly the same as listing the Information in the footer. Firstly you need to load the category model. You can then run the getCategories function and output the results. In order to work with SEO URLs you also need to load the SEO URL tool. Finally, in order for the heading to work with other languages you also need to load the category language data.

Anyway, here’s the code. Just stick it in your footer and enjoy:

<?php
$this->language->load('module/category');
$heading_title = $this->language->get('heading_title');
?>
<h3><?php echo $heading_title ?></h3>
<?php
$this->load->model('tool/seo_url');
$this->load->model('catalog/category');
$results = $this->model_catalog_category->getCategories();
if ($results) {$output = '<ul>';}
foreach ($results as $result) {
$new_path = $result['category_id'];
$unrewritten = HTTP_SERVER.'index.php?route=product/category&path=' . $new_path;
$rewritten = $this->model_tool_seo_url->rewrite($unrewritten);
$output .= '<li><a href="'.str_replace('&', '&amp;', $rewritten).'">'.$result['name'].'</a></li>';
}
if ($results) {$output .= '</ul>';}
echo $output;
?>


Firstly you need to load the SEO URL tool (incase people are using SEO URLs, which they should be) and you need to load the Information language module (to allow for different language options). After that you can use the getInformations() function to access most of the Information module.

getInformations() doesn’t include “Contact Us” or “Site Map” for some reason, so you have to add them at the end. Apart from that, it’s pretty straightforward. Here’s the code:

Edit: This now includes adaptations as suggested in the comments following the article. That’ll teach me to post before I’ve fully tested!

Second edit: This now doesn’t include the adaptations as suggested in the comments because I worked out how to make it work without having the Information module enabled. This should work perfectly now.

<?php
$this->language->load('module/information');
$heading_title = $this->language->get('heading_title');
?>
<h3><?php echo $heading_title ?></h3>
<ul>
<?php
$this->load->model('tool/seo_url');
$this->load->model('catalog/information');
$output = '';
$results = $this->model_catalog_information->getInformations();
foreach ($results as $result) {
$output .= '<li>';
$new_path = $result['information_id'];
$unrewritten = HTTP_SERVER.'index.php?route=information/information&information_id='.$new_path;
$rewritten = $this->model_tool_seo_url->rewrite($unrewritten);
$output .= '<a href="'.str_replace('&', '&amp;', $rewritten).'">'.$result['title'].'</a>';
$output .= '</li>';
}
echo $output;
$text_contact = $this->language->get('text_contact');
$text_sitemap = $this->language->get('text_sitemap');
?>
<li><a href="<?php HTTP_SERVER ?>index.php?route=information/contact"><?php echo $text_contact ?></a></li>
<li><a href="<?php HTTP_SERVER ?>index.php?route=information/sitemap"><?php echo $text_sitemap ?></a></li>
</ul>


Following on from my previous posts about listing categories in the header and listing categories and sub-categories in the header in OpenCart, I thought I’d try to work out how to highlight the top-level category, just to finish the job I’d started.

It turned out to be reasonably easy.

If you are on a category page, or on a product page reached via a category, and you run $this->request->get['path'] it outputs the category path that you see in the URL. For example, if you are on a page with a URL like this:
index.php?route=product/product&path=25_28&product_id=33
then $this->request->get['path'] will output “25_28″.

All we need to do is then get the first number from that string, which will give us the category ID of the top level category. I’m not a PHP programmer so there’s probably a much better way of doing this, but the method I’ve used works. I ‘explode’ the output, using “_” as the delimiter. This means if you explode 25_28 using “_” you will get an array with key zero (the first key) having a value of 25 and key one (the second key) having a value of 28. What we want to use is the first one, key zero, which is stored at $the_array[0].

We can now easily highlight the top-level category. As we list the categories using <li>, when we come across the one with the top-level ID we list it using <li id=”current-cat”> and then give #current-cat a style in the stylesheet, e.g:
#current-cat {background-color: #cccccc;}

Job done!

Below is the code for listing top-level categories and highlighting the one your user is in. If you want to list subcategories too, see my other post on listing subcategories mentioned above.

<?php
$top_cat_id = '';
if (isset($this->request->get['path'])) {
$path = $this->request->get['path'];
$cat_array = explode ("_", $path);
$top_cat_id = $cat_array[0];
}
$this->load->model('tool/seo_url');
$results = $this->model_catalog_category->getCategories();
if ($results) {$output = '<ul>';}
foreach ($results as $result) {
$new_path = $result['category_id'];
$unrewritten = HTTP_SERVER.'index.php?route=product/category&path=' . $new_path;
$rewritten = $this->model_tool_seo_url->rewrite($unrewritten);
if ($new_path == $top_cat_id) {
$output .= '<li id="current-cat"><a href="'.str_replace('&', '&amp;', $rewritten).'">'.$result['name'].'</a>';
} else {
$output .= '<li><a href="'.str_replace('&', '&amp;', $rewritten).'">'.$result['name'].'</a>';
}
$output .= '</li>';
}
if ($results) {$output .= '</ul>';}
echo $output;
?>

Basically, the original script looped through all the top-level categories and put them in an unordered list. In this new script I’ve just repeated the loop within each top-level category. It loops through all the sub-categories of the top-level category (if there are any) and puts them in an unordered list too.

Please note that it will only output the top-level, and second-level categories. If you have third- and fourth-level categories you will need to repeat the loop again within each sub-category in order to list them. But, honestly, if you have third- and fourth-level categories in your shop I’d think about restructuring how you’ve ordered it.

Edit: Shahz, in the comments below, has written a version that lists the third level. You can find it here: http://www.shahz.net/web-development/open-cart-header-navigation-three-level-list.html

Thanks Shahz.

Anyway, here’s the code:

<?php
$this->load->model('tool/seo_url');
$results = $this->model_catalog_category->getCategories();
if ($results) {$output = '<ul>';}
foreach ($results as $result) {
$output .= '<li>';
$new_path = $result['category_id'];
$unrewritten = HTTP_SERVER.'index.php?route=product/category&path=' . $new_path;
$rewritten = $this->model_tool_seo_url->rewrite($unrewritten);
$output .= '<a href="' . $rewritten . '">' . $result['name'] . '</a>';
$sub_results = $this->model_catalog_category->getCategories($new_path);
if ($sub_results) {$output .= '<ul>';}
foreach ($sub_results as $sub_result) {
$output .= '<li>';
$new_sub_path = $sub_result['category_id'];
$sub_unrewritten = $unrewritten.'_'. $new_sub_path;
$sub_rewritten = $this->model_tool_seo_url->rewrite($sub_unrewritten);
$output .= '<a href="' . $sub_rewritten . '">' . $sub_result['name'] . '</a>';
$output .= '</li>';
}
if ($sub_results) {$output .= '</ul>';}
$output .= '</li>';
}
if ($results) {$output .= '</ul>';}
echo $output;
?>

If you are running a large shop with thousands of products you don’t want to search the product descriptions by default as it will take a long time. However, if you’ve only got a small or medium-sized shop you can give your visitors a better search experience by enabling search in product description by default.

The javascript for the search, located near the base of the header template file, header.tpl is as follows:

<script type="text/javascript"><!--
$('#search input').keydown(function(e) {
if (e.keyCode == 13) {
moduleSearch();
}
});
function moduleSearch() {
url = 'index.php?route=product/search';
var filter_keyword = $('#filter_keyword').attr('value')
if (filter_keyword) {
url += '&keyword=' + encodeURIComponent(filter_keyword);
}
var filter_category_id = $('#filter_category_id').attr('value');
if (filter_category_id) {
url += '&category_id=' + filter_category_id;
}
location = url;
}
//--></script>

If you want to search product descriptions and all categories by default, change this javascript to the following:

<script type="text/javascript"><!--
$('#search input').keydown(function(e) {
if (e.keyCode == 13) {
moduleSearch();
}
});
function moduleSearch() {
url = 'index.php?route=product/search';
var filter_keyword = $('#filter_keyword').attr('value')
if (filter_keyword) {
url += '&keyword=' + encodeURIComponent(filter_keyword) + '&description=true';
}
location = url;
}
//--></script>

Notice we’ve added “description=true” and removed the category filter. That’s all you need to do. If you do so, I’d recommend deleting the categories select box from the search div (div9 in the default template). I’d also lose the link to Advanced Search as you are already providing an advanced search.

I searched the OpenCart forums for a long time and didn’t find a solution I was happy with. All the solutions I found involved creating new modules and/or editing source code to include them in the header. Finally, with only a basic knowledge of PHP, I decided to jump in and try and write my own solution, and after a lot of trial and error (and many, many error messages) I got it working and it seems to work without any issues.

I started with the getCategories function from catalog/controller/module/category.php. Here it is:

protected function getCategories($parent_id, $current_path = '') {
$category_id = array_shift($this->path);
$output = '';
$results = $this->model_catalog_category->getCategories($parent_id);
if ($results) {
$output .= '<ul>';
}
foreach ($results as $result) {
if (!$current_path) {
$new_path = $result['category_id'];
} else {
$new_path = $current_path . '_' . $result['category_id'];
}
$output .= '<li>';
$children = '';
if ($category_id == $result['category_id']) {
$children = $this->getCategories($result['category_id'], $new_path);
}
if ($this->category_id == $result['category_id']) {
$output .= '<a href="' . $this->model_tool_seo_url->rewrite(HTTP_SERVER . 'index.php?route=product/category&path=' . $new_path) . '"><b>' . $result['name'] . '</b></a>';
} else {
$output .= '<a href="' . $this->model_tool_seo_url->rewrite(HTTP_SERVER . 'index.php?route=product/category&path=' . $new_path) . '">' . $result['name'] . '</a>';
}
$output .= $children;
$output .= '</li>';
}
if ($results) {
$output .= '</ul>';
}
return $output;
}

I put this in the header template file, header.tpl, and ran it but it threw up a lot of errors. I then went through it bit by bit and stripped it right down. I could detail the whole process but that would be dull. In the end, the code that worked was this:

<?php
$this->load->model('tool/seo_url');
$results = $this->model_catalog_category->getCategories();
if ($results) {$output = '<ul>';}
foreach ($results as $result) {
$output .= '<li>';
$new_path = $result['category_id'];
$unrewritten = HTTP_SERVER.'index.php?route=product/category&path='.$new_path;
$rewritten = $this->model_tool_seo_url->rewrite($unrewritten);
$output .= '<a href="'.str_replace('&', '&amp;', $rewritten).'">'.$result['name'].'</a>';
$output .= '</li>';
}
if ($results) {$output .= '</ul>';}
echo $output;
?>


And that’s all you need. No extra modules or adding code to four or five files. Just put the above code in your header and it will list your top-level categories. It works with both the default URL structure and with the SEO friendly URL option. If you want to create a navigation bar that also displays sub-categories, in drop-downs for example, you’ll probably have to do something different, but I’m happy with this solution. It’s light, doesn’t affect the OpenCart source code, and I’m not a huge fan of drop-downs anyway.

I’m not really a programmer, so I searched the OpenCart forums and found several ways of doing it.  However, they all involved editing the source code of OpenCart, and when I design a template I want it to be easy to install and uninstall and I don’t want to have to alter the source code of the CMS. Finally, after a lot of searching I found a post by peterban which was exactly what I was looking for.  You can read the post here: http://forum.opencart.com/viewtopic.php?f=21&t=14764

I made some slight alterations to peterban’s solution and it seems to work fine, so here’s what you do.

Basically, if you want to display a cart in your  header you can put the following in your header.tpl file:

<div id="cart_in_header">
<?php
$cart_number = $this->cart->countProducts();
if ($cart_number == 1) {echo "1 item in shopping cart";}
else {echo $cart_number." items in shopping cart";}
echo"<br />";
echo "Total: ".$this->currency->format($this->cart->getTotal());
?>
echo"<br />";
<a href="index.php?route=checkout/cart">View Cart</a> |
<a href="index.php?route=checkout/shipping">Checkout</a>
</div>


If you are not using the AJAX add-to-cart function in OpenCart then that is all you need to do. You now have a basic cart in your header that functions perfectly. However, if you want to add the AJAX function to your cart then here’s what you need to do next.  It does involve editing the source code, but you are only adding an extra function to the source, not altering anything that already exists, which I can live with.

In catalog/controller/module/cart.php add the following at the bottom, before the final }:

public function minicart() {
$this->language->load('module/cart');
$this->load->model('tool/seo_url');
if ($this->request->server['REQUEST_METHOD'] == 'POST') {
if (isset($this->request->post['option'])) {
$option = $this->request->post['option'];
} else {
$option = array();
}
$this->cart->add($this->request->post['product_id'], $this->request->post['quantity'], $option);
unset($this->session->data['shipping_methods']);
unset($this->session->data['shipping_method']);
unset($this->session->data['payment_methods']);
unset($this->session->data['payment_method']);
}
$cart_number = $this->cart->countProducts();
if ($cart_number == 1) {$output = '1 item in shopping cart <br />';
} else {$output = $cart_number.' items in shopping cart <br />';}
$output .= 'Total: '.$this->currency->format($this->cart->getTotal()).'<br />';
$output .= '<a href="index.php?route=checkout/cart">View Cart</a> |
<a href="index.php?route=checkout/shipping">Checkout</a>';
$this->response->setOutput($output, $this->config->get('config_compression'));
}

Now that you’ve done that, all that is left to do is call the function when the Add to Cart button is pressed.  You do that by adding the following javascript to your header.tpl file, just under the code for your basic cart.

<script type="text/javascript"><!--
$(document).ready(function () {
$('#add_to_cart').removeAttr('onclick');
$('#add_to_cart').click(function () {
$.ajax({
type: 'post',
url: 'index.php?route=module/cart/minicart',
dataType: 'html',
data: $('#product :input'),
success: function (html) {
$('#cart_in_header').html(html);
},
complete: function () {
var image = $('#image').offset();
var cart  = $('#cart_in_header').offset();
$('#image').before('<img src="' + $('#image').attr('src') + '" id="temp" style="position: absolute; top: ' + image.top + 'px; left: ' + image.left + 'px;" />');
params = {
top : cart.top + 'px',
left : cart.left + 'px',
opacity : 0.0,
width : $('#cart_in_header').width(),
heigth : $('#cart_in_header').height()
};
$('#temp').animate(params, 'slow', false, function () {
$('#temp').remove();
});
}
});
});
});
//--></script>


And that is you sorted.  You now have a basic AJAX shopping cart in your header that doesn’t involve any real editing of the OpenCart source code.  A couple of points:

1. This basic cart doesn’t work together with the cart module in the right or left column so you must uninstall the cart module in your admin panel.
2. You will probably need to give the cart_in_header div a width in your stylesheet in order to get that nice effect of the product shrinking as it glides towards the cart e.g. #cart_in_header {width: 150px;}.