Post by StockBroker » Wed Oct 06, 2010 6:53 pm

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.
Last edited by StockBroker on Thu Oct 07, 2010 9:05 pm, edited 1 time in total.

Newbie

Posts

Joined
Wed Oct 06, 2010 6:27 pm

Post by dannydaman9 » Wed Oct 06, 2010 9:20 pm

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

Site finished:
Image
http://www.labelstogo.co.uk


User avatar
New member

Posts

Joined
Tue May 11, 2010 7:00 pm
Location - Manchester, England

Post by StockBroker » Wed Oct 06, 2010 9:41 pm

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).

Newbie

Posts

Joined
Wed Oct 06, 2010 6:27 pm

Post by dannydaman9 » Wed Oct 06, 2010 11:34 pm

ah. maybe i can see a screenshot???

Site finished:
Image
http://www.labelstogo.co.uk


User avatar
New member

Posts

Joined
Tue May 11, 2010 7:00 pm
Location - Manchester, England

Post by Tom52 » Thu Oct 07, 2010 11:59 am

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

v1.5.0.5


New member

Posts

Joined
Thu Oct 07, 2010 7:41 am

Post by dannydaman9 » Thu Oct 07, 2010 4:52 pm

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

Site finished:
Image
http://www.labelstogo.co.uk


User avatar
New member

Posts

Joined
Tue May 11, 2010 7:00 pm
Location - Manchester, England

Post by readyman » Thu Oct 07, 2010 5:59 pm

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.

http://www.alreadymade.com
Follow me on twitter.com/alreadymade


User avatar
Global Moderator

Posts

Joined
Wed May 20, 2009 5:16 am
Location - Sydney

Post by StockBroker » Thu Oct 07, 2010 8:48 pm

I have made a tab called "Blog".

In \catalog\view\theme\MY TEMPLATE\template\common\header.tpl I have added the following code:

Code: Select all

<a href="<?php echo str_replace('&', '&', $blog); ?>" id="tab_blog"><?php echo $text_blog; ?></a>
In \catalog\language\english\common\header.php I have added the following code:

Code: Select all

$_['text_blog'] = 'Blog';
In \catalog\controller\common\header.php I have added the following codes but I am not sure exactly how they work:

Code: Select all

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

Code: Select all

$this->data['blog'] = HTTPS_SERVER . 'index.php?route=common/blog';
The tab looks fine and works fine, sort of.
Image

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.
...

Newbie

Posts

Joined
Wed Oct 06, 2010 6:27 pm

Post by StockBroker » Thu Oct 07, 2010 8:51 pm

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! :(

Newbie

Posts

Joined
Wed Oct 06, 2010 6:27 pm

Post by dannydaman9 » Fri Oct 08, 2010 12:07 am

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!

Site finished:
Image
http://www.labelstogo.co.uk


User avatar
New member

Posts

Joined
Tue May 11, 2010 7:00 pm
Location - Manchester, England

Post by StockBroker » Fri Oct 08, 2010 3:31 am

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

This is the new tab code:

Code: Select all

<a href="index.php?route=information/information&information_id=6" id="tab_blog"><?php echo $text_blog; ?></a>
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?
Image

Newbie

Posts

Joined
Wed Oct 06, 2010 6:27 pm

Post by readyman » Fri Oct 08, 2010 5:35 pm

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.

http://www.alreadymade.com
Follow me on twitter.com/alreadymade


User avatar
Global Moderator

Posts

Joined
Wed May 20, 2009 5:16 am
Location - Sydney

Post by wrequine » Tue Jan 11, 2011 5:59 am

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

Newbie

Posts

Joined
Fri Dec 31, 2010 5:59 am

Post by SXGuy » Wed Jan 12, 2011 9:31 pm

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

Code: Select all

<span><a href="blog" id="tab_blog">News/Blog</span></a>

Active Member

Posts

Joined
Sun Nov 08, 2009 2:07 am

Post by maxserra » Sat May 21, 2011 7:43 am

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.

Attachments

tab.PNG

tab.PNG (9.08 KiB) Viewed 6467 times


Newbie

Posts

Joined
Fri May 20, 2011 6:10 am

Post by qahar » Sat May 21, 2011 12:46 pm

find code bellow on stylesheet.css

Code: Select all

#header .div4 {
   ...
   width:510px;  -> change to: min-width:510px;
}

User avatar
Expert Member

Posts

Joined
Tue Jun 29, 2010 10:24 pm
Location - Indonesia

Post by maxserra » Sun May 22, 2011 10:09 am

hey man! work fine! thank you very much 8)

Attachments

Capture.PNG

Capture.PNG (13.55 KiB) Viewed 6434 times


Newbie

Posts

Joined
Fri May 20, 2011 6:10 am
Who is online

Users browsing this forum: No registered users and 4 guests