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.

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.

 

Inserting Images

Inserting a Table