base_main_inner
from the @Storefront/storefront/page/content/index.html.twig
template to insert the modal specific DOM elements.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:PseudoModalUtil
in your plugin.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.PluginManager
. To achieve this you can add the following code to the main.js
file.PseudoModalUtil
class in our plugin.new PseudoModalUtil()
and assign to a property of our plugin for later usage. We also call the method open()
to make it visible.undefined
. This is because we have not added any content to show inside the modal.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.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()
.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: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:PseudoModalUtil
provides optional configuration. If you don't need backdrop of the modal for example just turn it off by instantiating the modal like thisjs-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.PseudoModalUtil
.