data-slot=text

Page Builder events

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:

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

events.on("contentType:createAfter", function (params) {});

Back to top

contentType:mountAfter

ContentType

events.on("contentType:mountAfter", function (params) {});

ContentTypeCollection

events.on("contentType:mountAfter", function (params) {});

Back to top

contentType:dropAfter

events.on("contentType:dropAfter", function (params) {});

Back to top

contentType:renderAfter

events.on("contentType:renderAfter", function (params) {});

Back to top

contentType:removeAfter

events.on("contentType:removeAfter", function (params) {});

Back to top

contentType:duplicateAfter

events.on("contentType:duplicateAfter", function (params) {});

Back to top

contentType:moveBefore

events.on("contentType:moveBefore", function (params) {});

Back to top

contentType:moveAfter

events.on("contentType:moveAfter", function (params) {});

Back to top

contentType:redrawAfter

events.on("contentType:redrawAfter", function (params) {});

Backend

Frontend

Back to top

column:dragStart

events.on("column:dragStart", function (params) {});

Back to top

column:dragStop

events.on("column:dragStop", function (params) {});

Back to top

column:initializeAfter

events.on("column:initializeAfter", function (params) {});

Back to top

image:{{preview.contentType.id}}:assignAfter

events.on(`image:${this.contentType.id}:assignAfter`, function (params) {});

Back to top

image:mountAfter

events.on("image:mountAfter", function (params) {});

Back to top

image:uploadAfter

events.on("image:uploadAfter", function (params) {});

Back to top

stage:{{preview.contentType.stageId}}:readyAfter

events.on(`stage:${this.contentType.stageId}:readyAfter`, function (params) {});

Back to top

stage:{{preview.contentType.stageId}}:renderAfter

events.on(`stage:${this.contentType.stageId}:renderAfter`, function (params) {});

Back to top

stage:interactionStart

events.on("stage:interactionStart", function (params) {});

Back to top

stage:interactionStop

events.on("stage:interactionStop", function (params) {});

Back to top

stage:{{preview.contentType.stageId}}:fullScreenModeChangeAfter

events.on(`stage:${this.contentType.stageId}:fullScreenModeChangeAfter`, function (params) {});

Back to top

childContentType:sortStart

events.on("childContentType:sortStart", function (params) {});

Back to top

childContentType:sortUpdate

events.on("childContentType:sortUpdate", function (params) {});

Back to top

stage:error

events.on("stage:error", function (params) {});

Back to top

stage:{{preview.contentType.stageId}}:readyAfter

events.on(`stage:${this.contentType.stageId}:readyAfter`, function (params) {});

Back to top

stage:{{preview.contentType.stageId}}:masterFormatRenderAfter

events.on(`stage:${this.contentType.stageId}:masterFormatRenderAfter`, function (params) {});

Back to top

stage:updateAfter

events.on("stage:updateAfter", function (params) {});

Back to top

stage:childFocusStart

events.on("stage:childFocusStart", function () {});

Back to top

stage:childFocusStop

events.on("stage:childFocusStop", function () {});

Back to top

stage:viewportChangeAfter

Triggered on viewport changes in the Admin stage. Handle this event to control in your content type's widget (widget.js) for cases in which your content type is rendered on the Admin stage from within a Block or Dynamic Block. In these cases, Page Builder loads your widget, not the preview component, to the Admin stage. This means that your widget as to make changes to your content type when users change the viewports on the stage.

events.on(`stage:viewportChangeAfter`, function (args) {});

Back to top

stage:{{preview.contentType.stageId}}:viewportChangeAfter

Triggered on viewport changes in the Admin stage. Handle this event to control responsive changes to your content type from within your preview component.

events.on(`stage:${this.contentType.stageId}:viewportChangeAfter`, function (args) {});

Back to top

state

events.on("state", function (params) {});

Back to top

{{config.name}}:{{preview.contentType.id}}:updateAfter

events.on(`${this.config.name}:${this.contentType.id}:updateAfter`, function (params) {});

Back to top

googleMaps:authFailure

events.on("googleMaps:authFailure", function () {});

Back to top