Creating a Custom Page in OpenCart – part 1

Written by in Tutorials on July 21, 2012  |  42 Comments

creating-a-custom-page-in-opencart-part-1

“How do I create an additional page in my OpenCart website?” That’s likely the question that brought you here. So, here is a simple tutorial for you to begin with. I will assume you already have basic PHP knowledge and HTML knowledge.  If you don’t, not to worry, you can read the comments beside each line to help you understand.

Understanding OpenCart

OpenCart uses a MVC + (L) framework. So basically, you will need a few compulsory files created for it to work.

Required files:

  1. A controller file
  2. A template file

Optional files:

  1. Model file
  2. Language file

Controller File

You will need to first create a controller file in the controller folder. For this tutorial, I will create a file named ‘static.php’ in the /catalog/controller/information/ folder. Since we named the file static.php and put it at information/ folder, the controller class name will be ControllerInformationStatic.

<?php
class ControllerInformationStatic extends Controller {
	public function index() {
		$this->language->load('information/static'); //Optional. This calls for your language file

		$this->document->setTitle($this->language->get('heading_title')); //Optional. Set the title of your web page.

		$this->data['breadcrumbs'] = array();
		$this->data['breadcrumbs'][] = array(
			'text'      => $this->language->get('text_home'),
			'href'      => $this->url->link('common/home'),
			'separator' => false
		);
		$this->data['breadcrumbs'][] = array(
			'text'      => $this->language->get('heading_title'),
			'href'      => $this->url->link('information/static'),
			'separator' => $this->language->get('text_separator')
		);

		// Text from language file
		$this->data['heading_title']	= $this->language->get('heading_title'); //Get "heading title"
		$this->data['text_content']	= $this->language->get('text_content');

		// We call this Fallback system
		if (file_exists(DIR_TEMPLATE . $this->config->get('config_template') . '/template/information/static.tpl')) { //if file exists in your current template folder
			$this->template = $this->config->get('config_template') . '/template/information/static.tpl'; //get it
		} else {
			$this->template = 'default/template/information/static.tpl'; //or get the file from the default folder
		}

		//Required. The children files for the page.
		$this->children = array(
			'common/column_left',
			'common/column_right',
			'common/content_top',
			'common/content_bottom',
			'common/footer',
			'common/header'
		);

		$this->response->setOutput($this->render());
	}
}
?>

So let me explain what’s being done above. In a MVC framework, the controller file is loaded. It is literally the brain of the whole page. It processes and do according to what you asked it to. So “$this->template = $this->config->get(‘config_template’) . ‘/template/information/static.tpl’;” is asking to load for your template file, which will lead us to the next part.

Template File

So, this is one of the required files too. We will create a file named ‘static.tpl’ in the /catalog/view/theme/default/template/information/ folder.

<?php echo $header; ?><?php echo $column_left; ?><?php echo $column_right; ?>
<div id="content">
	<?php echo $content_top; ?>

	<div class="breadcrumb">
		<?php foreach ($breadcrumbs as $breadcrumb) { ?>
		<?php echo $breadcrumb['separator']; ?><a href="<?php echo $breadcrumb['href']; ?>"><?php echo $breadcrumb['text']; ?></a>
		<?php } ?>
	</div>

	<h1><?php echo $heading_title; ?></h1>

	<?php echo $text_content; ?>

	<?php echo $content_bottom; ?>
</div>
<?php echo $footer; ?>

So what basically happens above is that it is loading all the things you will see in your browser. It will load your header and footer, which will get the layout of your website. Nothing fancy about it, all your styling is done here. So, you will wonder about those optional files I mentioned, which will bring us to the next part of the tutorial.

Language File

As most of you know, OpenCart supports multi-language. You can have multiple language file in your language folder so that it can be loaded in different language. However, for this tutorial, we will be creating only for the English language. We will start with creating a file named ‘static.php’ in the catalog/language/english/information/ folder.

<?php
// Heading
$_['heading_title']	= 'Static Page'; //Add as many as you want, but remember to call for it in the controller file before you can use it in the template

// Text
$_['text_content']	= 'My Static Page Content';
?>

Wondering what the magical line of code above does? Well, it is what the line of code “ $this->data['heading_title'] = $this->language->get(‘heading_title’);” in your controller file is calling for. Without this line, your controller file will not be able to get the words you would like to display.

You can download all files from this tutorial in file below:

Download2985 downloads

So basically, you have successfully made your custom page. You can now access the page you created from yourwebsite.com/index.php?route=information/static. Easy as it seems, but you can surely do more with these simple little things, which we will cover in the second part of the tutorial. The second part of the tutorial will cover on using the model files and search engine optimization.

Tags: , , ,

About the Author

Joined OpenCart community since November 2011. MarketInSG is Singapore's first website dedicated to OpenCart web designing & modification.

View all posts by

42 Comments on "Creating a Custom Page in OpenCart – part 1"

  1. paleo snacks April 24, 2014 at 1:42 pm · Reply

    In the winter, the dog’s body heat is what helps to heat the house.
    The back arm should also form a letter “L”, with the elbow facing down.
    This free gift from nature can be turned into functional items
    and works of art.

  2. poker players April 24, 2014 at 12:34 am · Reply

    Hey! I know this is somewhat off topic but I was wondering if you knew where I could find
    a captcha plugin for my comment form? I’m using the same blog platform as yours and I’m having difficulty finding one?
    Thanks a lot!

    My weblog; poker players

  3. neddy April 23, 2014 at 2:19 pm · Reply

    hi. does anyone know how to create custom layouts for o.c 1.5.4.1. i want to add unique banners to particular unique subcategories. but need to create custom layouts for those particular subcategory pages. can anyone assist with that? thank you

  4. dumpsterrentals.pen.io April 18, 2014 at 9:14 pm · Reply

    I always spent my half an hour to read this web site’s
    articles daily along with a mug of coffee.

  5. Arthur Franco April 2, 2014 at 3:32 am · Reply

    Thank you! Easy to install and it’s working on Opencart v1.5.6.1

  6. google advertising login March 31, 2014 at 4:51 am · Reply

    whoah this blog is fantastic i love reading your articles.
    Stay up the great work! You understand, a lot of individuals
    are searching round for this information, you can help them greatly.

  7. mark March 12, 2014 at 8:34 am · Reply

    thanks for this tutorials. got it! :)
    btw, i am a newbie in opencart and posting this sh*t here helps me a lot. Cool! :)

  8. devendra February 25, 2014 at 5:23 am · Reply

    thanks its working.. but still m unable to fully understand how the codes of opencart :(

  9. Everton February 4, 2014 at 5:57 pm · Reply

    Thanks for your help man. Just a bug. Everything is working fine in opencart 1.5.5.1 there is just the problem that when you access the static page I uploaded and my custom page I got the $column_left code under my menu. You can see it accessing http://afeto.mongesdatrindade.org.br/index.php?route=information/grife
    Can you help me to fix it?

  10. Juan October 21, 2013 at 12:11 am · Reply

    Does this work on Opencart 1.5.6 ?

  11. God Father {BuTy BrotheRs} September 27, 2013 at 6:18 am · Reply

    I gotta two questions running in my mind.

    1. is it possible to make only controller file that pass data on the theme/default/common/header.tpl

    2. Lets say I created a dynamic css named stylesheet.php in the catalog\view\theme\theme_name\stylesheet\
    So I wanna know,
    is it possible to pass the array of value from any controller file to stylesheet.php ??

    help me through this I was searching for these answers so long. Any help should be appreciate.

  12. Robert August 27, 2013 at 10:21 pm · Reply

    I’m getting an error:

    Notice: Error: Could not load template /home/layercak/public_html/layercake-store/catalog/view/theme/default/template/information/thankyou.tpl! in /home/layercak/public_html/layercake-store/vqmod/vqcache/vq2-system_engine_controller.php on line 76

    Am I missing some additional steps?

  13. irfan April 23, 2013 at 10:37 am · Reply

    where is admin ?

    • Aaron June 4, 2013 at 5:55 pm ·

      You wont need admin panel. Just go to System > Design > Layout and design a layout and assign this address to it information/static. Now you can display any module on that layout in content top, content bottom, column left and column right. Awesome tutorial.. totally worked for me on 1.5.5.1

  14. irfan April 16, 2013 at 10:20 am · Reply

    Can i call on specific categories on footer using php not a custom ..

  15. dilip April 11, 2013 at 6:15 am · Reply

    Its not working on opencart 1.5.5.1 please help!
    dilip@ebonyte.com

  16. Erkan Yilmaz March 25, 2013 at 2:09 am · Reply

    Does this tutorial work in OC 1.5.5.1? I tried several times but it doesn’t seems to work.

  17. Cleo February 24, 2013 at 4:59 am · Reply

    Hello

    I want to thank you for this great and easy tuto.
    Just one thing I downloaded the files but couldn’t extract them because they are password protect.

    So I had to create my own files but it’s working perfectly.

    Thanks
    Cleo

  18. Anuj February 14, 2013 at 7:10 am · Reply

    THANKS FOR THIS BEAUTIFUL, NICE & EASY TUTORIAL…. GREAT!!!

  19. François December 7, 2012 at 11:03 am · Reply

    Hi!

    Got it a few minutes ago and works wonders, thanks!!

    I was wondering how I could have this new page show a different header than the rest of the pages? I want this page not to show the shpping cart for instance, and not to show either the categories menu: in fact, I need this page to be my welcome page, and as such not show anything oriented to selling but for a link called “Go to the online shop” in the header menu; the rest would be only information about my products…

    Thanks!

    • MarketInSG December 7, 2012 at 11:05 am ·

      you can do so easily by remove and replace it with your own design there

  20. Emanuel November 1, 2012 at 12:33 pm · Reply

    Hello,

    I don’t know how do I link this page to my menu bar

    The result looks like this http://sanolife.ro/index.php?route=information/static
    but how I access this link prom my page directly just like I access the home page?

    Thank you

    • MarketInSG November 1, 2012 at 12:35 pm ·

      just add a link to your footer or something will do

    • Emanuel November 1, 2012 at 1:49 pm ·

      Can you be more specific please?

      I want that page to show up in the menu bar where the categories are. What should I do for that?

      Thanks.

    • MarketInSG November 1, 2012 at 2:13 pm ·

      in catalog/view/theme/*/template/common/header.tpl find and modify from there. it depends on your theme.

    • Emanuel November 1, 2012 at 2:29 pm ·

      Thanks. I’ll try to find what I should modify. My theme is the default theme just with a background and some different colors.

    • Emanuel November 1, 2012 at 2:33 pm ·

      I believe somewhere in this part of the code I must insert the link for the static page.

      <a href="”>

      <?php for ($i = 0; $i

      <?php for (; $i

      <a href="”>

    • Emanuel November 1, 2012 at 2:48 pm ·

      Done.
      Thanks for the help.:D

  21. kostis September 24, 2012 at 1:37 pm · Reply

    I have made the same thing that you have posted. You can see the link here: http://www.kem-parts.com/DROMEAS/new/site1/store/index.php?route=information/staticnew

    I don’t know why i experience this problem if you need something else please send me a message.
    As you can see i am using Basico theme…..

  22. kostis September 21, 2012 at 1:28 pm · Reply

    Hey,

    I have a problem with my custom pages!! I cannot see the quantity at the cart…… Please help me i think there is a problem in the controller file…

    Thanks

    • MarketInSG September 21, 2012 at 1:30 pm ·

      That depends on how you coded it. maybe you can show how you coded?

  23. Svemirko September 20, 2012 at 10:25 am · Reply

    How can I add things to column right for example (I’d like to have categories shown), on a custom page like this one?

    Thanks!

    • MarketInSG September 20, 2012 at 10:27 am ·

      You will have to add additional layout. You can add layout from admin panel system > design > layout

    • Svemirko September 20, 2012 at 10:46 am ·

      Of course!
      Thanks again! :)

  24. whereissecondpart August 28, 2012 at 5:58 am · Reply

    where is the second part?

  25. MarketInSG August 25, 2012 at 4:17 am · Reply

    Part 2 will be out in a week! Stay tune!

  26. MarketInSG August 23, 2012 at 4:03 am · Reply

    Soon, no worries :)

  27. Sulfy August 10, 2012 at 7:47 pm · Reply

    wend it second part?

Trackbacks for this post

  1. How to create new pages? | Open Cart Know How
  2. Creating a Custom Page in OpenCart – part 2 - OpencartNews

Leave a Comment

comm comm comm