Template-Engine / Textbausteine

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 der bereits vorinstallierten Demo-Vorlage.

Engine1

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:

Engine2

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ü:

Engine3

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.

Engine4

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:

Engine5

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

Standard Inline
$dewabit_image_1$ bis $dewabit_image_12$ (Standard, nicht empfohlen) @dewabit_image_1@ bis @dewabit_image_12@ (Inline, neu)

Angebotstitel

Standard Inline
$dewabit_item_title$ @dewabit_item_title@

Untertitel

Standard Inline
$dewabit_item_subtitle$ @dewabit_item_subtitle@

Preis

Standard Inline
$dewabit_item_price$ @dewabit_item_price@

ebay-Account

Standard Inline
$dewabit_userid$ @dewabit_userid@

Artikelnummer

Standard Inline
$dewabit_item_itemid$ @dewabit_item_itemid@

Artikelmerkmale

Standard Inline
Merkmal-Name: Merkmalwert
$dewabit_item_specific_1$ bis $dewabit_item_specific_32$
Merkmal-Name: Merkmalwert
@dewabit_item_specific_1@ bis @dewabit_item_specific_32@
Merkmal-Name
$dewabit_item_specific_1_N$ bis $dewabit_item_specific_32_N$
Merkmal-Name
@dewabit_item_specific_1_N@ bis @dewabit_item_specific_32_N@
Merkmal-Wert
$dewabit_item_specific_1_V$ bis $dewabit_item_specific_32_V$
Merkmal-Wert
@dewabit_item_specific_1_V@ bis @dewabit_item_specific_32_V@

Textbausteine

Häufig genutzte Texte können bei der Verwendung der Template-Engine als Textbausteine gespeichert werden. Diese Textbausteine können anschließend in die definierten Variablen geladen werden. Existieren Textbausteine, die den gleichen Namen wie die Variable haben, dann werden diese direkt in die Textfelder geladen.

Textbausteine erstellen und bearbeiten

Wenn wir Textbausteine erstellen, bearbeiten oder löschen möchten, dann können wir dies unter dem Punkt Verwaltung ⇒ Vorlagen tun. Im oberen Bereich wechseln wir auf den Reiter „Textbausteine“. Uns bietet sich folgende Ansicht:

Textblocks1

Mit einem Doppelklick auf eine Variable können wir diese direkt bearbeiten.

Textbausteine in die Vorlage laden

Wie bereits erwähnt, werden Bausteine die den gleichen Namen wie die Variable haben, direkt geladen. Möchten wir einen neuen Textbaustein laden, dann klicken wir rechts neben unserem Textfeld auf den Button mit der Lupe. Es öffnet sich folgende Ansicht:

Textblocks2

Wir können uns hier unsere Textbausteine anzeigen lassen und anschließend mit einem Klick auf OK den Inhalt des Bausteins in unsere Vorlage laden.