Imagine if your Magento 2 store doesn’t show a popup with the customer’s address after they log in. This can confuse customers and make them spend extra time checking their details. It may lead to a poor shopping experience, order mistakes, or even losing sales.
Showing their address in a popup right after login makes things easier and more personal. This step by step guide will show you how to add this feature to your store.
ON THIS PAGE
7 Simple Steps to Show Address in Custom Popup After Login & Auto-Fill Checkout in Magento 2
1. Create a Custom Module like app/code/klizer/Checkout/etc/module.xml and app/code/klizer/Checkout/registration.php
registration.php
<?php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'klizer_Checkout',
__DIR__
);
Module.xml
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="klizer_Checkout" setup_version="1.0.0" />
</config>2) Create routes.xml like app/code/klizer/Checkout/etc/frontend/routes.xml
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd">
<router id="standard">
<route id="popup" frontName="popup">
<module name="klizer_Checkout" />
</route>
</router>
</config>3) Create default.xml like
app/code/klizer/Checkout/view/frontend/layout/default.xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceContainer name="content">
<block class="Magento\Framework\View\Element\Template" name="popup.block" template="klizer_Checkout::popup.phtml" />
</referenceContainer>
</body>
</page>4 Create popup.phtml like app/code/klizer/Checkout/view/frontend/templates/popup.phtml
<div id="popup-container" style="display:none;">
<div id="address-content">
<div id="address-list">Loading...</div>
</div>
</div>
<script type="text/javascript">
require([
"jquery",
"Magento_Ui/js/modal/modal",
"mage/cookies"
], function($, modal) {
var selectedAddressId = null;
var options = {
type: 'popup',
responsive: true,
innerScroll: true,
title: "Select Shipping Address",
buttons: [
{
text: $.mage.__('Save'),
class: 'save-address-button',
click: function() {
if (!selectedAddressId) {
alert('Please select an address.');
return;
}
$.ajax({
url: '<?php echo $block->getUrl('popup/index/save');?>',
type: 'POST',
data: { address_id: selectedAddressId },
success: function(response) {
if (response.success) {
alert(response.message);
$.mage.cookies.set('shipping_address_saved', '1', { path: '/' });
this.closeModal();
} else {
alert(response.message);
}
}.bind(this),
error: function() {
alert('Failed to save address.');
}
});
}
},
{
text: $.mage.__('Cancel'),
class: 'cancel-button',
click: function() {
this.closeModal();
}
}
]
};
var popup = modal(options, $('#popup-container'));
$(document).ready(function() {
// Here First You need to pass the value 1 to 'is_logged_in' in cookies when the customer is login
if($.mage.cookies.get('is_logged_in') == '1'){
// After Popup is opened in the page when you selected any shipping address then shipping_address_saved is set to 1 in cookies and then when you logout you need to set 0 shipping_address_saved in cookies
if ($.mage.cookies.get('shipping_address_saved') != '1') {
$('#popup-container').modal('openModal');
$.ajax({
url: '<?php echo $block->getUrl('popup/index/address');?>',
type: 'GET',
success: function(response) {
if (response.success) {
var html = '';
response.addresses.forEach(function(address) {
html += '<div class="address-item" data-id="' + address.id + '">' +
'<div class="address-content">' + address.html + '</div>' +
'</div>';
});
$('#address-list').html(html);
$('.address-item').on('click', function() {
$('.address-item').removeClass('selected');
$(this).addClass('selected');
selectedAddressId = $(this).data('id');
});
} else {
$('#address-list').html('<p>' + response.message + '</p>');
}
},
error: function() {
$('#address-list').html('<p>Failed to load addresses.</p>');
}
});
}
}
});
});
</script>
<style>
.address-item {
border: 1px solid #ccc;
padding: 10px;
margin-bottom: 10px;
cursor: pointer;
}
.address-item.selected {
border-color: #007bff;
background-color: #f0f8ff;
}
</style>5 Create Controller/Index/Address.php like app/code/klizer/Checkout/Controller/Index/Address.php
<?php
namespace klizer\Checkout\Controller\Index;
use Magento\Framework\App\Action\Action;
use Magento\Framework\Controller\Result\JsonFactory;
use klizer\Checkout\Model\AddressManagement;
class Address extends Action
{
protected $addressManagement;
protected $resultJsonFactory;
public function __construct(
\Magento\Framework\App\Action\Context $context,
AddressManagement $addressManagement,
JsonFactory $resultJsonFactory
) {
parent::__construct($context);
$this->addressManagement = $addressManagement;
$this->resultJsonFactory = $resultJsonFactory;
}
public function execute()
{
$result = $this->resultJsonFactory->create();
try {
$addresses = $this->addressManagement->getCustomerAddresses();
$data = [];
foreach ($addresses as $address) {
$data[] = [
'id' => $address->getId(),
'html' => $address->format('html')
];
}
return $result->setData(['success' => true, 'addresses' => $data]);
} catch (\Exception $e) {
return $result->setData(['success' => false, 'message' => $e->getMessage()]);
}
}
}6) Create Controller/Index/Save.php like app/code/klizer/Checkout/Controller/Index/Save.php
<?php
namespace klizer\Checkout\Controller\Index;
use Magento\Framework\App\Action\Action;
use klizer\Checkout\Model\AddressManagement;
use Magento\Framework\Controller\Result\JsonFactory;
class Save extends Action
{
protected $addressManagement;
protected $resultJsonFactory;
public function __construct(
\Magento\Framework\App\Action\Context $context,
AddressManagement $addressManagement,
JsonFactory $resultJsonFactory
) {
parent::__construct($context);
$this->addressManagement = $addressManagement;
$this->resultJsonFactory = $resultJsonFactory;
}
public function execute()
{
$result = $this->resultJsonFactory->create();
$addressId = $this->getRequest()->getParam('address_id');
try {
$message = $this->addressManagement->saveShippingAddress($addressId);
return $result->setData(['success' => true, 'message' => $message]);
} catch (\Exception $e) {
return $result->setData(['success' => false, 'message' => $e->getMessage()]);
}
}
}7 Create AddressManagement.php like app/code/klizer/Checkout/Model/AddressManagement.php
<?php
namespace klizer\Checkout\Model;
use Magento\Customer\Model\Session as CustomerSession;
use Magento\Customer\Model\AddressFactory;
use Magento\Customer\Api\AddressRepositoryInterface;
class AddressManagement
{
protected $customerSession;
protected $addressFactory;
protected $addressRepository;
public function __construct(
CustomerSession $customerSession,
AddressFactory $addressFactory,
AddressRepositoryInterface $addressRepository
) {
$this->customerSession = $customerSession;
$this->addressFactory = $addressFactory;
$this->addressRepository = $addressRepository;
}
public function getCustomerAddresses()
{
if (!$this->customerSession->isLoggedIn()) {
throw new \Exception('Customer not logged in.');
}
$customerId = $this->customerSession->getCustomerId();
$addresses = $this->addressFactory->create()->getCollection()
->addFieldToFilter('parent_id', $customerId);
return $addresses;
}
public function saveShippingAddress($addressId)
{
$address = $this->addressRepository->getById($addressId);
$address->setIsDefaultShipping(true);
$this->addressRepository->save($address);
return 'Shipping address updated successfully.';
}
}Output
Conclusion
You can successfully implement a custom popup that displays a customer’s address after login in Magento 2 by following these steps. This feature enhances the user experience through personalized content presented in a visually engaging way. Once the basic setup is in place, you can further customize the popup’s styling and behavior to match your store’s specific needs.
If you need help with this, you can contact one of the best Magento Solutions Partners, Klizer, or check out our expert Magento services for support.
