OpenCart – Category to Product with Specific Template

In this tutorial we will learn on how to make a specific template for Category, Product and Information. There are many forum postings on this but all are complicated so today we will try and simplify things.

Before we continue, I want to clarify that Template refers to a .tpl file on an Opencart theme. Regardless of the theme you use the word “template” to refer to a .tpl file.

What do we want to achieve here?

  1. Load specific template for category, product and information based on the id.
  2. If specific template is not available, then use the general template. ex. category.tpl, product.tpl, information.tpl
  3. The same thing applies to load style-sheet specifically.

In this tutorial I will only show you how to achieve with Category, and the same method is applied for Product and Information. And you can download the vQmod file that already modifies the Category, Product and Information at bottom of the page.

  1. Open catalog\controller\product\category.php
  2. Load specific template:
  3. // FIND :
    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';
    }
    
    // REPLACE :
    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';
    }
    
    /* Explanation :
    1. The code will search spesific template based on it ID. ex: category_18.tpl.
    2. If the spesific template is not available, Opencart will use the general template of active theme (category.tpl).
    3. If the template of spesific theme is not available, Opencart will use template from default theme.
  4. Load specific style-sheet:
  5. // FIND :
    $this->document->setTitle($category_info['name']);
    
    // PUT BEFORE :
    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');
    }
    
    /* Explanation :
    1. The code will search spesific stylesheet based on it ID. ex: category_18.css.
    2. If the spesific stylesheet available then load it, if not then do nothing.
  6. Example of folder structure:
        stylesheet/
          stylesheet.css
          category_18.css
          product_17.css
            information_3.css

    template/

          product/
            category.tpl
            category_18.tpl
            product_17.tpl
          information/
            information.tpl
            information_3.tpl

    category_spesific_template

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

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

Author Spotlight

Joe Stenhouse

Joe Stenhouse

I am a web application developer that specializes in PHP, JAVASCRIPT, MYSQL, HTML, and CSS. We manifest exciting potentials within the world wide web through means of innovation.

Leave a Reply

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


7 × = 7

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>