All ecommerce websites have one purpose, which is to gain more sales. One way to achieve this is by focusing the user’s attention on a particular action. From the customer standpoint, this means the interaction between the pages in showing the responses after taking actions as per their needs are pleasant this means popup will be the most promising way.
Magento 2 modal popup is a good way to display highlighted content without spending much time for the user. Creating a custom Magento 2 popup is quite a complex task for developers, but I’ve made this process simple for you in this article. Let’s read on!
What Is a Magento 2 Modal Widget?
A modal (also called Popup Modal or Modal Widget) is a window that displays on the web page as an element and deactivates the rest of the page to perform the activity by the user. Modals are most effective for users’ attention to prompt important pieces of information to the website.
A popup modal window can help by making the whole page darker and highlighting the modal window in the center. Its structure includes a content container, a title with the page content, a close control “X” and a CTA button with the text ‘Cancel,’ ‘Close,’ or ‘Submit.’
You can add the modal widget in Magento 2 under the <Magento_Ui_module_dir>/view/base/web/js/modal/modal.js source.
Scale Your Magento 2 Store With Ease
One-Click Magento installation with your own managed hosting solution.
Create Content for Magento 2 Modal Popup
You can create your custom popup modal to engage customers and promote the product, which can improve your conversion rate. In Magento 2, you can create the popup content in the following way.
<div id="modal-content">
<div class="modal-inner-content">
<!-- Modal Content –>
<p>Dummy Content..</p>
</div>
</div>
Now let’s see how to implement this custom modal popup using Magento 2 modal widget.
Experience the Cloudways Magento 2 Demo Store – No tech skills needed!
Experience a fully functional Magento 2 store built on top of renowned Cloudways hosting to deliver the fastest speeds.
Steps To Create Custom Popup In Magento 2
I have discussed two methods to create a custom popup modal widget using a custom javascript component with RequireJS and a built-in magento UI Widget component that makes the implementation of the modal widget to the page easier.
After installing this module, the main container of the page will contain a button that pops up in the modal window. Let’s get started with the steps.
Step 1: Register the Magento Modal Module
Create the file registration.php in the root directory of the module $Magento2Root/app/code/Cloudways/M2Modal/ and add the following code to it:
<?php
use Magento\Framework\Component\ComponentRegistrar;
ComponentRegistrar::register(
ComponentRegistrar::MODULE,
'Cloudways_M2Modal',
__DIR__
);
If you are stuck with any issues, please refer to the article for the reference to create a module in Magento 2.
Step 2: Declare a Module For Magento 2 Popup Modal
First, create a configuration file module.xml in $Magento2Root/app/code/Cloudways/M2Modal/etc/ directory and add the following code:
<?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="Cloudways_M2Modal" setup_version="1.0.0" />
</config>
Step 3: Create the Layout of the Magento 2 Popup Modal
Create a layout folder so that the directories look like this:
$Magento2Root/app/code/Cloudways/M2Modal/view/frontend/layout/
In the next step, create a default.xml file inside the layout folder of your module and add the following code to it:
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:View/Layout:etc/page_configuration.xsd">
<body>
<referenceContainer name="main">
<block class="Cloudways\M2Modal\Block\Example" name=”example-modal-cloudways” template="example.phtml" />
</referenceContainer>
</body>
</page>
In the code above, you will see a block defined in the main container that extends the Cloudways\M2Modal\Block\Example block (a block class that we will create later).
Step 4: Create the Template of the Magento 2 Popup Modal
Create a template folder in the view folder directory that looks like this:
$Magento2Root/app/code/Cloudways/M2Modal/view/frontend/templates/
Method 1: Using Custom Generated javascript
Now, add an example.phtml file in the templates folder and add the following code to it:
<div id="modal-content">
<?php echo $block->getContent(); ?>
</div>
<button id="example-modal-button" data-mage-init='{"example-modal": {"target": "#modal-content"}}'>
Open Modal
</button>
Here, use the data-mage-init='{“example-modal”: {“target”: “#modal-content”}}’ attribute (a declarative notation) to add a JavaScript component in example.phtml template.
Now, add a JS file to initialize the modal widget and execute the component. We also require JQuery and JQuery UI to initialize the modal widget.
Create a file example-modal.js in $Magento2Root/app/code/Cloudways/M2Modal/view/frontend/web/js/ directory and add the following code to it:
define([
"jquery", "Magento_Ui/js/modal/modal"
], function($){
var ExampleModal = {
initModal: function(config, element) {
$target = $(config.target);
$target.modal();
$element = $(element);
$element.click(function() {
$target.modal('openModal');
});
}
};
return {
'example-modal': ExampleModal.initModal
};
}
);
You will notice that the example-modal.js code uses the define function at the top. This function is from RequireJS, which is an array of dependencies. In the above example, example-modal.js uses jquery and Magento_Ui/js/modal/modal.
The example-modal.js file should be declared in the requirejs-config.js file because RequireJS use this config file.
Let’s now create the requirejs-config.js file in $Magento2Root/app/code/Cloudways/M2Modal/view/frontend/ directory and add the following code to it:
var config = {
map: {
'*': {
'example-modal': 'Cloudways_M2Modal/js/example-modal'
}
}
};
Method 2: Using Magento 2 Modal UI Widget
Please note that in the above method, we display the modal with our custom-generated JavaScript component example-modal.js in the file example.phtml with example-modal.js.
Here you can display directly with the Magento UI widget component in the template we created. Let’s now initialize the Magento 2 modal widget. Copy the following code in the file example.phtml:
<div id="modal-content">
<?php echo $block->getContent(); ?>
</div>
<script>
require(
[
'jquery',
'Magento_Ui/js/modal/modal'
],
function(
$,
modal
) {
var options = {
type: 'popup',
responsive: true,
innerScroll: true,
title: 'Example Modal’,
buttons: [{
text: $.mage.__(‘OK’),
class: '',
click: function () {
this.closeModal();
}
}]
};
var popup = modal(options, $('#modal-content’));
$('#modal-content’).modal('openModal');
}
);
</script>
It is recommended to call this JS code in a separate JS file and pass data from phtml to JS. Here Magento UI component is already registered in Require JS.
Step 5: Creating Block Class For Content of Magento 2 Modal
As the Cloudways\M2Modal\Block\Example block is already defined in the layout file, create the Example.php block file in the $Magento2Root/app/code/Cloudways/M2Modal/Block/ folder with the following code in it:
<?php
namespace Cloudways\M2Modal\Block;
class Example extends \Magento\Framework\View\Element\Template
{
public function getContent() : string
{
return 'Dummy content';
}
}
Step 6: Run the Command
In the last step, run the following commands:
Enable the module
php bin/magento module:enable Cloudways_M2Modal
Run setup upgrade command
To register a new module, run the below command:
php bin/magento setup:upgrade
Clear the Magento 2 cache
Clear the cache by the following command:
php bin/magento c:f OR
php bin/magento clear:cache
That’s it! The final result window will look like this:
Summary
I hope the above tutorial will help you easily implement custom modal windows in Magento 2. Magento 2 popup is easy to create in just a few steps, and it’s a convenient approach to informing users about appropriate information.
Magento 2 offers an easy way of creating custom UI behaviors. You can also extend the usability of other jQuery widgets and Knockout libraries. The custom modal widget in Magento 2 popup can be created with a few lines of code with the default Magento modal javascript component.
If you have any questions about adding Magento 2 Modal widget module, feel free to ask them in the comments below. Will catch you in the next tutorial; till then, stay in the know.
Q1. What is Modal in Magento?
The Magento Modal displays a secondary window over the main primary (main) window by making the whole page darker and displaying the modal widget window.
Q2. How to create a popup modal in Magento 2?
First, create a Registration.php file in the root directory of our module.
After that, create a module.xml file inside the etc directory of our module Cloudways/M2modal.
Create the layout of the default.xml file in the layout folder, and to display the content create the example.phtml file in the templates folder of our module.
Initialize the modal widget in the web/js/example-modal.js file to call the modal for display.
Create the block class in our module directory, i.e., Cloudways/M2modal/Block.
- Create the Cloudways/Mymodule Folder
- Declare the module by creating the file, etc/module.xml
- Register the created module by creating the file registration.php.
- Run the Command: php bin/magento setup:upgrade, php bin/magento setup:di:compile, php bin/magento cache:flush
- Check the module status module by php bin/magento module:status
Q3. What is the UI component in Magento 2?
UI components such as buttons, tables, and dialog in Magento 2 are the structural elements for displaying and delivering render page fragments with the support of the JavaScript server.
Jyotishna Kumari
Jyotishina is the Magento Community Expert at Cloudways and has 4 years of experience in web development. She has worked on e-commerce sites since the turn of the millennium and was working with Magento before version 1 was released. She loves to travel and explore new ideas whenever she finds time. Get in touch with her at [email protected].
