How To Create A Custom Login Page For OpenCart Websites

How To Create A Custom Login Page For OpenCart Websites

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

Categories: OpenCart

About Author

Jack

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.

Comments

  1. Jason
    Jason 8 November, 2012, 15:07

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

    Reply this comment
  2. divasupplies
    divasupplies 20 December, 2012, 05:28

    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

    Reply this comment
    • Jack W. Davis
      Jack W. Davis Author 13 February, 2013, 11:24

      Hi,

      What step of the process did this happen?

      Cheers,

      Jack

  3. Randy
    Randy 9 July, 2013, 22:32

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

    Reply this comment
    • Jack Davis
      Jack Davis Author 29 July, 2013, 09:19

      Hi Randy,

      Sounds like a problem with your .htaccess file. Have you moved OpenCart from a subfolder? So, have you moved it from http://www.DOMAINNAME.com/store to http://www.DOMAINNAME2.com/new-folder? If so, then you will need to go into your .htaccess file and ensure that the ReWriteBase line is the correct folder.

      Also, get in touch with your web host and ensure that you are allowed to use .htaccess ReWrite rules in your account. Some web hosts block it.

      Thanks,

      Jack

  4. waf4hmad
    waf4hmad 28 July, 2013, 21:29

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

    Reply this comment
  5. ujita tharani
    ujita tharani 21 September, 2013, 06:13

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

    Reply this comment
    • JackWillDavis
      JackWillDavis Author 17 November, 2013, 21:46

      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

Write a Comment

Your e-mail address will not be published.
Required fields are marked*