First, create a configuration file module.xml in /app/code/Example/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="Example_M2Modal" setup_version="1.0.0" />
</config>
Now, create the file registration.php in the root directory of the module /app/code/Example/M2Modal/ and insert the following code into it:
<?php
use Magento\Framework\Component\ComponentRegistrar;
ComponentRegistrar::register(
ComponentRegistrar::MODULE,
'Example_M2Modal',
__DIR__
);
Create a layout and a template file, so that the directories look like this:
/app/code/Example/M2Modal/view/frontend/layout/
/app/code/Example/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="Example\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 Example\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 /app/code/Example/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 /app/code/Example/M2Modal/view/frontend/ directory and add the following code to it:
var config = {
map: {
'*': {
'example-modal': 'Example_M2Modal/js/example-modal'
}
}
};
As the Example\M2Modal\Block\Example block is already defined in the layout file, create the Example.php block file in the /app/code/Example/M2Modal/Block/ folder with the following code in it:
<?php
namespace Example\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 it.
The window looks like this:
Want want something like this ???
