Dynamic components

[bradmac]

Consider this use case: I would like to develop a products list component for use with EDM's. This component should show a list of 3 or 4 products which meet the preferences of the user the EDM is being sent to.

Ideally, when i add this component to an EDM using keditor it will generate a list of products so i can see how it looks. But of course i dont want that list of products to be saved into the source of the EDM, i only want the component itself.

So here is how i think we can do this in KEditor

• component snippets can have a data attribute of dynamic-href on any div in the component. When a such component is added keditor will call out to that href, passing all data params on the component as request parameters. The response will be inserted inside the div with the dynamic-href attribute.
• when keditor displays content previously saved, any components with that attribute will have the same process executed
• when keditor saves content, any divs with the dynamic-href attribute will be cleared

The server will support the editor by:

• having a url for each component, eg /components/productList?numProducts=4&category=fashion
• when called, this will evaluate the component template and return the html snippet

The persisted content will be used to dynamically generate content when the EDM is sent. Our server will read and parse the content, and then look for dynamic sections and replaced them with content generated by the component template. Note that the component template is never accessed by KEditor, and is not available for editing by content authors.

Example - persisted component

<div data-type="container" data-preview="/static/keditor/snippets/default/preview/row_6_6.png">
<h1>Your products</h1>
<div data-dynamic-href="/components/productList" data-num-products="3" data-category="fashion">
</div>
</div>

When this component is added to the editor, KEditor will load content from /components/productList. This might result in this:

<div data-type="container" data-preview="/static/keditor/snippets/default/preview/row_6_6.png">
<h1>Your products</h1>
<div data-dynamic-href="/components/productList" data-num-products="3" data-category="fashion">
<img src="product1.png"/>
<img src="product2.png"/>
<img src="product3.png"/>
</div>
</div>