Rendering von adaptiven Vorlagen

Das Rendering von adaptiven Vorlagen bietet eine Möglichkeit, eine Seite mit Variationen zu verwalten. Ursprünglich sollte diese Funktion verschiedene HTML-Ausgaben für mobile Geräte bereitstellen (z. B. für Feature- und für Smartphones). Sie ist auch dann nützlich, wenn Erlebnisse für verschiedene Geräte bereitgestellt werden sollen, die unterschiedliche Markup- oder HTML-Ausgaben erfordern.

Übersicht

Vorlagen werden im Allgemeinen auf einem responsiven Raster aufgebaut. Seiten, die basierend auf diesen Vorlagen erstellt wurden, sind vollständig responsiv und passen sich automatisch an das Ansichtsfenster des Client-Geräts an. Über die Emulator-Symbolleiste im Seiten-Editor können Autoren Layouts für bestimmte Geräte festlegen.

Sie können auch Vorlagen einrichten, um das adaptive Rendering zu unterstützen. Wenn Gerätegruppen korrekt konfiguriert sind, wird die Seite mit einem anderen Selektor in der URL gerendert, wenn ein Gerät im Emulatormodus ausgewählt wird. Mit einem Selektor lässt sich ein bestimmtes Seiten-Rendering direkt über die URL aufrufen.

Beachten Sie beim Einrichten der Gerätegruppen Folgendes:

  • Jedes Gerät muss zu mindestens einer Gerätegruppe gehören.
  • Ein Gerät kann zu mehreren Gerätegruppen gehören.
  • Da Geräte zu mehreren Gerätegruppen gehören können, können Selektoren auch kombiniert werden.
  • Die Kombination von Selektoren wird von oben nach unten bewertet, da sie im Repository gespeichert werden.
Hinweis

Die Gerätegruppe Responsive Geräte weist nie einen Selektor auf, da davon ausgegangen wird, dass Geräte, die responsive Designs unterstützen, kein adaptives Layout benötigen.

Konfiguration

Selektoren für das adaptive Rendering können Sie für vorhandene Gerätegruppen oder für selbst erstellte Gruppen konfigurieren.

Bei diesem Beispiel konfigurieren wir die vorhandene Gerätegruppe Smartphones so, dass sie einen Selektor für das adaptive Rendering als Teil der Vorlage Erlebnisseite in We.Retail aufweisen.

  1. Edit the device group that requires an adaptive selector in http://localhost:4502/miscadmin#/etc/mobile/groups

    Aktivieren Sie die Option Emulator deaktivieren und speichern Sie diese Einstellung.

    chlimage_1-157

  2. Der Selektor steht für Blackberry und iPhone 4 zur Verfügung, vorausgesetzt, die Gerätegruppe Smartphones wird, wie in den folgenden Schritten erläutert, zur Vorlage und zu den Seitenstrukturen hinzugefügt.

    chlimage_1-158

  3. Lassen Sie über CRXDE Lite zu, dass die Gerätegruppe bei der Vorlage genutzt wird. Fügen Sie dazu diese Gruppe zu der String-Eigenschaft mit mehreren Werten cq:deviceGroups in der Struktur der Vorlage hinzu.

    /conf/<your-site>/settings/wcm/templates/<your-template>/structure/jcr:content

    Beispiel: Die Smartphones-Gerätegruppe soll hinzugefügt werden:

    /conf/we-retail/settings/wcm/templates/experience-page/structure/jcr:content

    chlimage_1-159

  4. Using CRX DE Lite, allow the device group to be used on your site by adding it to the multi-value string property cq:deviceGroups on the structure of your site.

    /content/<your-site>/jcr:content

    Beispiel: Die Gerätegruppe Smartphones soll zugelassen werden:

    /content/we-retail/jcr:content

    chlimage_1-160

Wenn Sie nun den Emulator im Seiten-Editor verwenden (z. B. beim Bearbeiten des Layouts) und ein Gerät der konfigurierten Gerätegruppe auswählen, wird die Seite mit einem Selektor als Teil der URL gerendert.

In our example, when editing a page based on the Experience Page template, and choosing iPhone 4 in the emulator, the page is rendered including the selector as arctic-surfing-in-lofoten.smart.html instead of arctic-surfing-in-lofoten.html

Die Seite lässt sich auch direkt über diesen Selektor auswählen.

chlimage_1-161

Auf dieser Seite