dewabit help pages
Search
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 one of our professional template that can be purchased in the members area.
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 $@description$
.
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="$IllegalVariable$">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 <!--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.
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.
Example:
<!--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.
Default | Inline |
---|---|
$dewabit_image_1$ to $dewabit_image_12$ (Deprecated, not recommended) | @dewabit_image_1@ to @dewabit_image_12@ (Inline, new) |
Default | Inline |
---|---|
$dewabit_item_title$ | @dewabit_item_title@ |
Default | Inline |
---|---|
$dewabit_item_subtitle$ | @dewabit_item_subtitle@ |
Default | Inline |
---|---|
$dewabit_item_price$ | @dewabit_item_price@ |
Standard | Inline |
---|---|
$dewabit_item_currency$ | @dewabit_item_currency@ |
Default | Inline |
---|---|
$dewabit_userid$ | @dewabit_userid@ |
Default | Inline |
---|---|
$dewabit_item_itemid$ | @dewabit_item_itemid@ |
Default | Inline |
---|---|
$dewabit_item_sku$ | @dewabit_item_sku@ |
You can use the value of your item specifics using the following variable:$dewabit_item_specific_name_SPECIFICNAME$
.
For example: You want to display the value of the specific “Publisher”. The correct variable would be
then $dewabit_item_specific_name_Publisher$
.
Using the variable $dewabit_specifics_table$
all item specifics will be displayed in a table.
The generated table looks like this:
<table class="dwb-is">
<tbody class="dwb-is-tbody">
<tr class="dwb-is-tbody-tr">
<td class="dwb-is-tbody-td">Make</td>
<td class="dwb-is-tbody-td">Apple</td>
</tr>
<tr class="dwb-is-tbody-tr">
<td class="dwb-is-tbody-td">Product family</td>
<td class="dwb-is-tbody-td">MacBook Air</td>
</tr>
<tr class="dwb-is-tbody-tr">
<td class="dwb-is-tbody-td">Disk capacity</td>
<td class="dwb-is-tbody-td">256 GB</td>
</tr>
</tbody>
</table>
Using the variable $dewabit_vehicle_table$
you can generate a html table with your compatibility list that looks like
this:
<table class="dwb-ct">
<thead class="dwb-ct-thead">
<tr class="dwb-ct-thead-tr">
<th class="dwb-ct-thead-th">Engine</th>
<th class="dwb-ct-thead-th">Make</th>
<th class="dwb-ct-thead-th">Model</th>
<th class="dwb-ct-thead-th">Platform</th>
<th class="dwb-ct-thead-th">Production period</th>
<th class="dwb-ct-thead-th">Type</th>
</tr>
<thead>
<tbody class="dwb-ct-tbody">
<tr class="dwb-ct-tbody-tr">
<td class="dwb-ct-tbody-td">1984 ccm, 85 KW, 116 PS</td>
<td class="dwb-ct-tbody-td">VW</td>
<td class="dwb-ct-tbody-td">Golf IV</td>
<td class="dwb-ct-tbody-td">1J1</td>
<td class="dwb-ct-tbody-td">2002/05-2003/05</td>
<td class="dwb-ct-tbody-td">2.0 Bi-Fuel</td>
</tr>
<tr class="dwb-ct-tbody-tr">
<td class="dwb-ct-tbody-td">3982 ccm, 232 KW, 316 PS</td>
<td class="dwb-ct-tbody-td">Alpina</td>
<td class="dwb-ct-tbody-td">B11</td>
<td class="dwb-ct-tbody-td">E32</td>
<td class="dwb-ct-tbody-td">1993/05-1994/02</td>
<td class="dwb-ct-tbody-td">4.0</td>
</tr>
</tbody>
</table>
You cannot change the format of the table. However, you can style the table individually by creating your own CSS rules. To draw a simple border, you could use the following CSS:
.dwb-ct, .dwb-ct-thead-th, .dwb-ct-tbody-td {
border: 1px solid black;
}