Content Styles

Some template types can be used as a Content Style in the right-hand menu of the campaign editor. These are templates that have defined Template Blocks that will appear in the right as Content Blocks after selecting the style in the campaign.

The template base to be used as a Content Style is defined in the Main Template File and is a standard static HTML that defines the header, footer, CSS styles, but also, for example, the hidden preheader and so-called drop areas to which Drag & Drop then places blocks.

If the template contains a hidden preheader (the text that appears on the subject in some email clients), this preheader needs to have a defined class="preheader". In order to edit the content of the header or any part of the template, it is necessary to use the mkt-inline-edit="true" attribute.

Such drop zones can be defined multiplely in a template, but if the Content Style is to use Content Blocks, it is necessary to define at least one drop zone to accommodate Content Blocks.

Content blocks

To create a Content Block template, use the "New Template File" button and then select "Template Block" and fill in the block name. Under this name, this block will appear in the editor in the list of available blocks.

However, in order for the content block to be functional and usable in the campaign editor, it is necessary that it be wrapped in an element with the mkt-block="true" element. If the block did not have this element, it will not be possible to manipulate the block after inserting a block. However, it is not permissible to have nested blocks, have a defined drop zone in the block, or have another block definition in the block.

Within the block, you can specify editable areas that can be edited in the campaign using an inline element editor using mkt-inline-edit="true".

Example of a basic block definition:

Datasets

Often, editing directly in the content is uncomfortable and not easy to grasp for users, and it is more convenient to manipulate a complete set of parameters, so called datasets. For example, a product block that has a product name, photo, description, price, and link - as most of this data is used only once and in one place, and editing is straightforward, the link can be used in multiple places - like a click on a product name, a product photo, and a call-to-action purchase button. Entering a link in three places would then lead to errors and datasets minimize this risk of error. Blocks can contain one or more datasets with multiple values.

Each dataset has to be wrapped with an element with the mkt-block-type="dataset" attribute, whereby the campaign editor then identifies where the datasets are in the block. Once a dataset is defined in a block, it becomes editable and clicks it in the editor to open a window for editing data attributes.

Data attributes are a combination of element attributes and their values ​​that belong to them, and actions that occur when they change, and are divided into simple attributes and complex attributes.

Simple attributes

A simple attribute is an attribute that is applied directly to the element on which it is used, and the change of value is reflected only within that element. An example may be a price item in a block - a simple data attribute would then take the form of mkt-data-field="inner" mkt-label-inner="New Prize". In this case, the mkt-data-field tells you what type of attribute it is, ie. that this is an attribute inner. Changing the value will only change the inner content (innerHTML) of this element. The mkt-label-inner attribute then defines how the label should be named in the dialog box.

Supported attribute types are inner (for innerHTML), alt, title, src, href, etc. The campaign editor also detects duplicate fields to have the same content using the value specified in the mkt-label attribute. In the example above, if there were multiple images with the mkt-label-alt attribute named "New Prize" in the dataset, the form would only appear once in the form. In addition you can also specify the attribute to have a textarea input where required by using mkt-input-type="textarea".

Complex attributes

The second type of data attributes are complex attributes, which are used where it is necessary to apply to multiple elements and their attributes, which should contain the same value. An example may be the already referenced product reference or product name, which is used not only as a text title but can also serve as a description of the image. Let's look at the following example:

In this case, the value of the mkt-data-field attribute is in the form of a#product-name1 inner; a title; img alt, which means that whenever the value with the product name is updated, it will be written to the element a with id product-name1, all a elements and their attribute title and all img elements on their alt attribute. To specify the selector, you can combine them with a space, "#" for the id element and "." For the class. The default value in the form is read from the value of the first selector.

For complex attributes, the tag is always set by mkt-label-title. Please also note that the following policies must be observed:

1. The non-target element should use a unique ID to accurately target. In the above example, id="product-name1"
2. Nested datasets are not allowed

Example of the entire dataset

Here is a practical example of using a combination of simple and complex attributes:

Definition of data sources

Even though Content Styles and content blocks are designed to build static content campaigns, they can very effectively use data sources to simplify content preparation. Typical examples are product newsletters that can be efficiently retrieved from a data source, such as the Heureka product feed or Zbozi.cz, and the dataset to pre-populate data from that source. In order for the system to know which of the data sources should be used in the dataset, it must be determined using the mkt-datasource="resource name" attribute. The data source to be used for datasets must be assigned to the template in the Template Information section, click the Edit button, and then select the data source.

The most important field when using data sources is a search field that is defined by mkt-searchable="true". The search box is an array where the system automatically completes the corresponding records from the data source when filling out. The data from the selected record is then assigned to the elements in the dataset using the mkt-field-name="field name", where the field name must match the field name in the data source. Let's take a sample look at using a product data source with productname, price, imgurl, price_vat, and url.

In order to define attributes and binding to fields, we will need the following dataset:

As we can see, field bonds must be defined in the same place where the mkt-data-field is defined, and the mkt-field-name only serves to determine the binding to the field in the data source. The same applies to the location of mkt-datasource and mkt-searchable.

Data formatting and styling

When working with data from a data source in a dataset, it is often useful for different values to be formatted. For example, you might see a price listed in the data source as 1234, but we'd like to see it in the form of $ 1,234.00. This can be done by typing and formatting the fields, which we create by inserting a special comment inside a content block that will allow the system to get more information about the types of fields. An example of such a definition: