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
request->get['login'])) { ?>
request->get['login'] == "0" && $heading_title == "Customer Login") { ?>
No match, please enter your email address and password.
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
.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:
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.