Template-Engine

Template-Engine

Die Template-Engine ist für komplexere HTML-Vorlagen gedacht, in denen vordefinierte Variablen genutzt werden können.

Ein Template hat in der Regel statische und dynamische Inhalte. Statische Inhalte bleiben bei jedem Angebot gleich, dynamische Inhalte sind von Angebot zu Angebot verschieden. Für die dynamischen Inhalte stehen in dewabit Variablen zur Verfügung. Diese werden im HTML Code festgelegt. Bei der Angebotserstellung wird das gewünschte Template geladen. Es stehen anschließend so viele Textfelder zur Verfügung, wie Variablen im Quellcode festgelegt wurden.

Wird ein Textfeld bearbeitet, so wird auf der rechten Seite die Änderung live ersichtlich. Die nachfolgende Grafik zeigt die Verwendung unser kostengünstigen Premium-Vorlage.

Template erstellen / Aufbau

Möchten Sie ein Template für die Template-Engine erstellen oder ein vorhandenes Template anpassen, dann gehen Sie folgendermaßen vor:

Bestimmen Sie zunächst Ihre dynamischen Inhalte, welche sich von Angebot zu Angebot unterscheiden sollen. Diese Inhalte werden durch Variablen ersetzt. Eine Variable wird durch $-Zeichen eingegrenzt. Möchten Sie eine Variable erstellen, welche den Angebotstitel repräsentiert, dann können Sie diese als $AngebotsTitel$ in Ihrem HTML-Code festlegen.

Ein möglicher Code, der die soeben definierte Variable enthält, könnte so aussehen:

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

Wenn wir diese Variable in die bestehende Demo-Vorlage einpflegen, dann erhalten wir nach dem Laden der Vorlage folgende Ansicht:

Wir sehen, dass wir im linken Bereich ein Textfeld mit gleichem Namen wie die Variable erhalten. Füllen wir das Textfeld, dann wird die Vorschau auf der rechten Seite aktualisiert.

Mehrzeilige Variablen

Wir sehen, dass die von uns eingepflegte Variable ein Textfeld mit einer Zeile bereitstellt. Manchmal kann es sinnvoll sein, mehrere Zeilen zur Verfügung zu haben. Dies könnte bei einer Beschreibung des Artikels der Fall sein. Wir können mehrzeilige Variablen mittels vorangestelltem @ definieren.

Wenn wir uns jetzt eine Variable für die Beschreibung des Artikels erstellen möchten, dann würden wir diese $@Artikelbeschreibung$ nennen.

Ein Template erstellen oder bearbeiten

Möchten wir ein Template erstellen oder bearbeiten, dann wechseln wir im Hauptfenster von dewabit in der Navigationsleiste zum Punkt Verwaltung ⇒ Vorlagen. Wir sehen nun die uns zur Verfügung stehenden Vorlagen. Wenn wir eine Vorlage bearbeiten möchten, dann wählen wir diese in der Liste aus und klicken im unteren Bereich auf den Stift-Button. Möchten wir eine neue Vorlage erstellen, dann klicken wir im unteren Bereich auf den Plus-Button. Es erscheint folgendes Menü:

Wir klicken auf Template-Engine und fügen unseren Code in den geöffneten Editor ein. Rechts sehen wir die Variablen, welche aus dem HTML-Code ausgelesen wurden.

Wenn die erstellte Vorlage fertig ist, dann klicken wir im oberen, rechten Rand auf „Vorlage erstellen“.

Einschränkungen

Die Verwendung der Template-Engine hat folgende Einschränkungen:

• Die Standard-Variablen dürfen nicht innerhalb eines HTML-Tags platziert werden, sie müssen sich immer zwischen zwei Tags befinden. Folgender Codeausschnitt wäre demnach nicht erlaubt:

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

Möchten Sie Variablen innerhalb eines HTML-Tags verwenden, dann verwenden Sie Inline-Variablen (s.u.).

• Variablennamen dürfen das Dollarzeichen $ nur zur Begrenzung der Variable enthalten. Die Variable $test$variable$ wäre unzulässig.
• Variablennamen dürfen das At-Zeichen @ nur nach dem ersten Begrenzungszeichen $ enthalten. Die Variable $test@variable$ wäre unzulässig.
• Variablennamen dürfen nicht mit dewabitbeginnen, da diese Variablennamen reserviert sind. Die Variable $dewabit_angebotstitel$dürfte nicht verwendet werden.

Inline-Variablen

Seit Version 1.2.7 sind Inline-Variablen verfügbar. Inline-Variablen werden folgendermaßen definiert:

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

Möchten wir eine Variable innerhalb eines HTML-Tags verwenden, dann kennzeichnen wir diesen Bereich mit <!--start-inline--> sowie <!--end-inline-->. Der Variablenname wird mit At-Zeichen @ begrenzt. Wird während der Bearbeitung/Erstellung der Beschreibung der Inhalt der Variable leer gelassen, dann wird alles was zwischen <!–start-inline–> und <!–end-inline–> steht nicht gerendert.

Beispiel anhand der Verwendung von Bildern

Die Template-Engine bietet Ihnen die Möglichkeit, Ihre Artikelbilder in Ihrer Vorlage zu verwenden. Wenn Sie Ihr Angebot hochladen, dann werden die Angebotsbilder in die Vorlage geladen.

Möchten wir die Angebotsbilder als Inline-Variablen nutzen, dann könnten wir die ersten drei Bilder folgendermaßen definieren:

<!--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-->

Wenn wir nun zur Angebotserstellung wechseln und unsere Vorlage laden, dann bietet sich uns folgendes Bild:

Mehrzeilige Inline-Variablen

Mehrzeilige Inline-Variablen werden seit Version 1.3.6 unterstützt. Dazu wird vor den Variablennamen ein %-Zeichen gesetzt.

Beispiel:

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

Mobile-Kurzbeschreibung

Für die mobile Kurzbeschreibung hat sich folgender Code bewährt:

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

Vordefinierte Variablen

Bei Angebotserstellung stehen Ihnen folgende, fest definierte Variablen zur Verfügung.

Bilder

Angebotstitel

Untertitel

Preis

Währung

ebay-Account

Artikelnummer

SKU

Artikelmerkmale

Artikelmerkmale werden mit der Variable $dewabit_item_specific_name_MERKMALNAME$ ermöglicht. Beispiel: Sie möchten den Wert des Merkmals “Herausgeber” im Template anzeigen lassen. Dann nutzen Sie die Variable $dewabit_item_specific_name_Herausgeber$. Die Groß-/Kleinschreibung muss beachtet werden.

Alle Artikelmerkmale als Liste

Mit der Variable $dewabit_specifics_table$ wird eine Tabelle mit allen Artikelmerkmalen generiert. Es handelt sich um eine HTML-Tabelle mit folgendem Aufbau:

<table class="dwb-is">
  <tbody class="dwb-is-tbody">
    <tr class="dwb-is-tbody-tr">
      <td class="dwb-is-tbody-td">Marke</td>
      <td class="dwb-is-tbody-td">Apple</td>
    </tr>
    <tr class="dwb-is-tbody-tr">
      <td class="dwb-is-tbody-td">Produktfamilie</td>
      <td class="dwb-is-tbody-td">MacBook Air</td>
    </tr>
    <tr class="dwb-is-tbody-tr">
      <td class="dwb-is-tbody-td">Festplattenkapazität</td>
      <td class="dwb-is-tbody-td">256 GB</td>
    </tr>
  </tbody>
</table>

Fahrzeugverwendungsliste

Mit der Variable $dewabit_vehicle_table$ wird die Fahrzeugverwendungsliste generiert. Es handelt sich um eine HTML-Tabelle mit folgendem Aufbau:

<table class="dwb-ct">
  <thead class="dwb-ct-thead">
    <tr class="dwb-ct-thead-tr">
      <th class="dwb-ct-thead-th">Motor</th>
      <th class="dwb-ct-thead-th">Marke</th>
      <th class="dwb-ct-thead-th">Modell</th>
      <th class="dwb-ct-thead-th">Plattform</th>
      <th class="dwb-ct-thead-th">Baujahr</th>
      <th class="dwb-ct-thead-th">Typ</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>

Der Aufbau der Tabelle lässt sich nicht beeinflussen. Durch die CSS-Klassen ist es aber möglich, die Tabelle individuell zu stylen. Um einen einfachen Rahmen zu zeichnen, könnte der folgende CSS-Code verwendet werden:

.dwb-ct, .dwb-ct-thead-th, .dwb-ct-tbody-td {
  border: 1px solid black;
}