Popup hold a critical position in e-commerce, offering an easy way to boost conversions and improve customer engagement. Using Magento 2 customization, you can bring forth targeted e-commerce popup to inform your customers about various information regarding promotions, cross-sales of products, and confirmation messages on certain actions like adding items to the cart. These real-time interactions not only draw attention but also help users toward completing their purchases.
In Magento 2, when a customer adds a product to their cart, this should be followed by some kind of feedback. A popup - better styled as a modal - can inform users that their action was successful and give them a summary of what they added, with the option to either continue to shop or go to checkout.
To proceed with the customization of popup within Magento 2, a couple of things are required. First, you are supposed to have Magento 2 set up correctly on your website. That serves as the base of what you are doing in this process. Second, you should first have some technical knowledge of how Magento 2 works, because customization of popup windows implies changes in some parts of the code concerning your store.
Next, you need to install the extensions that will help you in managing pop-ups. These are particular tools or plugins, which facilitate making, displaying, and managing pop-ups on your site much easier.
And not least, coding skills will be helpful. Basic knowledge of languages like HTML, CSS, and JavaScript will help tune up the look and behaviour of the popup. All this allows you to create popup that completely fit your store's design and customers' interactions.
1. registration.php: This file registers your module with Magento.
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'Vendor_Popup',
_DIR_
);
2. module.xml: This file defines your module.
<?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="Mageleven_AddtocartPopup" setup_version="1.0.0">
<sequence>
<module name="Magento_Catalog" />
</sequence>
</module>
</config>
3. Override catalog-add-to-cart.js to your custom module vendor/magento/module-catalog/view/frontend/web/js/catalog-add-to-cart.js to app/code/Mageleven/AddtocartPopup/view/frontend/web/js/catalog-add-to-cart.js
4. Create requirejs-config.js file in app\code\Mageleven\AddtocartPopup\view\frontend\ and use the below code.
var config =
{
map:
{
'*':
{
'Magento_Catalog/js/catalog-add-to-cart': 'Mageleven_AddtocartPopup/js/catalog-add-to-cart'
}
}
};
5. Find ajaxSubmit: function and add below code after self.enableAddToCartButton(form);
var popup = $('div class="add-to-cart-modal-popup"').html($('.page-title span').text() + ' This product was added to the cart.').modal({
modalClass: 'add-to-cart-popup',
title: $.mage.__("Popup Title"),
buttons: [
{
text: 'Continue shopping',
click: function () {
this.closeModal();
}
},
{
text: 'Go to cart',
click: function () {
window.location = window.checkout.checkoutUrl
}
}
]
});
popup.modal('openModal');
after that run commands
When users add a product to their cart, they will see a popup confirming the action. It enhances the user experience by providing instant feedback and guiding them towards the next steps.
Magento 2 popup customization is one of the best ways to enhance customer experience and increase sales. Customizing popup with your store design and targeting users based on their particular actions can give more efficient user engagement.
That is why, with Magento 2 flexible popup extensions, one can create personalized offers, discounts, or products at the right time, which will increase conversions. By capturing valuable customer data, custom popup also help reduce cart abandonment. Improving user engagement further is the key to boosting sales, so use Magento 2 popup customization and maximize the revenue potential.
Check our top Magento 2 Extension: click here
Validate your login