OpenCart Support Services

Want to extend your store, edit or create new designs, add custom features or fix broken ones for your OpenCart store? We offer a range of development and SEO services. Click here to get in touch

How To Create A Custom Login Page For OpenCart Websites

By Jack
In OpenCart
Nov 2nd, 2012
9 Comments
9674 Views

Hello again everyone, in this OpenCart blog I will be looking at how to create a brand new customer login page for your OpenCart store.

The default login page for OpenCart has two major flaws which make it a nightmare for usability, SEO and common sense. By default the login link for your store will be something like “index.php?route=account/login” which is pretty shoddy so the first thing we would need to change is the URL to make it more standardised like www.[YOUR DOMAIN].com/login.

Setting up a new redirect to your custom OpenCart Login Page

Right, when you try to login to OpenCart the end result effectively boils down to one of two things: you either get redirected to your Account page or you will be redirected back to the login page. Since we have a custom login page, if your customer incorrectly enters their details and gets redirected back to the OpenCart default login page then it will make your site look pretty dodgy/confusing.

Open up:

  • catalog/controller/account/login.php

Go down to about line 162 where you will see the following code:

if (file_exists(DIR_TEMPLATE . $this->config->get('config_template') . '/template/account/login.tpl')) {
$this->template = $this->config->get('config_template') . '/template/account/login.tpl';
} else {
$this->template = 'default/template/account/login.tpl';
}

What we need to do is define what happens when someone logs in incorrectly, in this case, send them back to our custom login page rather than reloading the default account login template file. So I have changed as below:

if (file_exists(DIR_TEMPLATE . $this->config->get('config_template') . '/template/account/login.tpl')) {
//$this->template = $this->config->get('config_template') . '/template/account/login.tpl';
$this->redirect('http://[YOUR DOMAIN]/login/?login=0');
} else {
$this->redirect('http://[YOUR DOMAIN]/login/?login=0');
}

Make sure that you have the added parameter to the URL as this “login=0″ will be used in the next section when we show error messages.

Editing the Information Template for your new OpenCart Login Page

So, open up the information template of your theme:

  • catalog/view/theme/[YOUR THEME]/template/information/information.tpl

Then, at the top of your theme template file, just below the <php echo $header; ?> add this following block of code:

<?php if(isset($this->request->get['login'])) { ?>

<?php if ($this->request->get['login'] == "0" && $heading_title == "Customer Login") { ?>

<div class="warning">No match, please enter your email address and password.</div>

<?php } ?>

<?php } ?>

In this block of code, we are basically saying that if the Page Title equals = “Customer Login” and the “login=0″ parameter is in the URL then it is a customer who has failed to login correctly and has been redirected to this page by the code we entered in the previous section.

If you have chosen a different name for your login page then make sure that the second line above reflects your actual page name rather than what I chose. You can also customise the error message which appears by changing the third line in the code in between <div class=”warning”></div>.

And now we get to the fun part!

Designing your new custom OpenCart Login Page

Now, we have the hard coding part out of the way, if a customer incorrectly logs into your OpenCart store then they will now be redirected to this new information page which you’re using as a custom login page rather than the default template. Since information pages in OpenCart allow HTML input it means that you can design a huge range of visual login pages which you can tailor to your company’s branding and add some nice features.

Just go into the OpenCart admin area and create a new information page titled “Customer Login”, make sure the SEO keyword is “login” (without the quotation marks) and the checkbox is ticked which stops it showing up in the footer area. Then you’re free to design the page how you like, the only things which must stay the same as the default template is the form action and the names of the fields. Below is the very basic form which you must have on the page in order to allow customers to login:

<form action="http://[YOUR DOMAIN]/index.php?route=account/login" enctype="multipart/form-data" id="login" method="post">
<input name="email" type="text" /><br />
<input name="password" type="password" /><br />
<input type="submit" value="Login!" /> 
</form>

I would encourage you to be as creative as you can, this is a good opportunity to take something which is usually pretty steadfast in OpenCart and mold it into something which represents your brand properly. As always let me know if you have any ideas, suggestions or improvements to this post on creating custom login pages for OpenCart.

Posted By

Has 66 Posts

The founder of Cart Advisor, is an eCommerce developer specialising in OpenCart development and content SEO. Based in Lincoln, UK, Jack has worked with hundreds of businesses and runs his own company Destrove which offers OpenCart Development, OpenCart Theme Design and more.

9 Responses to “How To Create A Custom Login Page For OpenCart Websites”

  1. Jason says:

    Hi Jack,

    Just wanted to say thanks for all your posts regarding Opencart – they are a god send for someone like me who has little time to spend ironing out the little things and search for a lone time to find the answers I need when I am up against a deadline. I have even found some good tips I wasn’t originally aware of or looking for. So all good stuff. Thanks again :)

  2. divasupplies says:

    hi, i need some help with this one. im getting this error ”
    Parse error: syntax error, unexpected T_ELSE, expecting T_FUNCTION in /home/divasupp/public_html/catalog/controller/account/login.php on line 169″

    i dont know how to accomplish that last step of editing the form, i think this maybe the problem

  3. Randy says:

    Hello,

    I have tried doing this a couple times and I always end up with the same error:

    The requested URL /login/ was not found on this server.

    Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.

    any help would be appreciated..

  4. waf4hmad says:

    Hi, jack, just want to say thanks for this tutorial, keep sharing about opencart customs, thanks

  5. ujita tharani says:

    hello.. i want to create a new login and registration page for the wholesaler… i am confused how to make that login and registration page….

    link of my site:http://hieteq.com/store/

    at the bottom of my page i have given the login and registration line for wholesaler which is getiing re-directed to the customer’s login and registration page…. i want that to get re-directed to other login and registration page…. so will any one tell me how make those pages???

    Thank you….

    • Hi,

      That over complicates things rather a lot. It would probably be something a developer would have to create a process for and implement for you, most likely involving duplicating the login files and creating a separate version for wholesalers. Let me know if you want a quote.

      Thanks,

      Jack

Leave a Reply

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

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