Diese Seite befindet sich in Überarbeitung - Bei Fragen kontaktieren Sie bitte Ihren WEBSALE-Ansprechpartner

Grundsätzlich gibt es 2 Möglichkeiten beliebige Inhalte aus einem externen Content-Management-System (CMS) automatisiert in einen WEBSALE Shop zu integrieren:

a) mittels JSON-Schnittstelle (empfohlen):

Das CMS stellt die Inhalte mithilfe von JSON-Dateien auf dem Shop-Server zur Verfügung. Diese werden mittels der JSON-Schnittstelle von dort geladen und über die EJD-Tags im Shop angezeigt. Diese Vorgehensweise ermöglicht eine optimale Performance, kombinierte Nutzung von Shop-Funktionen, strukturierte URL-Hierarchie und eine höhere Sichtbarkeit durch SEO-Optimierung. Falls das CMS nicht erreichbar ist, hat das keine Auswirkung auf die Anzeige im Shop.
Einziger Nachteil bei dieser Methode ist, dass aktuell keine interaktiven Funktionen oder Plugins wie Kommentarfunktionen, Likes etc. realisiert werden können. Die JSON-Schnittstelle unterstützt lediglich statische Inhalte.

b) mittels ExternInclude-Technologie:

In Echtzeit werden die Inhalte direkt vom CMS abgefragt und im Shop angezeigt. Die Verwendung aktiver Plugins im CMS, wie etwa Kommentarfunktionen, Teilen-Funktionen und Bewertungen, wird nahtlos ermöglicht. Jedoch müssen Anpassungen am CMS vorgenommen werden, um Inhalte so zu liefern, dass sie inkludiert werden können. Dies bedeutet, dass beispielsweise der Header und Footer nicht übergeben werden dürfen, weil diese Bereiche vom Shop geliefert werden.
Da die erfolgreiche Anzeige der CMS-Inhalte im Shop abhängig von der ständigen Erreichbarkeit des CMS ist, raten wir von dieser Vorgehensweise ab. Insbesondere im Hinblick auf die Performance ist diese Art der Integration nicht mehr zeitgemäß.

Die Integrationsanleitung über ExternInclude finden Sie in diesem Wegweiser:
Wegweiser: Externe Includes verwenden

 

 

Integration mittels JSON-Schnittstelle

Über die JSON-Schnittstelle kann ein externes Content-Management-System (CMS) mit dem WEBSALE-Shop verknüpft werden. Damit können Inhalte aus dem CMS an beliebigen Stellen im Shop ausgegeben werden.

Welches CMS kann eingesetzt werden?
Grundsätzlich kann jedes CMS eingesetzt werden, das die Daten im JSON-Format exportieren kann.

 

Funktionsweise

Beliebiger Content wird im CMS hinterlegt. Das CMS exportiert die Daten im JSON-Format und legt diese auf dem FTP-Server des Shops ab (FTP-Verzeichnis der JSON-Schnittstelle). Mittels der EJD-Tags können die JSON-Daten in ein Shop-Template eingelesen und beliebig weiterverarbeitet werden.

Wegweiser: JSON-Schnittstelle

Zusätzlich muss eine Mapping-Datei im JSON-Format exportiert werden, damit der Zusammenhang zwischen der aufgerufenen URL und dem Content aus dem CMS gezogen werden kann. Eine Best-Practice-Empfehlung wäre, dass es eine Mapping-Datei gibt und für jede Seite aus dem CMS eine separate JSON-Datei.

Die URLs der CMS-Inhalte werden im CMS selbst definiert, wobei jedes URL-Segment ein Verzeichnis beinhaltet, beispielsweise /cms/. Dieses Verzeichnis spielt eine zentrale Rolle bei der Implementierung der URL-Regeln auf dem Shop-Server – es wird als Identifier verwendet.

Die URL-Serverregel erkennt URLs, die mit dem definierten Verzeichnis beginnen, in unserem Fall /cms/. Sobald eine solche URL erkannt wird, wird der Aufruf zum CMS-Shoptemplate, beispielsweise tpl_cms.htm, weitergeleitet. Zusätzlich wird bei dieser Weiterleitung ein One-Time-Parameter (OTP) angehängt und übergeben. Dieser Parameter spielt eine entscheidende Rolle, da er dem Frontend-Entwickler das dynamische Laden der CMS-JSON-Dateien basierend auf der aufgerufenen URL ermöglicht.

Die Namen des Verzeichnisses und des URL-Parameters können frei gewählt werden.

 

Integration

Schritt 1: Freischaltung und separater FTP-Zugang

Setzen Sie sich bitte mit Ihrem WEBSALE-Ansprechpartner in Verbindung und lassen Sie die JSON-Schnittstelle für Ihren Shop freischalten. Sie erhalten dann einen separaten FTP-Zugang (Server, Benutzername und Passwort) für das Hochladen der externen JSON-Dateien aus dem CMS. Auch das URL-Mapping muss von der WEBSALE-Systemadministration freigeschaltet werden, bevor der Content geladen werden kann.

Außerdem sind Einstellungen für die folgenden Punkte nötig. WEBSALE hat hierfür Standardwerte definiert. Falls von Ihrer Seite aus Änderungen nötig sind, teilen Sie uns diese bitte bei der Einrichtung mit.

▪CMS-Shoptemplate (tpl_cms.htm)

Für die Anzeige aller CMS-Inhalte wird das Shop-Template tpl_cms.htm als CMS-HTML-Template definiert.

Möchten Sie weitere Templates definieren oder ein anderes Template verwenden, teilen Sie uns dies bitte für die Einrichtung mit.

▪Verzeichnis für CMS-URL

Die URL für die CMS-Seiten erhält im Standard das Verzeichnis /cms/.

Möchten Sie weitere Verzeichnisse nutzen oder einen anderen Verzeichnisnamen, teilen Sie uns dies bitte für die Einrichtung mit.

▪One-Time-Parameter

Um die JSON-Inhalte aus dem CMS dynamisch auf das CMS_HTML-Template tpl_cms.htm einzufügen, wird der One-Time-Parameter OTP1 verwendet.
Sollte dieser bereits auf Ihren Templates verwendet werden, teilen Sie uns bitte einen alternativen One-Time-Parameter für die Einrichtung mit.

Schritt 2: Exportieren der Inhalte aus dem CMS

Exportieren Sie die gewünschten Inhalte aus dem CMS im JSON-Format und laden diese JSON-Dateien (z. B. tpl_imprint.json, tpl_privacy.json) ins FTP-Verzeichnis der JSON-Schnittstelle hoch. Für jede Inhaltsseite wird eine separate JSON-Datei benötigt.

Beispiel einer JSON-Datei für das Impressum (tpl_imprint.json):

...
{
   "id": 1,
   "attributes": {
      "wsContentHeadline": "Impressum",
      "wsTemplateName": "tpl_imprint",
      "Testmodus": false,
      "createdAt": "2023-07-14T13:49:26.959Z",
      "updatedAt": "2023-08-11T10:00:20.393Z",
      "publishedAt": "2023-08-11T10:00:20.387Z",
      "locale": "de",
      "wsMetaInformation": {
         "id": 1,
         "wsMetaTitle": "Impressum des Demoshops",
         "wsMetaDescription": "Hier stehen weitere Informationen zum Impressum",
         "wsPageSeoURL": "cms/Impressum",
         "wsMetaRobots": "noindex,nofollow"
      },
      "wsContent": [
         {
            "id": 1,
            "__component": "elemente.ws-column",
            "wsContentColumn": [
               {
                  "id": 1,
                  "wsContentColumnMarkup": "<p>Lorem ipsum dolor.</p><figure class=\"table\"><table>...</table></figure>",
                  "wsClassList": "col-12"
               }
            ]
         }
      ],
      "localizations": {
         "data": []
      }
   },
   "content_type": "contentpage"
}
...

 

Schritt 3: Exportieren einer Mapping-Datei aus dem CMS

Exportieren Sie ebenso die Mapping-Datei um den URLs aus dem CMS jeweils die entsprechende JSON-Datei zuzuordnen.

Beispiel einer Mapping-Datei (index-mapping.json):

{
   "mappings": [
      {
         "url": "cms/Impressum",
         "file": "tpl_imprint.json"
      },
      {
         "url": "cms/Datenschutz",
         "file": "tpl_privacy.json"
      }
      ...
      ...
   ]
}

 

Schritt 4: CMS-HTML-Template erstellen (Beispiel: tpl_cms.htm)

Erstellen Sie ein neues HTML-Template im Verzeichnis "benutzer/templates/translation". Auf diesem Template werden die gelieferten JSON-Inhalte mit Hilfe der EJD-Tags integriert.

Ein Template kann für die Darstellung aller Inhalte verwendet werden, da die Steuerung der Inhalte über den URL-Parameter (in diesem Beispiel otp1) und die Mapping-Datei erfolgt. Beim Aufruf der URL <SHOP-URL>/cms/Impressum wird wegen des Verzeichnisses (cms) im Hintergrund die URL <SHOP-URL>/?websale8=<SHOP-ID>&tpl=tpl_cms.htm?otp1=cms/Impressum erzeugt. Die sichtbare URL im Browser bleibt dabei unverändert. Der Aufruf im Hintergrund lädt das CMS-HTML-Template (tpl_cms.htm) und übergibt die ursprüngliche URL im Parameter (otp1).

Mit den EJD-Tags wird die Mapping-Datei geladen und darin der Wert der gerade aufgerufenen URL gesucht (in diesem Beispiel cms/impressum).

Fügen Sie folgenden Code in das neue CMS-HTML-Template ein:

~EJD-LoadData(global,index-mapping.json,wsMapping)~
{EJD-DataOK(wsMapping)}
   ~EJD-SetUseID(wsMapping)~
   ~EJD-DA-TouchArrayElements(mappings)~
   ~DC-ZeroLoop1_set($EJD-LastValueAccessed$)~
   ~DC-Counter1_reset~
   {DC-ZeroLoop1}
      {@DC-ZeroLoop1}
         ~EJD-DA-TouchValue(mappings[$DC-ZeroLoop1_position$].url)~       <!-- "Berührt" den Wert des Elements "url" -->
         {DC-CompareStringInList($EJD-LastValueAccessed$,$WS-OTP1$)}      <!-- Vergleicht den Wert des Elements "url" mit dem OTP1-Parameter -->
            ~EJD-DA-TouchValue(mappings[$DC-ZeroLoop1_position$].file)~   <!-- "Berührt" den Wert des Elements "file" -->
            ~DC-FPjsonData_set($EJD-LastValueAccessed$)~                  <!-- dieser Wert wird in den freien Parameter "DC-FPjsonData" gesetzt -->
         {/DC-CompareStringInList($EJD-LastValueAccessed$,$WS-OTP1$)}
      {/@DC-ZeroLoop1}
   {/DC-ZeroLoop1}
{/EJD-DataOK(wsMapping)}

Referenz: EJD-Tags für die JSON-Schnittstelle

Wird der Wert ("cms/Impressum") darin gefunden, wird die dazugehörige JSON-Datei geladen. Der Parameter DC-FPjsonData ist in diesem Beispiel tpl_imprint.json.

Gekürztes Beispiel der tpl_imprint.json (siehe Schritt 2):

{
   "id": 1,
   "attributes": {
      ...
      "wsMetaInformation": {
         "id": 1,
         "wsMetaTitle": "Impressum des Demoshops",
         "wsMetaDescription": "Hier stehen weitere Informationen zum Impressum",
         "wsPageSeoURL": "cms/Impressum",
         "wsMetaRobots": "noindex,nofollow"
      },
      ...
   },
   ...
}

Ergänzen Sie das Template mit der Klammerung {DC-FPjsonData} um zu prüfen, ob Daten vorhanden sind. Mithilfe der EJD-Tags können Sie nun die JSON-Daten auslesen und für die Ausgabe im Shop aufbereiten.

Beispiel: Hier werden SEO-Daten im Template gesetzt (aus attributes.wsMetaInformation):

{DC-FPjsonData}
   ~EJD-LoadData(subshop,$DC-FPjsonData$,wsCMS)~                      <!-- Laden der JSON-Datei "tpl_imprint.json" -->
   ~EJD-SetUseID(wsCMS)~
 
   ~DC-FPjsonMeta_set(attributes.wsMetaInformation)~
 
   {!EJD-DA-IsNull($DC-FPjsonMeta$.wsMetaTitle)}
      <title>~EJD-DA-Value($DC-FPjsonMeta$.wsMetaTitle)~</title><br>
   {/!EJD-DA-IsNull($DC-FPjsonMeta$.wsMetaTitle)}
 
   {!EJD-DA-IsNull($DC-FPjsonMeta$.wsMetaDescription)}
      <meta name="description" content="~EJD-DA-Value($DC-FPjsonMeta$.wsMetaDescription)~"><br>
   {/!EJD-DA-IsNull($DC-FPjsonMeta$.wsMetaDescription)}
 
   {!EJD-DA-IsNull($DC-FPjsonMeta$.wsMetaRobots)}
      <meta name="robots" content="~EJD-DA-Value($DC-FPjsonMeta$.wsMetaRobots)~">
   {/!EJD-DA-IsNull($DC-FPjsonMeta$.wsMetaRobots)}
 
   ...
{/DC-FPjsonData}

Quellcode-Ausgabe:

<title>Impressum des Demoshops</title><br>
<meta name="description" content="Hier stehen weitere Informationen zum Impressum"><br>
<meta name="robots" content="noindex,nofollow">

Referenz: EJD-Tags für die JSON-Schnittstelle

Haben Sie alle Schritte durchgeführt, ist das CMS erfolgreich mittels JSON-Schnittstelle in Ihrem Shop integriert.