This website uses cookies

Our website, platform and/or any sub domains use cookies to understand how you use our services, and to improve both your experience and our marketing relevance.

Add Magento 2 Modal Widget Module [Step by Step]

Updated on June 16, 2022

3 Min Read

All ecommerce websites have one purpose and that is to gain more sales. One way to achieve this is by focusing the user’s attention on a particular action on the page so that they click on it.

Modal Widget Magento 2

A Modal Window helps with this 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 text ‘Cancel,’ ‘Close,’ or ‘Submit.’

Adding the modal widget in Magento 2 is quite easier. It can be implemented under the <Magento_Ui_module_dir>/view/base/web/js/modal/modal.js  source.

Let’s learn how to implement this custom modal popup using Magento 2 modal widget.

I have used RequireJS and a simple JS 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 the modal window.

Scale Your Magento 2 Store With Ease

One-Click Magento installation with your own managed hosting solution.

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>

Now, create the file registration.php  in the root directory of the module $Magento2Root/app/code/Cloudways/M2Modal/  and insert the following code into it:

<?php

use Magento\Framework\Component\ComponentRegistrar;

ComponentRegistrar::register(
	ComponentRegistrar::MODULE,
    'Cloudways_M2Modal',
    __DIR__
);

Create a layout and a template file, so that the directories look like this:

$Magento2Root/app/code/Cloudways/M2Modal/view/frontend/layout/

$Magento2Root/app/code/Cloudways/M2Modal/view/frontend/templates/

Now, 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" template="example.phtml" />
        </referenceContainer>
    </body>
</page>

In the code above, you will see a block defined in the main container, which extends the Cloudways\M2Modal\Block\Example  block (a block that we will create later).

Now, add the example.phtml  file in templates folder and insert 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 and execute the component.

Create a file example-modal.js  in $Magento2Root/app/code/Cloudways/M2Modal/view/frontend/web/js/  directory and add 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 dependency. 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 this config file is used by RequireJS.

So, 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'
        }
    }
};

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';
    }
}

Finally,

That’s it.

The window looks like this:

Conclusion

I hope the above tutorial will help you implement custom modal window in Magento 2 easily.

Magento 2 offers an easy way of creating custom UI behaviors. You can also extend the usability of other jQuery widgets and Knockout libraries.

If you have any question on adding Magento 2 Modal widget module, feel free to ask it in the comments below.

FAQs

What is Modal in Magento?

The Magento Modal displays secondary window over main primary (main) window by making the whole page darker and display the modal widget window.

Share your opinion in the comment section. COMMENT NOW

Share This Article

Customer Review at

“Great speed, features, knowledgebase, dashboard, UX and fast, expert support. Very happy!”

Stefan [Management Consultant]

Fayyaz Khattak

Fayyaz, a passionate Motorbike tourist, works as a Team Lead — Magento Community at Cloudways - A Managed Magento Hosting Platform. His objective is to learn & share about PHP & Magento Development in Community. You can contact him at [email protected]

×

Get Our Newsletter
Be the first to get the latest updates and tutorials.

Thankyou for Subscribing Us!

×

Webinar: How to Get 100% Scores on Core Web Vitals

Join Joe Williams & Aleksandar Savkovic on 29th of March, 2021.

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!