Create a popup login modal in Magento 2
Today we will talk about customizing the magento login functionality. We can make it more easier and quicker for customers to login to the website directly from same page instead of going to login page.
There is already an authentication pop up component which uses modal to display the login form and authenticates the customer via Ajax request. We will be utilizing that authentication pop up component to display the pop up on our website instead of redirecting to the login page every time.
Inside your module create default.xml front-end layout file. Inside this layout file we will specify the custom template for Sign in link and call the authentication logic there.
Know/Module/view/frontend/layout/default.xml
<?xml version="1.0"?>
<!--
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceBlock name="authorization-link-login">
<action method="setTemplate">
<argument name="template" xsi:type="string">Know_Module::customer/account/link/authorization.phtml</argument>
</action>
</referenceBlock>
</body>
</page>
Next go ahead and create a template file. Copy the contents from vendor/magento/module-customer/view/frontend/templates/link/authorization.phtml file.
Create the custom template and paste the copied content: Know/Module/view/frontend/templates/customer/account/link/authorization.phtml
<?php
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
/**
* @var \Magento\Customer\Block\Account\AuthorizationLink $block
* @var \Magento\Framework\Escaper $escaper
*/
$dataPostParam = '';
if ($block->isLoggedIn()) {
$dataPostParam = sprintf(" data-post='%s'", $block->getPostParams());
}
?>
<li class="link authorization-link" data-label="<?= $escaper->escapeHtml(__('or')) ?>">
<a <?= /* @noEscape */ $block->getLinkAttributes() ?>
<?= /* @noEscape */ $dataPostParam ?>><?= $escaper->escapeHtml($block->getLabel()) ?></a>
</li>
Customize the copied content from template. First add a new class to the list element: “login-authorization“
Next add the custom script under list element and after the anchor tag. Make sure the script should work only when customer is not logged in.
<?php if (!$block->isLoggedIn()): ?>
<script>
require([
'jquery',
'Magento_Customer/js/model/authentication-popup'
], function ($, authenticationPopup) {
$(document).ready(function () {
$('.login-authorization > a').on('click', function(event) {
event.preventDefault();
authenticationPopup.showModal();
return false;
});
});
});
</script>
<?php endif; ?>
Remove the static content and flush the cache. Then open the page in browser and click the “Sign in” button, it will display the authentication modal instead of redirecting to Sign in page.
See it is that simple! Now go ahead and add a new dependency Magento_Customer/js/customer-data. We will use this dependency to double check if customer was not logged in.
<?php if (!$block->isLoggedIn()): ?>
<script>
require([
'jquery',
'Magento_Customer/js/model/authentication-popup',
'Magento_Customer/js/customer-data'
], function ($, authenticationPopup, customerData) {
$(document).ready(function () {
$('.login-authorization > a').on('click', function(event) {
event.preventDefault();
var customer = customerData.get('customer');
if (!customer().firstname) {
authenticationPopup.showModal();
return false;
}
return true;
});
});
});
</script>
<?php endif; ?>
So the code with final changes:
<?php
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
/**
* @var \Magento\Customer\Block\Account\AuthorizationLink $block
* @var \Magento\Framework\Escaper $escaper
*/
$dataPostParam = '';
if ($block->isLoggedIn()) {
$dataPostParam = sprintf(" data-post='%s'", $block->getPostParams());
}
?>
<li class="link authorization-link login-authorization" data-label="<?= $escaper->escapeHtml(__('or')) ?>">
<a <?= /* @noEscape */ $block->getLinkAttributes() ?>
<?= /* @noEscape */ $dataPostParam ?>><?= $escaper->escapeHtml($block->getLabel()) ?></a>
<?php if (!$block->isLoggedIn()): ?>
<script>
require([
'jquery',
'Magento_Customer/js/model/authentication-popup',
'Magento_Customer/js/customer-data'
], function ($, authenticationPopup, customerData) {
$(document).ready(function () {
$('.login-authorization > a').on('click', function(event) {
event.preventDefault();
var customer = customerData.get('customer');
if (!customer().firstname) {
authenticationPopup.showModal();
return false;
}
return true;
});
});
});
</script>
<?php endif; ?>
</li>
On small screen it will like below:
