PEIQ Knowledge Base
Online-Vorschau in CREATE
In PEIQ CREATE steht eine Online-Vorschau zur Verfügung. Diese ermöglicht eine Vorschau auf einen für einen Online-Kanal vorgesehenen Artikel, welcher zu einem späteren Zeitpunkt aus CREATE heraus veröffentlicht wird.
Die Gestaltung der Vorschau in Anlehnung an das Online-Portal übernimmt der Kunde bzw. die Kundin eigenverantwortlich mittels ihm/ihr zur Verfügung gestellter HTML-Templates und CSS (= Cascading Style Sheets).
Funktionalitäten der Online-Vorschau in PEIQ CREATE
Online-Vorschau der für Online-Kanäle vorgesehenen Artikelinhalte in CREATE
Kund:innenspezifische Gestaltung der Vorschau durch HTML-Templates und CSS-Stylesheets
Vergrößerung, Auto-Aktualisierung oder Neuladen der Online-Vorschau pro Online-Kanal
Inhaltsverzeichnis
Allgemeine Beschreibung
Um sich den Artikelinhalt in CREATE analog zur Gestaltung in einem typischen Online-Template vorab anzeigen zu lassen, können Benutzer:innen in CREATE bei allen Online-Templates ganz schnell und einfach eine Online-Vorschau in der Kanalsteuerung erzeugen. Für die Anzeige werden HTML-Templates und CSS-Stylesheets verwendet, die durch die Kund:innen selbst individuell angepasst werden können. Dazu werden die Templates und Stylesheets für die Kund:innen zugänglich gemacht.
Seitens PEIQ ist hierfür auf Anfrage ein kund:innenindividueller SFTP-Zugang einzurichten.
Der Aufruf für die Online-Vorschau ist in der vertikalen Werkzeugleiste des Editors integriert:
In der Online-Vorschau können abhängig vom Ausprägungs-Typ (z.B. Eilmeldung, Story usw.) beliebig viele Online-Vorschau-Templates hinterlegt werden, welche unabhängig von den Kanälen (Onlineportalen) sind.
Funktionen der Online-Vorschau
Auto-Aktualisierung
Damit sich die Online-Vorschau bei Änderungen im Editor automatisch aktualisiert, kann ein entsprechender Toggle aktiviert werden. Standardmäßig ist dieser, wie rechts dargestellt, deaktiviert.
Neu laden
Über den Reload- bzw. Aktualisieren-Button kann die Online-Vorschau neu- bzw. nachgeladen werden - sofern dies nicht auf “Auto-Aktualisierung” eingestellt ist.
Größere Vorschau anzeigen
Über den Button “Größere Vorschau anzeigen” (Vergrößerungsicon) kann die Vorschau im Dialog in voller Seitenbreite und somit in einer vergrößerten Ansicht geöffnet werden.
Vorschau für Online-Kanäle umschalten
Sofern eine Artikel-Ausprägung mehrere Online-Kanäle besitzt, können bei der Online-Vorschau sowohl in der Kanalsteuerung, als auch in der Zoom-Ansicht verschiedene Vorschau-Varianten per Dropdown ausgewählt und die Preview entsprechend für das jeweilige Portal angezeigt werden.
Parametrisierung durch Kund:innen
Die Basis für kund:innenspezifische Anpassungen der Online-Vorschau durch den Kunden bzw. die Kundin ist der CREATE-Standard-Kanal “Online”.
Die relevanten Files, die kund:innenspezifisch parametrisiert werden müssen, befinden sich in den Verzeichnissen …/tpl und …/data auf dem Webserver.
tpl: Dieses Verzeichnis enthält alle Komponenten zur Darstellung der Vorschau-Varianten
data: In diesem Verzeichnis liegen die Standard-Article.json, die für das lokale Testing angepasst und im Browser auch ohne den Einsatz von CREATE aufgerufen werden können, siehe unten https://peiq.atlassian.net/wiki/spaces/PPSD/pages/1130168321/Online-Vorschau+in+CREATE#Testing-im-lokalen-Browser-(ohne-CREATE)
Webserver
Testing im lokalen Browser (ohne CREATE)
Um ein neues kund:innenspezifisches Template anzulegen, sollte ein vorhandenes Template (zu finden im \create_onlinepreivew\tpl) kopiert und anschließend lokal angepasst werden.
Für ein Vorab-Testing der kund:innenspezifischen Anpassungen kann ein entsprechend parametrisierter Artikel auch ohne CREATE-Anbindung lokal im Browser aufgerufen werden. Dazu muss der gesamte Ordner create_onlinepreview auf einem Kund:innen-Webserver abgelegt werden und dort die Anpassungen vorgenommen werden. Die Vorschau kann anschließend im Browser unter folgender URL aufgerufen werden:
https://[KUND:INNEN-DOMAIN]/create_onlinepreview/
Unter der URL https://[KUND:INNEN-DOMAIN]/create_onlinepreview/ wird das Standard-Online-Template von CREATE mit einem Standard-Artikel aufgerufen.
Das article.json liegt im Ordner \create_onlinepreivew\data ab und kann kund:innenspezifisch angepasst werden.
Soll eine andere Template-Variante verwendet werden, kann diese in der URL mit dem Zusatz /?v=[VARIANTENNAME] aufgerufen werden. Zum Beispiel:
→ https://[KUND:INNEN-DOMAIN]/create_onlinepreview/?v=Serienfuchs
Wenn ein anderer Artikel (JSON) in der Preview im Browser angezeigt werden soll, kann dieser mit dem Zusatz /a=[ARTIKELNAME] aufgerufen werden. Zum Beispiel:
→ https://[KUND:INNEN-DOMAIN]/create_onlinepreview/?a=article_gal
Auch eine Kombination ist möglich. Zum Beispiel:
→ https://[KUND:INNEN-DOMAIN]/create_onlinepreview/?v=Serienfuchs&a=article_gal
Zentrale Konfigurationsdateien
…\create_onlinepreview\tpl\Online\main.handlebars
…\create_onlinepreview\tpl\Online\loadTemplateComponents.js
…\create_onlinepreview\tpl\Online\component.js
Standard-Elemente (Blöcke)
Die im Online-Template verwendeten Partials, die im loadTemplateComponents.js definiert sind, werden nachfolgend aufgelistet und erläutert:
…\create_onlinepreview\tpl\Online\contentElement.handlebars
…\create_onlinepreview\tpl\Online\subArticleElem.handlebars
…\create_onlinepreview\tpl\Online\embedElem.handlebars
…\create_onlinepreview\tpl\Online\imageElem.handlebars
…\create_onlinepreview\tpl\Online\galleryElem.handlebars
…\create_onlinepreview\tpl\Online\textElem.handlebars
CSS-Files
Für jede Vorschau-Variante können eigene CSS-File angelegt und in das entsprechende Verzeichnis auf dem Webserver gelegt werden.
CSS-Files müssen immer in der main.handlebars eingetragen werden.
Kund:innenspezifische Schriften (fonts)
Sollen für die Vorschau eigene Schriften (fonts) verwendet werden, muss im CSS-File angegeben werden, woher diese geladen werden sollen.
Hochladen der Änderungen nach CREATE (Testsystem)
Damit die durch den Kunden bzw. die Kundin vorgenommenen Änderungen am Vorschau-Template nach CREATE gelangen, müssen neue/geänderte Ordner bzw. Dateien kund:innenseitig auf dem SFTP-Server in ein entsprechendes Verzeichnis gelegt werden. Von dort werden diese alle 2 Minuten auf den Webserver des CREATE-Testsystems kopiert.
Das Skript kopiert nur neuere oder bis dato nicht vorhandene Dateien auf den Webserver. Standardmäßig werden nur Dateien mit folgenden Dateiendungen kopiert:
.css|.js|.json|.handlebars|.woff|.woff2|.jpg|.jpeg|.png|.svg|.gifSFTP-Server
Das Quell-Verzeichnis auf dem sftp-Server (TEST /create_preview), in das Kund:innen ihre Files ablegen müssen, ist unter folgendem Pfad erreichbar:
Alle erlaubten Datei-Typen, die dort abgelegt werden, werden alle 2 Minuten auf den CREATE Test-Webserver kopiert und sind im Anschluss in der Online-Vorschau des CREATE-Testsystems verfügbar.
Dateien und Ordner, die im Quellverzeichnis nicht mehr vorhanden sind, werden gelöscht.
Produktivnahme
Der Go-live der Änderungen in das Produktivsystem erfolgt anschließend im regulären Deployment-Prozess am nächsten Release-Tag.
Damit die von den Kund:innen angepassten Templates in das Produktivsystem übernommen werden, ist der PEIQ Service Desk mit einer entsprechenden Vorlaufzeit (spätestens 1 Woche vor Release in das Produktionssystem) zu informieren.
Parametrisierung durch PEIQ
Damit die o.g. kund:innenspezifische Onlinepreview-Varianten in CREATE aufgerufen werden können, ist durch PEIQ die Abbildung Create_OnlinePreviewVarianten anzupassen.
Verwandte Seiten
Nur für PEIQ-Mitarbeiter:
https://peiq.atlassian.net/wiki/spaces/CORE/pages/1107623978