How Does a Custom Attribute Editor Work?

A custom attribute editor uses a meta definition file, script, and JavaScript and CSS resources to implement an editor that operates within a self-contained environment on the client side. The merchant uses the custom attribute editor in the Page Designer visual editor to configure a value for the attribute.

In the meta definition file for the component type, define the attribute's type as custom. If information is passed to the custom attribute editor, include that information in an editor_definition element for the attribute. In the meta definition file for the custom attribute editor, list the CSS and JavaScript resources that the custom attribute editor requires. You can optionally add server-side logic or resources to initialize the custom attribute editor in the script file for the custom attribute editor. You include the meta definition file and script file for the custom attribute editor, along with the JavaScript and CSS resources, in a custom cartridge assigned to the Business Manager site.

On the client side, each custom attribute editor is wrapped in a host component that contains an HTML <iframe> element. The iframe encapsulates the code and style of the editor and represents a self-contained sandbox environment in which the editor runs so that different custom attribute editors on the same page don't interfere with each other.

The host and the custom attribute editor in the iframe communicate with each other on a dedicated communication channel. Page Designer adds some management code to the iframe that includes a subscribe method and an emit method that send predefined events with serializable payloads back and forth between the host and the editor.

For information about the messaging channel implemented for Page Designer custom attribute editors, see Channel Messaging.

X Privacy Update: We use cookies to make interactions with our websites and services easy and meaningful, to better understand how they are used and to tailor advertising. By continuing to use this site you are giving us your consent to do this.