Skip to end of metadata
Go to start of metadata

This article describes the code elements which can be added to the HTML of the Listing Theme.



<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.


Inserting Images

Inserting a Table