Sign in
Log inSign up
Use RequireJS To Implement The Magento 2 Modal Widget

Use RequireJS To Implement The Magento 2 Modal Widget

Fayyaz Khattak's photo
Fayyaz Khattak
·Aug 17, 2018

A modal makes the whole page darker in the background and highlights a window at the center of the page. 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 Magento 2 modal widget in your ecommerce store 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 a custom modal popup window using Magento 2 modal widget.

I would like to mention that I have used RequireJS that makes easier the implementation of the Magento 2 modal widget. After developing and installing this module, the main container of your Magento 2 homepage will contain a button that pops up the modal window.

I am assuming that you have your own web server with Magento 2 installed on it. If not, sign up on Cloudways - The Best Magento Hosting Platform, and avail 3-days trial for free.

Let's start!

First of all, create a module configuration file module.xml in $Magento2Root/app/code/Cloudways/M2Modal/etc/ directory and add the following code:

<?xml version="1.0"?>
<config xmlns:xsi="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="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,

  • Enable the module,
  • Run setup upgrade command
  • Clear the Magento 2 cache

That’s all.

The window looks like this:

Magento-2-Modal-Widget.png

3