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.