eCS Formate - Elemente Cheat-Sheet

In diesem Artikel finden Sie eine Auswahl von eCommerce Suite Standard-Formaten als Elementschreibweise.

Einleitung

Viele Formate lassen sich bei der Verwendung in der sogenannten Elementschreibweise nutzen. Formate sind dynamische Ausgabe-Templates die in der Programmiersprache PHP erstellt werden und auf einer Seite letztendlich HTML erzeugen. Zum grundsätzlichen Verständnis was Formate sind, empfehlen wir zuerst den Artikel Formate - die Grundlagen zu lesen.

Grundlegendes zur Elementschreibweise finden Sie unter Formate als Elementschreibweise.

Wo kann ich das verwenden?

 Die Elementschreibweise können Sie in vielen Einsatzgebieten - vornehmlich Fließtexten - verwenden. Nachfolgend ein paar Bereiche, die gut für die Elementschreibweise geeignet sind:

  • Layoute
  • innerhalb von Formaten selbst
  • Textbausteinen
  • direkte Inhalte als Platzhalterkonfiguration
  • redaktionelle Artikel, wie z.B. in der Produktbeschreibung eines Produktes
Tipp:
Innerhalb von Fließtexten in redaktionellen Artikel stehen Ihnen an vielen Stellen verbesserte Eingabemöglichkeiten über die Oberfläche zur Verfügung, so dass Sie die Elementschreibweise hierbei nicht zwangsläufig verwenden müssen.
Grundlegende eCMS Formate in Elementschreibweise finden Sie auch in unserem Handbuch unter eCMS Formate - Elemente Cheat-Sheet.

Cheat Sheet

Bei den nun folgenden Beispielen werden Variablen zur Verdeutlichung immer in __ gesetzt, also __Variable__ . Beim Einsetzen der Variable ist auf die __ zu verzichten.

Links auf eine Produktdetailseite

Um auf eine Produktdetailseite zu verlinken können Sie die Formate eCMS-CONTENT-LINK / eCMS-CONTENT-LINK-URL verwenden.

${eCMS-CONTENT-LINK}$

Syntax:

  1. ${eCMS-CONTENT-LINK:__PCode-des-Produktes__(contenttype=ecs_product|name=zu meinem Produkt)}$

Beispiel:

  1.  
  2. <!-- Ein Link zu Ihrem Produkt mit dem PCode T1203300 -->
  3. ${eCMS-CONTENT-LINK:T1203300(contenttype=ecs_product|name=zu meinem Produkt)}$
  4.  
  5. <!-- der Parameter "name" kann auch weggelassen werden, dann wird der Name des Produktes als Linktext zurückgeliefert -->
  6. ${eCMS-CONTENT-LINK:T1203300(contenttype=ecs_product)}$

${eCMS--CONTENT-LINK-URL}$

Das Format gibt es auch als URL liefernde Variante - eCMS-CONTENT-LINK-URL.

Syntax:

  1. <a href="${eCMS-CONTENT-LINK-URL:__PCode-des-Produktes__(contenttype=ecs_product)}$">zu meinem Produkt</a>

Beispiel:

  1. <a href="${eCMS-CONTENT-LINK-URL:T1203300(contenttype=ecs_product)}$">zu meinem Produkt</a>

Links auf eine Produktkategorieseite

Die Formate eCMS-CATEGORY-LINK / eCMS-CATEGORY-LINK-URL liefern einen Link auf eine Produktkategorieseite.

${eCMS-CATEGORY-LINK}$

Syntax:

  1. ${eCMS-CATEGORY-LINK:__Kategorie-Code__(name=zu meiner Kategorie)}$

Beispiel:

  1.  
  2. ${eCMS-CATEGORY-LINK:shop_haengeleuchten(name=Unsere Hängeleuchten)}$
  3.  
  4. <!-- der Parameter "name" kann auch weggelassen werden, dann wird der Titel der Kategorie als Linktext zurückgeliefert -->
  5. ${eCMS-CATEGORY-LINK:shop_haengeleuchten}$

${eCMS-CATEGORY-LINK-URL}$

Das Format gibt es auch als URL liefernde Variante - eCMS-CATEGORY-LINK-URL.

Syntax:

  1. <a href="${eCMS-CATEGORY-LINK-URL:__Kategorie-Code__}$">zu meiner Kategorie</a>

Beispiel:

  1. <a href="${eCMS-CATEGORY-LINK-URL:shop_haengeleuchten)}$">Unsere Hängeleuchten</a>

Produktbild ausgeben

Mit dem Format eCS-PRODUCT-IMAGE lässt sich ein Bild zu einem Produkt ausgeben.

${eCS-PRODUCT-IMAGE}$

Syntax:

  1. ${eCS-PRODUCT-IMAGE:__PCode-des-Produktes__(x=__max. Ausgabebreite-des-Bildes__|y=__max. Ausgabehöhe-des-Bildes__)}$

Beispiele:

  1.  
  2. <!-- das erste Bild des Produktes T1203300 wird 200px breit ausgegeben -->
  3. ${eCS-PRODUCT-IMAGE:T1203300(x=200)}$
  4.  
  5. <!-- das erste Bild des Produktes T1203300 wird max. 200px breit und max. 100px hoch (dabei wird das Seitenverhältnis beachtet) ausgegeben -->
  6. ${eCS-PRODUCT-IMAGE:T1203300(x=200|y=100)}$
  7.  
  8. <!-- das dritte hinterlegte Bild des Produktes T1203300 soll ausgegeben werden. Der Parameter "col" definiert dabei die Spalte des Bildes beginnend ab Position 0. Wird die Breite und Höhe des Bildes nicht mitgegeben greifen die Defaulteinstellungen des Formates (x=150 und y=150). -->
  9. ${eCS-PRODUCT-IMAGE:T1203300(col=2)}$
  10.  
  11. <!-- Ausgabe des dritten Bildes vom Produkt T1203300 soll in Originalgröße ausgegeben werden. Dafür wird der Parameter "skip_default_dimension" benötigt. -->
  12. ${eCS-PRODUCT-IMAGE:T1203300(col=2|skip_default_dimension=1)}$

Das Format lässt es auch zu, nur die URL des Bildes zurückzuliefern. Dies geschieht durch den Parameter "url_only=1".

Syntax:

  1. <img src="${eCS-PRODUCT-IMAGE:__PCode-des-Produktes__(url_only=1|x=__max. Ausgabebreite-des-Bildes__|y=__max. Ausgabehöhe-des-Bildes__)}$" />

Beispiele:

  1. <!-- das erste Bild des Produktes T1203300 wird über die URL-Angabe 200px breit ausgegeben -->
  2. <img src="${eCS-PRODUCT-IMAGE:T1203300(x=200|url_only=1)}$" />

Produktbild auf Produkt verlinken

Die Verlinkung eines Produktbildes auf das entsprechende Produkt kann auf zwei Wegen in Elementschreibweise gelöst werden.

${eCS-PRODUCT-IMAGE}$ mit Parameter

Die erste und einfachste Möglichkeit ist das Format eCS-PRODUCT-IMAGE zu verwenden und über den Parameter "enable_product_link" die Verlinkung zu aktivieren.

Syntax:

  1. ${eCS-PRODUCT-IMAGE:__PCode-des-Produktes__(enable_product_link=1|x=__max. Ausgabebreite-des-Bildes__|y=__max. Ausgabehöhe-des-Bildes__)}$

Beispiele:

  1.  
  2. <!-- das erste Bild des Produktes T1203300 wird 200px breit ausgegeben und auf die Produktdetailseite zum Produkt verlinkt -->
  3. ${eCS-PRODUCT-IMAGE:T1203300(x=200|enable_product_link=1)}$

${eCS-PRODUCT-IMAGE}$ mit ${eCMS-CONTENT-LINK-URL}$

Die zweite Möglichkeit ist die Kombination aus eCMS-CONTENT-LINK-URL und eCS-PRODUCT-IMAGE. Da es nicht erlaubt ist mehrere Elementschreibweisen zu schachteln (vgl. Einschränkungen der Elementschreibweise), funktioniert dieser Weg nur wenn Sie direkt HTML nutzen, wie z.B. in Layouten oder Textbausteinen,

Syntax:

  1. <a href="${eCMS-CONTENT-LINK-URL:__PCode-des-Produktes__(contenttype=ecs_product)}$">${eCS-PRODUCT-IMAGE:__PCode-des-Produktes__(x=__max. Ausgabebreite-des-Bildes__|y=__max. Ausgabehöhe-des-Bildes__)}$</a>

Beispiele:

  1. <!-- das erste Bild des Produktes T1203300 wird 200px breit ausgegeben und auf die Produktdetailseite zum Produkt verlinkt -->
  2. <a href="${eCMS-CONTENT-LINK-URL:T1203300(contenttype=ecs_product)}$">${eCS-PRODUCT-IMAGE:T1203300(x=200)}$</a>

Produktname ausgeben

Einen Produktnamen zum Produkt können Sie mit Hilfe des Formates eCS-PRODUCT-NAME ausgeben.

${eCS-PRODUCT-NAME}$

Syntax:

  1. ${eCS-PRODUCT-NAME:__PCode-des-Produktes__}$

Beispiele:

  1.  
  2. <!-- Produktname des Produktes T1203300 wird als <h1>-Überschrift ausgegeben -->
  3. ${eCS-PRODUCT-NAME:T1203300}$
  4.  
  5. <!-- Ausgabe des Produktnamens des Produktes T1203300 ohne Ausgabe in einer <h1>-Überschrift -->
  6. ${eCS-PRODUCT-NAME:T1203300(disable_headline_tag=1)}$

In den Warenkorb - Button

Um einen Button zu erzeugen, der bei Klick ein Produkt in den Warenkorb legt kann das Format eCS-ADD-TO-CART-BUTTON genutzt werden,

${eCS-ADD-TO-CART-BUTTON}$

Syntax:

  1. ${eCS-ADD-TO-CART-BUTTON:__PCode-des-Produktes__}$

Beispiele:

  1.  
  2. <!-- Ein Button, um das Produkt T1203300 in den  -->
  3. ${eCS-ADD-TO-CART-BUTTON:T1203300}$

Datenfeld eines Produktes ausgeben

Wenn ein beliebiges Datenfeld eines Produktes ausgegeben werden soll, kann das Format eCS-PRODUCT-DATAFIELD verwendet werden.

Welche Datenfelder in der Basis für Produkte zur Verfügung stehen können Sie unter Produkt-Datenfelder und Daten-Typ "Produkt-Preis" entnehmen.

${eCS-PRODUCT-DATAFIELD}$

Syntax:

  1. ${eCS-PRODUCT-DATAFIELD:__PCode-des-Produktes__(field=__Label_des_Datenfeldes__)}$

Beispiele:

  1.  
  2. <!-- Beschreibungsfeld des Produktes T1203300  -->
  3. ${eCS-PRODUCT-DATAFIELD:T1203300(field=description)}$
  4.  
  5. <!-- Kurzbeschreibung des Produktes T1203300 -->
  6. ${eCS-PRODUCT-DATAFIELD:T1203300(field=desc_short)}$
  7.  
  8. <!-- Hersteller des Produktes T1203300 -->
  9. ${eCS-PRODUCT-DATAFIELD:T1203300(field=manufacturer)}$

Produktkachel

Um ein paar zusammenhängende Daten eines Produktes auszugeben, kann das Format eCS-PRODUCT-VIEW oder dessen Alternative eCS-PRODUCT-VIEW-SHORT verwendet werden.

${eCS-PRODUCT-VIEW}$

Das Format eCS-PRODUCT-VIEW gibt im Normalfall das erste Produktbild, den Namen, die Beschreibung und der Preis des Produktes sowie einen Link(-Button) zur Produktdetailseite aus. Über Parameter kann das Erscheinungsbild geändert werden (z.B. Ausgabe eines "In den Warenkorb"-Buttons oder die Ausgabe der Kurzbeschreibung, an Stelle der Beschreibung). Der lange Beschreibungstext wird auf eine maximale Zeichenlänge (Default: 150) verkürzt dargestellt.

Syntax:

  1. ${eCS-PRODUCT-VIEW:__PCode-des-Produktes__}$

Beispiele:

  1.  
  2. <!-- Die Produktkachel für das Produkt T1203300  -->
  3. ${eCS-PRODUCT-VIEW:T1203300}$
  4.  
  5. <!-- Ausgabe der Kurzbeschreibung, statt der langen Beschreibung für das Produkt T1203300 -->
  6. ${eCS-PRODUCT-VIEW:T1203300(description_field=desc_short)}$
  7.  
  8. <!-- dynamische Prüfung der Beschreibung: Prüfung auf Kurzbeschreibung. Ist diese nicht vorhanden, Nutzung der langen Beschreibung (verkürzte Ausgabe) -->
  9. ${eCS-PRODUCT-VIEW:T1203300(description_field=dyn_description)}$
  10.  
  11. <!-- Aktivierung  des "In den Warenkorb"-Buttons für die Produktkachel zum Produkt T1203300 -->
  12. ${eCS-PRODUCT-VIEW:T1203300(disable_buy_button=0)}$

${eCS-PRODUCT-VIEW-SHORT}$

Das Format eCS-PRODUCT-VIEW-SHORT ist eine vereinfachte Darstellung einer Produktkachel. Es erlaubt lediglich die Darstellung des ersten Produktbildes, des Produktnamens, der Beschreibung und eines Detaillinks zur Produktdetailseite. Die Ausgabe des Preises und des "In den Warenkorb"-Buttons ist hier nicht vorgesehen. Bei der Beschreibung ist auch die dynamische Beschreibungsauswahl voreingestellt, so dass zuerst nach der Kurzbeschreibung geprüft wird und sollte diese nicht vorhanden sein, die lange Beschreibung verwendet wird. Im Falle der Verwendung der langen Beschreibung wird diese auf eine bestimmte Zeichenlänge (Defaultwert: 150) verkürzt.

Syntax:

  1. ${eCS-PRODUCT-VIEW-SHORT:__PCode-des-Produktes__}$

Beispiele:

  1.  
  2. <!-- Die kurze Ansicht der Produktkachel für das Produkt T1203300  -->
  3. ${eCS-PRODUCT-VIEW-SHORT:T1203300}$
  4.  
  5. <!-- Ausgabe der Kurzbeschreibung, statt der dynamischen Beschreibungsprüfung für das Produkt T1203300 -->
  6. ${eCS-PRODUCT-VIEW-SHORT:T1203300(description_field=desc_short)}$
  7.  
  8. <!-- Deaktivierung des Detaillinks auf die Produktdetailseite -->
  9. ${eCS-PRODUCT-VIEW-SHORT:T1203300(enable_detail_button=0)}$

Preis eines Produktes

Der Preis eines Produktes kann mit dem Format eCS-PRODUCT-PRICE ausgegeben werden.

${eCS-PRODUCT-PRICE}$

Syntax:

  1. ${eCS-PRODUCT-PRICE:__PCode-des-Produktes__}$

Beispiele:

  1.  
  2. <!-- Beschreibungsfeld des Produktes T1203300  -->
  3. ${eCS-PRODUCT-PRICE:T1203300}$