Skip to main content

Modals

A modal can be displayed in front of all other elements. To return to the main content the user must engage with the modal by completing an action or by closing it. It should be mainly opened when the user interacts with something. We recommend that no modal gets opened without context. As an example, it would be bad practice if the user gets logged in and directly see some modals (e.g. changelogs of extensions) which all need to be closed manually.

Open modal

Open a new modal in the current view. The content of the modal is determined by your locationId.

Usage:

ui.modal.open({
title: 'Your modal title',
locationId: 'your-location-id',
variant: 'large',
showHeader: true,
showFooter: false,
closable: true
buttons: [
{
label: 'Dispatch notification',
method: () => {
notification.dispatch({
message: 'Hello from the modal',
title: 'Modal example'
})
}
},
{
label: 'Close modal',
variant: 'primary',
method: () => {
ui.modal.close({
locationId: 'your-location-id'
})
}
}
],
})

Parameters

NameRequiredDefaultDescriptionAvailable at Shopware
titletrueThe title of the modal
locationIdtrueThe id for the content of the modal
variantfalse'default'Determine the size of the modal. Possible values are 'default', 'small', 'large' and 'full'
showHeaderfalsetrueEnable the header in the modal which contains the title
showFooterfalsetrueEnable the modal footerv6.5.8
closablefalsetrueIf this is set to false then the modal can only be closed programmatically
buttonsfalse[]This array contains button configurations which will render buttons in the footer of the modal

Example

Menu item example

ui.modal.open({
title: 'Hello from the plugin',
locationId: 'my-awesome-app-hello-world-modal',
buttons: [
{
label: 'Dispatch notification',
method: () => {
notification.dispatch({
message: 'Hello from the modal',
title: 'Modal plugin'
})
}
},
{
label: 'Close modal',
variant: 'primary',
method: () => {
ui.modal.close({
locationId: 'my-awesome-app-hello-world-modal'
})
}
}
]
})

Close modal

Closes an opened modal. You need use the correct locationId of the modal which should get closed.

Usage:

ui.modal.close({ locationId: 'your-location-id' })

Parameters

NameRequiredDefaultDescription
locationIdtrueThe locationId of the modal which should get closed