How To Make a Popup Window For Password Recovery In Prestashop

Oct 24, 2013

1017 Alex Simonchik

Today I will describe how to make your theme even more user friendly or to be more specific how to get rid of the password recovery pages. The default Prestashop behavior is as follows:

Step 1: user clicks on the “Forgot your password” link;

Step 2: he is redirected to another page where he enters an email address and clicks ‘Retrieve Password’

Step 3: after the page is reloaded he either sees an error message or the message that a recovery e-mail has been successfully sent to his e-mail address.

0How To Make a Popup Window

So, the default functionality takes minimum 3 steps to fulfill and involves reloading pages at least 3 times. If we want to facilitate this process we need to reduce and simplify this procedure. A standard solution here would be to use Ajаx in order to reduce the time that a client waits for his new password – we are saving time by excluding page reloads.

So, what is our plan? We will make a pop-up window with a password recovery form and will forward requests to the controller “password” using Ajаx.

Let’s create a js-code to initiate a pop-up window. We will use the fаnсybоx library, which is included in Prestashop. If your current controller authentication does not contain this library, you can include it by using the following code:


Edit the authentication.tpl file in accordance with the example below:


1382295052-clip-22kbHow To Make a Popup Window

Now, when you click the link “Forgot your password” you will see this window:

2How To Make a Popup Window

But, in order to make all this beauty work, you need to teach the controller Password to work with аjаx requests. To do this let’s reload the PаsswоrdCоntrоller:

Igor Dragun

Partner With Us

Let's discuss how to grow your business. Get a Free Quote.
Talk to Igor


As a result we get a fully-functional form with intuitive and quick way to reset password for your customers.

3How To Make a Popup Window

4How To Make a Popup Window
Igor Dragun

Partner With Us

Looking for a partner to grow your business? We are the right company to bring your webstore to success. Talk to Igor

10 Comments

  1. Dear Alex
    Very nice post.
    I am looking for similar code to make a login/registration popup.
    Can You help me?

  2. lordbdp,

    There are a lot of reasons that can cause this. You can contact our support team at store@belvg.com and they will try to help you. But as I see for now you have made wrong rewrite:

    instead of

  3. I have put the 2 lines in overrides/controllers/front/PasswordController.php as :

    class PasswordControllerCore extends FrontController
    {
    $this->context->controller->addCSS(_PS_CSS_DIR_ . ‘jquery.fancybox-1.3.4.css’, ‘screen’);
    $this->context->controller->addJqueryPlugin(array(‘fancybox’));

    public $php_self = ‘password’;

    And modify the authentication.tpl as you said, but now I haven’t the fancy box and the link to recover the password is unactive.

    I am on PS 1.5.6.2

  4. Romain,

    You can do it the same way as described in the article. You need to create a popup with the help of Fancybox. And display in it the template for editing addresses (most likely you mean address.tpl).

  5. Hi,

    Is there a way to adapt that to add/edit addresses ?
    If so, can you explain me how ?

    Thanks.

    Best regards,
    Romain

  6. Jash,

    Basically, the article is related to the version 1.5, however, it should be compatible with the version 1.6 too, although some differences may take place. If the validation is not working, you need to check first if ajax-request is being sent and whether there are any errors recorded in the console.

  7. Hello,

    Great tutorial, but validation in pop up is not working for me. I am using prestashop 1.6. Maybe you can attach password controller file with your modifications?

  8. Marcel,

    The whole PHP-code that needs to be changed is placed in the controller controllers/front/PasswordController.php. And the template changes supposed to be here: themes/your_theme/authentication.tpl

Post a new comment

BelVG Newsletter
Subscribe to our mailing list and get interesting stuff and updates to your email inbox.
Email *