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 one of our professional template that can be purchased in the members area.

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="$IllegalVariable$">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

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$.

All item specifics as table

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>

Vehicle compatibility 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;
}