Add a Magento 2 Login Popup

I wanted to look at adding a login popup allowing customers to log in via the popup modal rather than being redirected to the Login page.

In Magento 2, there are a few areas in the code where a modal is used, and the most notable of them appears when a customer tries and checkout as a guest when guest checkout is disabled.

Upon clicking the Proceed to Checkout button, the modal appears prompting the customer to log in or register an account, with text stating the benefits of checking out as a registered customer.

Add a Magento 2 Login Popup

The steps won't be described in this post, but the module I've created can be viewed here:

I've listed some of the key aspects of the module below:

  • The Sign In top link that comes as standard in Magento 2 is modified to open a modal rather than take customers to the login page.
  • A layout handle is added for logged out customers only, similar to how the customer layout handles module is created.
  • Within the custom layout file, the template and JavaScript component that renders the modal content are added.
  • Also in the layout file, a trigger-ajax-login CSS class is added to the Sign In link. This CSS class is used in the view/frontend/web/js/model/ajaxlogin-popup.js file similar to how the Proceed to Checkout modal works in Magento's module-checkout module.
  • Within view/frontend/web/js/action/login.js, a custom route is used to log the customer in. The default Controller/Ajax/Login.php from Magento's module-customer module is not used as its redirects customers based based on admin settings in Stores -> Configuration.
  • A plugin is added to modify the Sign In link's href. Magento doesn't seem to make modifying the path for this top link possible using layout updates.

As mentioned, this module is mostly based on Magento's module-checkout checkout popup, and I'm sure that there are improvements that can be made. If you have any feedback or suggestions, I'd like to hear from you. Feel free to use the contact form on the home page to get in touch.