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 informaiton 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 edtior 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 environment in which the editor runs so that different custom attribute editors on the same page don't interfere with each other.

Each host establishes a dedicated communication channel to its custom attribute editor. Page Designer adds some management code to the iframe that includes a subscribe method (with alias listen) 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.