How To Make a Popup Window For Password Recovery In Prestashop

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:

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



10 comments

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

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

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

  4. Hi,

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

    Thanks.

    Best regards,
    Romain

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

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

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

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

Post a new comment

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