3

How can I specify an custom template for an modal? I tried to specify the type and customTemplate, but no luck. The template file is called modal-gallery.html and is placed on the same path as the modal-popup.

var modalOptions = {
    type: 'gallery',
    customTpl: 'gallery'
};
jQuery('<div />').modal(modalOptions).modal('openModal');

4 Answers 4

3

I found the answer by myself. You need to define 'text!ui/template/modal/modal-gallery.html' as galleryTpl and use the modalOptions as below:

var modalOptions = {
type: 'gallery',
customTpl: 'gallery',
galleryTpl: galleryTpl,
};
0

yes, extending the answer provided above

1) Set your script

<script>
require(
    [
        'jquery',
        'Magento_Ui/js/modal/modal',
        'text!ui/template/modal/modal-gallery.html'
    ],
    function($,modal, galleryTpl) {
        var options = {
            type: 'gallery',
            customTpl: 'gallery',
            galleryTpl: galleryTpl,
...

Where type and customTpl attributes, got the end of the custom name file

2) Place your new custom file on these path frontend/<brand>/<customTheme>/Magento_Ui/web/templates/modal/modal-gallery.html

3) Tip, to prevent restyling all - On your custom template, add to the first <aside> tag, the class modal-popup

0

Could you please specify the same the path not for theme but for module? Where exactly should I place custom popup template?

1
  • Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.
    – Community Bot
    May 5, 2022 at 7:18
0

There are two options for creating a template.

Theme

If you want to create a modal template in the theme, you should put the template file in the following path:

<magento_root>/app/design/frontend/<Vendor>/<theme>/Magento_Ui/web/templates/modal/exampleTemplate.html

Now you can add your own template via requirejs just as it is originally in the "Magento_Ui/js/modal/modal" code and it will look like this text!ui/template/modal/exampleTemplate.html.

Module

For the module, it may be a path like this:

<magento_root>/app/code/<Vendor>/<Module>/view/frontend/web/template/modal/exampleTemplate.html

In this case the template path will start with the name of your module i.e. <Vendor>_<Module> (instead of Magento_UI module - that's where the prefix ui comes from). That path will look like this text!<Vendor>_<Module>/template/modal/exampleTemplate.html.

Usage of template

Now when you have a template created and you know what its path is, you can use it as a custom template of the modal. It may look like the code below:

<div id="modal">
    <div class="modal-body-content">
        <h2>Modal Example</h2>
    </div>
</div>

<script type="text/javascript">
    require([
        'jquery',
        'Magento_Ui/js/modal/modal',
        'text!ui/template/modal/exampleTemplate.html' // for the template created in the theme
        // 'text!<Vendor>_<Module>/template/modal/exampleTemplate.html' // for the template created in the module
    ], function($, modal, exampleTpl) {

        const options = {
            type: 'custom',
            customTpl: exampleTpl,
            responsive: true,
            title: 'Custom modal template',
            buttons: []
        };

        modal(options, $('#modal')); // creates modal
        $('#modal').modal('openModal'); // opens modal
    });
</script>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.