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.
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.
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
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.
The use of the template engine has the following restrictions:
<h1 class="$IllegaleVariable$">Hello World</h1>
If you want to use variables within an HTML tag, use inline variables (see below).
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
<!--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
<!--end-inline--> is not rendered.
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 are supported since version 1.3.6. A
% character is placed before the variable name.
<!--start-inline--> <h1> @%variable@ </h1> <!--end-inline-->
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-->
When you create a description, the following predefined variables are available to you.
|$dewabit_image_1$ to $dewabit_image_12$ (Deprecated, not recommended)||@dewabit_image_1@ to @dewabit_image_12@ (Inline, new)|
$dewabit_item_specific_1$ bis $dewabit_item_specific_32$
@dewabit_item_specific_1@ bis @dewabit_item_specific_32@
$dewabit_item_specific_1_N$ to $dewabit_item_specific_32_N$
@dewabit_item_specific_1_N@ to @dewabit_item_specific_32_N@
$dewabit_item_specific_1_V$ to $dewabit_item_specific_32_V$
@dewabit_item_specific_1_V@ to @dewabit_item_specific_32_V@
Frequently used texts can be saved as text blocks when using the template engine. These text blocks can then be loaded into the defined variables. If there are text blocks that have the same name as the variable, they are loaded directly into the text fields.
If we want to create, edit or delete text blocks, we can do this under Administration ⇒ Templates. In the upper area we switch to the tab “Text blocks”. We have the following view:
By double-clicking on a variable we can edit it directly.
As already mentioned, blocks with the same name as the variable are loaded directly. If we want to load a new text block, we click on the button with the magnifying glass to the right of our text field. The following view opens:
We can select our desired text block here and then click OK to load the contents of the block into our template.