How to add a new tab? Please advise

Hi all,

I have installed OpenCart version v1.4.9.1.
I want to add a new tab next to the existing tabs (Home, Basket, Checkout etc.).

I have made the new tab in \catalog\view\theme\MY TEMPLATE\template\common\header.tpl but it is only visual (It has no function).

The layout has to be similar to the existing tabs with Categories, Information, Shopping cart etc. on the sides. I only want to add new information at the center.

Which files do I need to edit/create and what code is necessary?

I hope some of you can help me.

i believe \catalog\language\english\common\header.php may have to be edited too (where the variable is stored).

can you also link the website so i can have a look if it is there but doesn't work

dannydaman9 wrote:i believe \catalog\language\english\common\header.php may have to be edited too (where the variable is stored).

can you also link the website so i can have a look if it is there but doesn't work

It is not yet online, I run it locally on a virtual apache MySql server (via XAMPP).

ah. maybe i can see a screenshot???

I would like to know how to do that too.
Any help

just press print screen on your keyboard (prtscrn)
Save it
http://bayimg.org and upload your picture
either copy the code it provides you to share or just copy and paste the web address

any problems just ask

This is very easy.
Now that you've created your new tab, create a new information page.
Click on the information page to go to it from the front end. Copy and paste the url of this page into the link for the new tab that you created.

I have made a tab called "Blog".

In \catalog\view\theme\MY TEMPLATE\template\common\header.tpl I have added the following code: In \catalog\language\english\common\header.php I have added the following code: In \catalog\controller\common\header.php I have added the following codes but I am not sure exactly how they work: and The tab looks fine and works fine, sort of.


How do I get the tab to work properly?
I want some information to show in the middle content box (next to "Information").
Can I create a normal HTML page? How do I link the tab to the information page? etc.
...

readyman wrote:This is very easy.
Now that you've created your new tab, create a new information page.
Click on the information page to go to it from the front end. Copy and paste the url of this page into the link for the new tab that you created.

I have just above posted a reply to some of the answers I have got so far. But I am not sure I understand what you mean!

My suggestion would be the same here. Open up the admin end of the site, then go to catagories then click nifromation.

Create a new page and name it blog.

once this is created and saved, refresh your store and click on the blog (this is located under the heading information).

Copy and paste this link into the code where your blog tab is stored and use <a href="blog.... you should be fine then.

any problems just ask!

Thank you for your reply. It works, sort of.

This is the new tab code: Two things:
- The URL is very long and "misleading".
How do I Change it to index.php?route=information/blog? (similar to index.php?route=information/contact etc.).

- The tab layout does not change when I click on the "blog" tab.
How do I get it act like the other tabs?

I can see where you're coming from, but this is a hack so opencart wasn't built this way.
I suggested using the information pages functionality that was built into Opencart, because you can easily input data from the admin and you can link your new tab to this new content - that's it.

However, if you do want to hack it further and make the url into index.php?route=information/blog
You'll need to add a new "blog" controller for that one page & I suppose you can use the same template file.

1. Open the catalog/information folder and create a new file called blog.php
2. Put the following code in the new blog.php file Click save and now you should be able to access that page from index.php?route=information/blog
Note: If your information id is not "6" then just rollover the page in the information box to get it's real id & replace in your code.

Ok, now to make the tab highlight when you're on that page. Javascript does this for you at the moment.
1. Open up the common/header.tpl file in your template
2. Look for the following code... Replace with... Then locate your new tab and add the id to it. That's it.

readyman wrote:I can see where you're coming from, but this is a hack so opencart wasn't built this way.
I suggested using the information pages functionality that was built into Opencart, because you can easily input data from the admin and you can link your new tab to this new content - that's it.

However, if you do want to hack it further and make the url into index.php?route=information/blog
You'll need to add a new "blog" controller for that one page & I suppose you can use the same template file.

1. Open the catalog/information folder and create a new file called blog.php
2. Put the following code in the new blog.php file

Code: Select all

<?php
class ControllerInformationBlog extends Controller {
    public function index() {
        $this->language->load('information/information');
        
        $this->load->model('catalog/information');
        
        $this->document->breadcrumbs = array();
        
          $this->document->breadcrumbs[] = array(
            'href'      => HTTP_SERVER . 'index.php?route=common/home',
            'text'      => $this->language->get('text_home'),
            'separator' => FALSE
          );

        $information_id = 6;
        
        $information_info = $this->model_catalog_information->getInformation($information_id);

        if ($information_info) {
              $this->document->title = $information_info['title']; 

              $this->document->breadcrumbs[] = array(
                'href'      => HTTP_SERVER . 'index.php?route=information/information&information_id=6',
                'text'      => $information_info['title'],
                'separator' => $this->language->get('text_separator')
              );
                        
              $this->data['heading_title'] = $information_info['title'];
              
              $this->data['button_continue'] = $this->language->get('button_continue');
            
            $this->data['description'] = html_entity_decode($information_info['description']);
              
            $this->data['continue'] = HTTP_SERVER . 'index.php?route=common/home';

            if (file_exists(DIR_TEMPLATE . $this->config->get('config_template') . '/template/information/information.tpl')) {
                $this->template = $this->config->get('config_template') . '/template/information/information.tpl';
            } else {
                $this->template = 'default/template/information/information.tpl';
            }
            
            $this->children = array(
                'common/column_right',
                'common/footer',
                'common/column_left',
                'common/header'
            );        
            
              $this->response->setOutput($this->render(TRUE), $this->config->get('config_compression'));
        } else {
              $this->document->breadcrumbs[] = array(
                'href'      => HTTP_SERVER . 'index.php?route=information/information&information_id=' . $this->request->get['information_id'],
                'text'      => $this->language->get('text_error'),
                'separator' => $this->language->get('text_separator')
              );

              $this->document->title = $this->language->get('text_error');

              $this->data['heading_title'] = $this->language->get('text_error');

              $this->data['text_error'] = $this->language->get('text_error');

              $this->data['button_continue'] = $this->language->get('button_continue');

              $this->data['continue'] = HTTP_SERVER . 'index.php?route=common/home';

            if (file_exists(DIR_TEMPLATE . $this->config->get('config_template') . '/template/error/not_found.tpl')) {
                $this->template = $this->config->get('config_template') . '/template/error/not_found.tpl';
            } else {
                $this->template = 'default/template/error/not_found.tpl';
            }
            
            $this->children = array(
                'common/column_right',
                'common/footer',
                'common/column_left',
                'common/header'
            );
        
              $this->response->setOutput($this->render(TRUE), $this->config->get('config_compression'));
        }
      }
}
?>

Click save and now you should be able to access that page from index.php?route=information/blog
Note: If your information id is not "6" then just rollover the page in the information box to get it's real id & replace in your code.

Ok, now to make the tab highlight when you're on that page. Javascript does this for you at the moment.
1. Open up the common/header.tpl file in your template
2. Look for the following code...

Code: Select all

$(document).ready(function() {
    route = getURLVar('route');

    if (!route) {
        $('#tab_home').addClass('active');
    } else {
        part = route.split('/');

        if (route == 'common/home') {
            $('#tab_home').addClass('active');
        } else if (route == 'account/login') {
            $('#tab_login').addClass('active');
        } else if (part[0] == 'account') {
            $('#tab_account').addClass('active');
        } else if (route == 'checkout/cart') {
            $('#tab_cart').addClass('active');
        } else if (part[0] == 'checkout') {
            $('#tab_checkout').addClass('active');
        } else {
            $('#tab_home').addClass('active');
        }
    }
});
//--></script>

Replace with...

Code: Select all

$(document).ready(function() {
    route = getURLVar('route');

    if (!route) {
        $('#tab_home').addClass('active');
    } else {
        part = route.split('/');

        if (route == 'common/home') {
            $('#tab_home').addClass('active');
        } else if (route == 'account/login') {
            $('#tab_login').addClass('active');
        } else if (part[0] == 'account') {
            $('#tab_account').addClass('active');
        } else if (route == 'checkout/cart') {
            $('#tab_cart').addClass('active');
        } else if (route == 'information/blog') {
            $('#tab_blog').addClass('active');
        } else if (part[0] == 'checkout') {
            $('#tab_checkout').addClass('active');
        } else {
            $('#tab_home').addClass('active');
        }
    }
});
//--></script>

Then locate your new tab and add the id to it.

Code: Select all

<a href="index.php?route=information/blog" id="tab_blog">News/Blog</span></a>

That's it.

If anyone is still following this thread...I followed this advice, and successfully added my new tabs. However, when I added the js code to make the new tabs work, all the tabs quit working. Any suggestions? I am running the latest version of OC in my test shop. This is my first template and it's kind of a mess as I am "trial and erroring" my way through, but here is the link... www.windriverequine.com/TEST

actually, you can acheive what you wanted by following the original steps of creating a new page in the information module.

to shorten the url link, all you need is to make sure SEO urls are being used.

name the seo keyword on you blog page in your information module, as blog.

And then your link url is simply

hello everyone, opencart 1.4.9.5, i'm trying to add a new page called 'Service' but i have a strange result...
anyone can tell me what's the problem? thanks for your time.

find code bellow on stylesheet.css

hey man! work fine! thank you very much