Today I want to show you how to create customer login block. In this tutorial I will use free html block module for PrestaShop. What i mean by customer login block? Let me explain. By default prestashop dosn't allow to create block like this, you as a customer can only go to the authentication page, fill the form with your email and password and click login. So, the customer login block is a place in one of the column where yout customers can insert own credentials and hit "login" button. Exactly as i show on image below. You can also check demo of this code here: customer login block demo.
Prestashop Customer Login Block example
As I said - to achieve this it is necessary to use free module: html block. So, download this addon and install it in your prestashop back office. Then go to the module configuration page. From the available hooks on the left hand side - select the "left column" hook (if you want to display customer login block there) if you want to display block in the right column - select right column. You can also select other hooks like footer, header or top.
Okay, so now it's time to create own login block code. We want to create Dark Gray header "Login" and to create two fields: Email Address and Password. Of course "login" button is also necessary. Paste this code to the "content" box and save the changes. That's all - Here is the code:
<div class="block"> <form action="index.php?controller=authentication&back=my-account" method="post" id="login_form" class="std"> <p class="title_block" style="margin-bottom: 10px;">Login</p> <div class="form_content clearfix"> <p class="text"> <label for="email">Email address</label> <span><input type="text" id="email" name="email" value="" class="account_input" style="width: 192px;" /></span> </p> <p class="text"> <label for="passwd">Password</label> <span><input type="password" id="passwd" name="passwd" value="" class="account_input" style="width: 192px;" /></span> </p> <p class="submit"> <input type="hidden" class="hidden" name="back" value="my-account" /> <input type="submit" id="SubmitLogin" name="SubmitLogin" class="button" value="Log in" /> </p> </div> </form> </div>
After save you can go to your shop front-end and refresh it - you will see login block in the hook you selected. If it doesn't work - make sure that you use correct authentication page in the <form> definition in the code above. By default it looks like: index.php?controller=authentication&back=my-account
You can read also how to disable customer login block when user is logged in. if you've got any questions related to this topic - feel free to post your question below.
PopUp Login Block