The pattern for consuming Page Builder events in JavaScript, such as within the preview.js
component, is to import Magento_PageBuilder/js/events
and use the events.on()
method to bind to the event you want to handle, as shown here:
1
2
3
4
5
6
7
8
9
| define([
'Magento_PageBuilder/js/events',
], function (events) {
'use strict';
events.on("event:name", function (args) {
// do logic
});
});
|
Events list
The following table lists the Page Builder events you can bind to and handle within your content type.
Event details
contentType:*
events
Events starting with contentType:
are triggered for every content type on the stage. These events can also be called for specific content types by prefixing the content type’s name before the event (name:event
). For example:
text:createAfter
row:mountAfter
tab-item:mountAfter
contentType:createAfter
1
| events.on("contentType:createAfter", function (params) {});
|
Params |
Type |
id |
string |
contentType |
ContentType or ContentTypeCollection |
Back to top
contentType:mountAfter
ContentType
1
| events.on("contentType:mountAfter", function (params) {});
|
Params |
Type |
id |
string |
contentType |
ContentType |
ContentTypeCollection
1
| events.on("contentType:mountAfter", function (params) {});
|
Params |
Type |
id |
string |
contentType |
ContentTypeCollection |
expectChildren |
number |
Back to top
contentType:dropAfter
1
| events.on("contentType:dropAfter", function (params) {});
|
Params |
Type |
id |
string |
contentType |
ContentType or ContentTypeCollection |
Back to top
contentType:renderAfter
1
| events.on("contentType:renderAfter", function (params) {});
|
Params |
Type |
id |
string |
element |
HTMLElement |
contentType |
ContentType or ContentTypeCollection |
Back to top
contentType:removeAfter
1
| events.on("contentType:removeAfter", function (params) {});
|
Params |
Type |
contentType |
ContentType or ContentTypeCollection |
index |
number |
parentContentType |
ContentType or ContentTypeCollection |
stageId |
string |
Back to top
contentType:duplicateAfter
1
| events.on("contentType:duplicateAfter", function (params) {});
|
Params |
Type |
originalContentType |
ContentType or ContentTypeCollection |
duplicateContentType |
ContentType or ContentTypeCollection |
index |
number |
direct |
boolean |
Back to top
contentType:moveBefore
1
| events.on("contentType:moveBefore", function (params) {});
|
Params |
Type |
contentType |
ContentType |
sourceParent |
ContentTypeCollection |
targetParent |
ContentTypeCollection |
targetIndex |
number |
stageId |
string |
Back to top
contentType:moveAfter
1
| events.on("contentType:moveAfter", function (params) {});
|
Params |
Type |
contentType |
ContentType |
sourceParent |
ContentTypeCollection |
targetParent |
ContentTypeCollection |
targetIndex |
number |
stageId |
string |
Back to top
contentType:redrawAfter
1
| events.on("contentType:redrawAfter", function (params) {});
|
Backend
Params |
Type |
id |
string |
contentType |
ContentType or ContentTypeCollection |
Frontend
Params |
Type |
element |
HTMLElement |
Back to top
column:dragStart
1
| events.on("column:dragStart", function (params) {});
|
Params |
Type |
column |
ContentTypeCollection |
stageId |
string |
Back to top
column:dragStop
1
| events.on("column:dragStop", function (params) {});
|
Params |
Type |
column |
ContentTypeCollection |
stageId |
string |
Back to top
column:initializeAfter
1
| events.on("column:initializeAfter", function (params) {});
|
Params |
Type |
column |
Column |
element |
Element |
columnGroup |
ColumnGroup |
Back to top
image:{{preview.contentType.id}}:assignAfter
1
| events.on(`image:${this.contentType.id}:assignAfter`, function (params) {});
|
Params |
Type |
imageObject |
File |
Back to top
image:mountAfter
1
| events.on("image:mountAfter", function (params) {});
|
Params |
Type |
id |
string |
contentType |
ContentType |
expectChildren |
number |
Back to top
image:uploadAfter
1
| events.on("image:uploadAfter", function (params) {});
|
Back to top
stage:{{preview.contentType.stageId}}:readyAfter
1
| events.on(`stage:${this.contentType.stageId}:readyAfter`, function (params) {});
|
Back to top
stage:{{preview.contentType.stageId}}:renderAfter
1
| events.on(`stage:${this.contentType.stageId}:renderAfter`, function (params) {});
|
Back to top
stage:interactionStart
1
| events.on("stage:interactionStart", function (params) {});
|
Params |
Type |
stageId |
string |
Back to top
stage:interactionStop
1
| events.on("stage:interactionStop", function (params) {});
|
Params |
Type |
stageId |
string |
Back to top
stage:{{preview.contentType.stageId}}:fullScreenModeChangeAfter
1
| events.on(`stage:${this.contentType.stageId}:fullScreenModeChangeAfter`, function (params) {});
|
Params |
Type |
fullScreen |
boolean |
Back to top
childContentType:sortStart
1
| events.on("childContentType:sortStart", function (params) {});
|
Params |
Type |
instance |
ContentTypeCollection |
originalPosition |
number |
ui |
JQueryUI.SortableUIParams |
Back to top
childContentType:sortUpdate
1
| events.on("childContentType:sortUpdate", function (params) {});
|
Params |
Type |
instance |
ContentTypeCollection |
newPosition |
number |
originalPosition |
number |
ui |
JQueryUI.SortableUIParams |
event |
jQuery.Event |
Back to top
stage:error
1
| events.on("stage:error", function (params) {});
|
Back to top
stage:{{preview.contentType.stageId}}:readyAfter
1
| events.on(`stage:${this.contentType.stageId}:readyAfter`, function (params) {});
|
Back to top
1
| events.on(`stage:${this.contentType.stageId}:masterFormatRenderAfter`, function (params) {});
|
Params |
Type |
renderedOutput |
string |
Back to top
stage:updateAfter
1
| events.on("stage:updateAfter", function (params) {});
|
Params |
Type |
stageId |
string |
Back to top
stage:childFocusStart
1
| events.on("stage:childFocusStart", function () {});
|
Back to top
stage:childFocusStop
1
| events.on("stage:childFocusStop", function () {});
|
Back to top
stage:viewportChangeAfter
Triggered for viewport changes in the Admin.
Handle this event to control responsive changes to your content type from within your widget
controls.
Your widget
should handle this event for cases where your content type is contained within a Block or Dynamic Block. In these cases, your content type’s widget
is loaded in the Admin, not your preview
component.
1
| events.on(`stage:viewportChangeAfter`, function (args) {});
|
Args |
Type |
viewport |
string |
previousViewport |
string |
Back to top
stage:{{preview.contentType.stageId}}:viewportChangeAfter
Triggered for viewport changes in the Admin.
Handle this event to control responsive changes to your content type from within your preview
component.
1
| events.on(`stage:${this.contentType.stageId}:viewportChangeAfter`, function (args) {});
|
Args |
Type |
viewport |
string |
previousViewport |
string |
Back to top
state
1
| events.on("state", function (params) {});
|
Params |
Type |
state |
DataStore |
Back to top
{{config.name}}:{{preview.contentType.id}}:updateAfter
1
| events.on(`${this.config.name}:${this.contentType.id}:updateAfter`, function (params) {});
|
Params |
Type |
contentType |
ContentType |
Back to top
googleMaps:authFailure
1
| events.on("googleMaps:authFailure", function () {});
|
Back to top