Template-Engine

Template-Engine

The template engine is intended for more complex HTML templates in which predefined variables can be used.

A template usually has static and dynamic contents. Static content remains the same for every item, dynamic content varies from item to item. For the dynamic contents variables are available in dewabit that are defined in the HTML code. The required template is loaded before item creation. There are then as many text fields available as variables have been defined in the source code.

If a text field is edited, the change can be seen live on the right-hand side. The following graphic shows the use of the pre-installed demo template.

Create Template / Structure

If you want to create a template for the template engine or adapt an existing template, proceed as follows:

First determine your dynamic content, which should differ from item to item. These contents are replaced by variables. A variable is delimited by $. If you want to create a variable representing the item title, you can set it as $ItemTitle$ in your HTML code.

A possible code containing the just defined variable could look like this:

<div class="page-header">
  <h1>
     $ItemTitle$
  </h1>
</div>

If we insert this variable into the existing demo template, we get the following view after loading the template:

We see that we get a text field with the same name as the variable in the left area. If we fill the text field and leave it, the preview on the right side will be updated.

Multiline variables

We see that the variable we entered provides a text field with one line. Sometimes it can be useful to have several lines available. This could be the case for a description of the item. We can define multiline variables by prefixing @.

If we now want to create a variable for the description of the item, we would call this $@description$.

Create or edit a template

If we want to create or edit a template, we change in the main window of dewabit in the navigation bar to the item Administration ⇒ Templates. We now see the templates available to us. If we want to edit a template, we select it from the list and click on the pen button in the lower area. If we want to create a new template, click on the plus button in the lower area. The following menu appears:

We click on Template Engine and insert our code into the open editor. On the right we see the variables which were extracted from the HTML code.

When the created template is finished, we click on “Create template” in the upper right window.

Restrictions

The use of the template engine has the following restrictions:

• The default variables must not be placed within a HTML-Tag, they must always be between two tags. The following code snippet would therefore be not allowed:

<h1 class="$IllegaleVariable$">Hello World</h1>

If you want to use variables within an HTML tag, use inline variables (see below).

• Variable names may contain the dollar sign $ only to limit the variable. The variable $test$variable$ would be invalid.
• Variable names may contain the @ at-character only after the first $ delimiter. The variable $test@variable$ would be invalid.
• Variable names must not start with dewabit, since these variable names are reserved. The $dewabit_itemtitle$ may not be used.

Inline-Variables

Since version 1.2.7 inline variables are available. Inline variables are defined as follows:

<!--start-inline-->
<h1 class="@hclass@">Hello World</h1>
<!--end-inline-->

If we want to use a variable within an HTML tag, we will mark this area with <!--start-inline--> and <!--end-inline-->. The variable name is delimited by at characters @. If the content of the variable is left blank during the editing/creating of the description, then everything between <!--start-inline--> and <!--end-inline--> is not rendered.

Example based on the use of images

The template engine offers you the possibility to use your item images in your template. When you upload your item, the images are loaded into the template.

If we want to use the images as inline variables, we could define the first three images as follows:

<!--start-inline-->
<div class="col-md-6">
<img src="@dewabit_image_1@" class="img-responsive img-thumbnail">
</div>
<!--end-inline-->
 
<!--start-inline-->
<div class="col-md-6">
<img src="@dewabit_image_2@" class="img-responsive img-thumbnail">
</div>
<!--end-inline-->
 
<!--start-inline-->
<div class="col-md-6">
<img src="@dewabit_image_3@" class="img-responsive img-thumbnail">
</div>
<!--end-inline-->

If we now switch to the manage item form and load our template, we get the following picture:

Multiline Inline-Variables

Multiline inline variables are supported since version 1.3.6. A % character is placed before the variable name.

Example:

<!--start-inline-->
<h1>
@%variable@
</h1>
<!--end-inline-->

Mobile friendly Item Description

You can use the following code for a mobile frindly short description:

<!--start-inline-->
<div vocab="https://schema.org/" typeof="Product">
<span property="description">
@%mobile-description@
</span>
</div>
<!--end-inline-->

Predefined Variables

When you create a description, the following predefined variables are available to you.

Images

Item title

Subtitle

Price

Currency

ebay-Account

Item-ID

SKU

Item Specifics