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
The steps won't be described in this post, but the module I've created can be viewed here: https://github.com/ScottParsons/module-ajaxlogin
I've listed some of the key aspects of the module below:
Sign Intop 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.
- Also in the layout file, a
trigger-ajax-loginCSS class is added to the
Sign Inlink. This CSS class is used in the
view/frontend/web/js/model/ajaxlogin-popup.jsfile similar to how the
Proceed to Checkoutmodal works in Magento's
view/frontend/web/js/action/login.js, a custom route is used to log the customer in. The default
module-customermodule is not used as its redirects customers based based on admin settings in
Stores -> Configuration.
- A plugin is added to modify the
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.