This article describes the code elements which can be added to the HTML of the Listing Theme.
Example
<div data-type="product" data-field="title">{Preview Text}</div>
This includes the "title" attribute from the current product. Multiple data-types are available and multiple data-fields are too. All default HTML attributes are supported. Other HTML tags also can be used as placeholders (not only <div> tag):
<h1 data-type="product" data-field="title">{Product Title}</h1>
<span data-type="product" data-field="description">{Product Description}</span>
General Attributes
data-type: type of the data field (product | setting) *required
data-field: field name of the data type (i.e. title, description, colour) *required
data-remove: removes tag if value is empty (true | false)
data-remove-parent: removes parent tag if value is empty (true | false)
data-remove-element: removes tag by specified id if value is empty (tag id)
data-remove-elements: removes tags by specified class if value is empty (tags class) - slower than data-remove-element
Specific Attributes
Single image
data-img: tag is an image or holds an image (true | false) *required
data-img-link: displays image as link, works only on image holder tag (true | false)
data-img-link-rel: sets rel attribute for image link, works only if data-img-link is true
Images Gallery
data-img-gallery: images gallery holder (true | false) *required
data-img-link: displays images as links (true | false)
data-img-max: maximum number of gallery images (int)
data-img-main: specifies main image field name, compares each gallery image against it (in order not to duplicate it)
data-img-type: describes images value type (serialized | json)
part of the article will show you how to insert a custom field using the ChannelUnity WYSIWYG Editor.