Using a modal window
Overview
This guide explains how you can use a modal window in your plugin in different scenarios.
Prerequisites
This guide requires you to already have a basic plugin running. This guide does not explain how to create a new plugin for Shopware 6. Head over to our Plugin base guide to learn how to create a plugin at first:
While this is not mandatory, having read the guide about adding custom JavaScript plugins beforehand might help you understand this guide a bit further:
Create a modal manually from the DOM using Bootstrap
The simples solution to create a modal is by using Bootstrap. More info: Modal Bootstrap Here is a basic implementation as an example. We override the
base_main_inner from the @Storefront/storefront/page/content/index.html.twig template to insert the modal specific DOM elements.<plugin root>/src/Resources/views/storefront/page/content/index.html.twig
1
{% sw_extends '@Storefront/storefront/page/content/index.html.twig' %}
2
​
3
{% block base_main_inner %}
4
<!-- Button trigger modal -->
5
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
6
Launch demo modal
7
</button>
8
​
9
<!-- Modal -->
10
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
11
<div class="modal-dialog" role="document">
12
<div class="modal-content">
13
<div class="modal-header">
14
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
15
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
16
<span aria-hidden="true">×</span>
17
</button>
18
</div>
19
<div class="modal-body">
20
<!-- insert your content here -->
21
...
22
</div>
23
<div class="modal-footer">
24
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
25
<button type="button" class="btn btn-primary">Save changes</button>
26
</div>
27
</div>
28
</div>
29
</div>
30
​
31
{{ parent() }}
32
{% endblock %}
Copied!
Create a modal using AJAX Modal Utility
When setting a
data-url in addition to data-toggle="modal" shopware automatically uses the PseudoModalUtil and the pseudo modal template from the base.html.twig to render a modal:<plugin root>/src/Resources/views/storefront/page/content/index.html.twig
1
{% sw_extends '@Storefront/storefront/page/content/index.html.twig' %}
2
​
3
{% block base_main_inner %}
4
<!-- This uses `AjaxModalExtensionUtil` -->
5
<button class="btn"
6
data-toggle="modal"
7
data-url="https://example.org/ajax-url">
8
​
9
{{ parent() }}
10
{% endblock %}
Copied!
This does not work when the trigger selector is being changed via JavaScript, e.g. because of an AJAX call which replaces the content.
Advanced / manual using Pseudo Modal Utility
To create a modal window you can use the
PseudoModalUtil in your plugin.As explained in the guide on adding custom javascript we load our JavaScript plugin by creating
index.html.twig template in the <plugin root>/src/Resources/views/storefront/page/content/ folder. Inside this template, extend from the @Storefront/storefront/page/content/index.html.twig and overwrite the base_main_inner block. After the parent content of the blog, add a template tag with the data-example-plugin attribute.<plugin root>/src/Resources/views/storefront/page/content/index.html.twig
1
{% sw_extends '@Storefront/storefront/page/content/index.html.twig' %}
2
​
3
{% block base_main_inner %}
4
{{ parent() }}
5
​
6
<template data-example-plugin></template>
7
{% endblock %}
Copied!
Now we need to register the plugin which should create a modal in the
PluginManager. To achieve this you can add the following code to the main.js file.<plugin root>/src/Resources/app/storefront/src/main.js
1
// Import all necessary Storefront plugins
2
import ExamplePlugin from './example-plugin/example-plugin.plugin';
3
​
4
// Register your plugin via the existing PluginManager
5
const PluginManager = window.PluginManager;
6
PluginManager.register('ExamplePlugin', ExamplePlugin, '[data-example-plugin]');
Copied!
Now let's get started with the modal window. First we have to import the
PseudoModalUtil class in our plugin.<plugin root>/src/Resources/app/storefront/src/example-plugin/example-plugin.plugin.js
1
import Plugin from 'src/plugin-system/plugin.class';
2
import PseudoModalUtil from 'src/utility/modal-extension/pseudo-modal.util';
3
​
4
export default class ExamplePlugin extends Plugin {
5
init() {
6
// ...
7
}
8
}
Copied!
Now we create a new modal instance using
new PseudoModalUtil() and assign to a property of our plugin for later usage. We also call the method open() to make it visible.<plugin root>/src/Resources/app/storefront/src/example-plugin/example-plugin.plugin.js
1
import Plugin from 'src/plugin-system/plugin.class';
2
import PseudoModalUtil from 'src/utility/modal-extension/pseudo-modal.util';
3
​
4
export default class ExamplePlugin extends Plugin {
5
init() {
6
this.openModal();
7
}
8
9
openModal() {
10
// create a new modal instance
11
this.modal = new PseudoModalUtil();
12
13
// open the modal window and make it visible
14
this.modal.open();
15
}
16
}
Copied!
To see your changes you have to build the storefront. Use the following command to build your storefront and reload it afterwards:
Development template
Production template
1
./psh.phar storefront:build
Copied!
1
./bin/build-storefront.sh
Copied!
You can now see a blank modal which contains
undefined. This is because we have not added any content to show inside the modal.The constructor method of
PseudoModalUtil() expects some HTML content to display. To keep this guide simple, we are only including sample code here. Of course, the content can also be generated via an API and inserted via AJAX requests.<plugin root>/src/Resources/app/storefront/src/example-plugin/example-plugin.plugin.js
1
import Plugin from 'src/plugin-system/plugin.class';
2
import PseudoModalUtil from 'src/utility/modal-extension/pseudo-modal.util';
3
​
4
export default class ExamplePlugin extends Plugin {
5
init() {
6
// declaring some basic content
7
const content = `
8
<div class="js-pseudo-modal-template">
9
<div class="js-pseudo-modal-template-title-element">Modal title</div>
10
<div class="js-pseudo-modal-template-content-element">Modal content</div>
11
</div>
12
`;
13
14
this.openModal(content);
15
}
16
17
openModal(content) {
18
// create a new modal instance
19
this.modal = new PseudoModalUtil(content);
20
21
// open the modal window and make it visible
22
this.modal.open();
23
}
24
}
Copied!
Closing the modal
The
PseudoModalUtil class also provide a close() method. Same as with opening the modal by calling this.modal.open(), you can simply close the modal with this.modal.close().Callback when opening a modal
The
open() method of the PseudoModalUtil class supports a callback function as an argument. So if you need to perform some action when your modal opens, you can implement a callback like this:<plugin root>/src/Resources/app/storefront/src/example-plugin/example-plugin.plugin.js
1
import Plugin from 'src/plugin-system/plugin.class';
2
import PseudoModalUtil from 'src/utility/modal-extension/pseudo-modal.util';
3
​
4
export default class ExamplePlugin extends Plugin {
5
init() {
6
// declaring some basic content
7
const content = `
8
<div class="js-pseudo-modal-template">
9
<div class="js-pseudo-modal-template-title-element">Modal title</div>
10
<div class="js-pseudo-modal-template-content-element">Modal content</div>
11
</div>
12
`;
13
14
this.openModal(content);
15
}
16
17
openModal(content) {
18
// create a new modal instance
19
this.modal = new PseudoModalUtil(content);
20
21
// open the modal window and fire a callback function
22
this.modal.open(this.onOpenModal.bind(this));
23
}
24
25
onOpenModal() {
26
console.log('the modal is opened');
27
}
28
}
Copied!
Updating the modal content
To update the content of a modal,
PseudoModalUtil provides a method updateContent() to which you can pass the updated template string. The method also accepts a callback function as a second argument, which is called after the content has been updated. Here is an example how to use it:<plugin root>/src/Resources/app/storefront/src/example-plugin/example-plugin.plugin.js
1
import Plugin from 'src/plugin-system/plugin.class';
2
import PseudoModalUtil from 'src/utility/modal-extension/pseudo-modal.util';
3
​
4
export default class ExamplePlugin extends Plugin {
5
init() {
6
// declaring some basic content
7
const content = `
8
<div class="js-pseudo-modal-template">
9
<div class="js-pseudo-modal-template-title-element">Modal title</div>
10
<div class="js-pseudo-modal-template-content-element">Modal content</div>
11
</div>
12
`;
13
14
this.openModal(content);
15
16
// ... do some stuff
17
​
18
const updatedContent = `
19
<div class="js-pseudo-modal-template">
20
<div class="js-pseudo-modal-template-title-element">Modal title</div>
21
<div class="js-pseudo-modal-template-content-element">Updated content</div>
22
</div>
23
`;
24
25
this.modal.updateModal(updatedContent, this.onUpdateModal.bind(this));
26
}
27
28
openModal(content) {
29
// create a new modal instance
30
this.modal = new PseudoModalUtil(content);
31
32
// open the modal window and fire a callback function
33
this.modal.open(this.onOpenModal.bind(this));
34
}
35
36
onOpenModal() {
37
console.log('the modal is opened');
38
}
39
​
40
onUpdateModal() {
41
console.log('the modal was updated');
42
}
43
44
}
Copied!
Customize the modal appearance
The constructor method of
PseudoModalUtil provides optional configuration. If you don't need backdrop of the modal for example just turn it off by instantiating the modal like this<plugin root>/src/Resources/app/storefront/src/example-plugin/example-plugin.plugin.js
1
import Plugin from 'src/plugin-system/plugin.class';
2
import PseudoModalUtil from 'src/utility/modal-extension/pseudo-modal.util';
3
​
4
export default class ExamplePlugin extends Plugin {
5
init() {
6
// declaring some basic content
7
const content = `
8
<div class="js-pseudo-modal-template">
9
<div class="js-pseudo-modal-template-title-element">Modal title</div>
10
<div class="js-pseudo-modal-template-content-element">Modal content</div>
11
</div>
12
`;
13
14
this.openModal(content);
15
}
16
17
openModal(content) {
18
// disable backdrop
19
const useBackrop = false;
20
21
// create a new modal instance
22
this.modal = new PseudoModalUtil(content, useBackrop);
23
24
// open the modal window and make it visible
25
this.modal.open();
26
}
27
}
Copied!
As you can see in the sample code, we are using the
js-pseudo-modal-template-title-element class to style the title text of the modal. It also tells the PseudoModalUtil class that the content of the div holds the title text. Furthermore there are two more css selectors js-pseudo-modal-template and js-pseudo-modal-template-content-element to define the structure of the template string.If want to customize your modal by using different style classes, you can do that by overriding the defaults while instantiating
PseudoModalUtil.Here is an example which shows how to override the CSS class names.
<plugin root>/src/Resources/app/storefront/src/example-plugin/example-plugin.plugin.js
1
// ...
2
export default class ExamplePlugin extends Plugin {
3
init() {
4
// ...
5
}
6
​
7
openModal(content) {
8
// enable backdrop
9
const useBackrop = true;
10
​
11
// create a new modal instance
12
this.modal = new PseudoModalUtil(
13
content,
14
useBackrop,
15
'.custom-js-pseudo-modal-template',
16
'.custom-js-pseudo-modal-template-content-element',
17
'.custom-js-pseudo-modal-template-title-element'
18
);
19
​
20
// open the modal window and make it visible
21
this.modal.open();
22
}
23
}
Copied!
Last modified 17d ago