Managable zones - repeater

Add attribute to html node ' data-ecms-tag="repeater|ID|Storage" ' to manage this node as repeater.  Please look at manageable zones - text for more information about attribute content.


Please add to page to manage site menu

<ul id="menu" data-ecms-tag="repeater|Main Menu|General">
<li data-ecms-item="menu item"><a data-ecms-anchor="Url" href="/">Home</a></li>
<li><a href="/content/About">About</a></li> 
In this case all data will be written to storage with name 'General' with ID = 'Main Menu'. Directly after repeater node menu item template should be described and only once. In this case this is <li data-ecms-item="menu item"><a data-ecms-anchor="Url" href="/">Home</a></li>. 

Inside the menu item template you can describe any other manageable zone with little difference : another tag should be used - data-ecms-[manageable zone type] = "ID". There [manageable zone type] is the name of already existing manageable zones type ('text', 'html', 'anchor', 'image', 'repeater', 'dataset'). ID is the unique name of item manageable zone.

It is possible to use any amount of repeaters inside other repeaters.

It is possible to set separator design template for repeater. In this case such node should be put inside repeater template : <div data-ecms-separator="sep"><hr/></div>.

It is possible also to use alternative design for item. Such node should be used <li data-ecms-altitem="menu item alt"><a data-ecms-anchor="Url" href="/">Home</a></li>


Please add data-ecms-navigation="your css class" attribute to the repeater item node to let item change css class if current node is selected. Naming conventions should be used. Node anchor should have name 'Url' and children nodes should be named 'Children'. So html for navigation menu should look like this:

<ul id="menu" data-ecms-tag="repeater|Main Menu|General">
<li data-ecms-item="menu item" data-ecms-navigation="menuitem"><a data-ecms-anchor="Url" href="/">Home</a>
                    <ul data-ecms-repeater="Children">
<li data-ecms-item="menu item" data-ecms-navigation="menuitem"><a data-ecms-anchor="Url" href="/">Home</a>
Home page node from this example will have css class 'menuitem item-selected' if it will be selected or '
menuitem children-selected' if some of it children will be selected.

Back to documentation
Next article