Specific Template for Category and Product Page

Set specific template for Category or Product page dynamically will help you to personalise certain page from the other. To do this we will expand OpenCart fallback feature to detect the page Id before load the general template. If necessary, we will check does specific stylesheet is available for the specific template and load it.

How it Works

As you know, OpenCart have fallback feature for loading template. In simple term, OpenCart will find general template (ex.category.tpl) of active theme; if not available, then it will use category.tpl from default theme.

To make specific template load dynamically, we will use the page Id as unique template identifier. And tell OpenCart to load specific template first before the general template. Use $category_id for the category page and $product_id for product page.

Specific Template

I will use category as an example here. As long as you understand how the concept work, you can expand it to not just product template, but also information and manufacturer template.

Original Category controller (catalog/controller/product/category.php):

1
2
3
4
5
if (file_exists(DIR_TEMPLATE . $this->config->get('config_template') . '/template/product/category.tpl')) {
    $this->template = $this->config->get('config_template') . '/template/product/category.tpl';
} else {
    $this->template = 'default/template/product/category.tpl';
}

We will use the $category_id as a unique identifier to load specific templates:

1
$this->template = $this->config->get('config_template') . '/template/product/category_' . $category_id . '.tpl';

The end code look like this:

1
2
3
4
5
6
7
if (file_exists(DIR_TEMPLATE . $this->config->get('config_template') . '/template/product/category_' . $category_id . '.tpl')) {
    $this->template = $this->config->get('config_template') . '/template/product/category_' . $category_id . '.tpl';
} elseif (file_exists(DIR_TEMPLATE . $this->config->get('config_template') . '/template/product/category.tpl')) {
    $this->template = $this->config->get('config_template') . '/template/product/category.tpl';
} else {
    $this->template = 'default/template/product/category.tpl';
}

Specific Stylesheet

There is a possibility where we need to load stylesheet specifically for the specific template above, so we will add extra code at Category controller. You can put code bellow before $this->document->setTitle.

1
2
3
4
5
if (file_exists(DIR_TEMPLATE . $this->config->get('config_template') . '/stylesheet/category_' . $category_id  .'.css')) {
    $this->document->addStyle('catalog/view/theme/' . $this->config->get('config_template') . '/stylesheet/category_' . $category_id . '.css');
}
$this->document->setTitle($category_info['name']);

Result

Now you can create the specific template with easy and no need to always modificate OpenCart when you need a unique page. To make it easy for you to implement this tutorial on your site we give you the vQmod file version. vQmod file below set specific template for category, product, manufacturer and information template.

Download1300 downloads

When you done with this tutorial or copy vQmod file above to your site, your file structure will look like this:

Folder structure of spesific template

Leave a comment