Client-Kontext im Detail client-context-in-detail
ClientContext stellt eine dynamisch zusammengestellte Sammlung von Benutzerdaten dar. Mithilfe der Daten können Sie bestimmen, welcher Inhalt auf einer Webseite in einer bestimmten Situation angezeigt werden soll (Content-Targeting). Die Daten stehen auch für Website-Analysen und JavaScript auf der Seite zur Verfügung.
ClientContext umfasst im Wesentlichen die folgenden Aspekte:
- Der Sitzungsspeicher, der die Benutzerdaten enthält.
- Die Benutzeroberfläche, die die Benutzerdaten anzeigt und Tools zur Simulation des Benutzererlebnisses bietet.
- A JavaScript-API für die Interaktion mit Sitzungsspeichern.
So erstellen Sie einen eigenständigen Sitzungsspeicher und fügen ihn zu ClientContext hinzu oder erstellen einen Sitzungsspeicher, der mit einer Kontextspeicherkomponente verknüpft ist. AEM installiert mehrere Kontextspeicherkomponenten, die Sie sofort verwenden können. Sie können diese Komponenten als Grundlage für Ihre Komponenten verwenden.
Weitere Informationen zum Öffnen von ClientContext, zum Konfigurieren der angezeigten Inhalte und zur Simulation des Benutzererlebnisses finden Sie unter ClientContext.
Sitzungsspeicher session-stores
ClientContext umfasst verschiedene Sitzungsspeicher, die Benutzerdaten enthalten. Speicherdaten stammen aus den folgenden Quellen:
- Client-Webbrowser
- Server (Informationen zum Speichern von Daten aus den Quellen Dritter finden Sie unter JSONP-Store)
Das ClientContext-Framework bietet eine JavaScript-API , mit denen Sie mit Sitzungsspeichern interagieren können, um Benutzerdaten zu lesen und zu schreiben und auf Store-Ereignisse zu warten und darauf zu reagieren. Sie können auch Sitzungsspeicher für Benutzerdaten erstellen, die Sie für Content-Targeting oder andere Zwecke verwenden.
Sitzungsspeicherdaten bleiben auf dem Client. ClientContext schreibt keine Daten zurück an den Server. Verwenden Sie zum Übermitteln von Daten an den Server ein Formular oder schreiben Sie einen benutzerdefinierten JavaScript-Code.
Jeder Sitzungsspeicher besteht aus Eigenschaft-Wert-Paaren. Der Sitzungsspeicher stellt eine Zusammenstellung verschiedener Daten dar, deren kontextspezifische Bedeutung vom Designer bzw. Entwickler festgelegt werden kann. Der folgende JavaScript-Beispiel-Code definiert ein Objekt, das die Profildaten darstellt, die der Sitzungsspeicher unter Umständen enthält:
{
age: 20,
authorizableId: "aparker@geometrixx.info",
birthday: "27 Feb 1992",
email: "aparker@geometrixx.info",
formattedName: "Alison Parker",
gender: "female",
path: "/home/users/geometrixx/aparker@geometrixx.info/profile"
}
Ein Sitzungsspeicher kann über mehrere Browser-Sitzungen hinweg oder nur für die Sitzung, in der er erstellt wurde, beibehalten werden.
SessionPersistence
-Cookie). Browser-Speicher ist häufiger.Kontextspeicherkomponenten context-store-components
Eine Kontextspeicherkomponente ist eine AEM Komponente, die ClientContext hinzugefügt werden kann. In der Regel zeigen Kontextspeicherkomponenten Daten aus einem Sitzungsspeicher an, mit dem sie verknüpft sind. Die Informationen, die Kontextspeicherkomponenten anzeigen, sind jedoch nicht auf Sitzungsspeicherdaten beschränkt.
Kontextspeicherkomponenten können die folgenden Elemente enthalten:
- JSP-Skripte, die das Erscheinungsbild in ClientContext definieren.
- Eigenschaften zum Auflisten der Komponente im Sidekick.
- Bearbeitungsdialogfelder zum Konfigurieren von Komponenteninstanzen.
- JavaScript, das den Sitzungsspeicher initialisiert.
Eine Beschreibung der installierten Kontextspeicherkomponenten, die Sie zum Kontextspeicher hinzufügen können, finden Sie unter Verfügbare ClientContext-Komponenten.
pagedata
zu definieren.Gezielte Inhaltsbereitstellung targeted-content-delivery
Profilinformationen werden ebenfalls zur Bereitstellung zielgerichteter Inhalte verwendet.
Hinzufügen von ClientContext zu einer Seite adding-client-context-to-a-page
Schließen Sie die ClientContext-Komponente in den Hauptteil Ihrer Webseiten ein, um ClientContext zu aktivieren. Der Pfad für den ClientContext-Komponentenknoten lautet /libs/cq/personalization/components/clientcontext
. Um die Komponente aufzunehmen, fügen Sie der JSP-Datei Ihrer Seitenkomponente, die Sie direkt unterhalb des body
-Elements finden, den folgenden Code hinzu:
<cq:include path="clientcontext" resourceType="cq/personalization/components/clientcontext"/>
Die clientcontext-Komponente lädt die Seite die Client-Bibliotheken, die ClientContext implementieren.
- Die ClientContext-JavaScript-API.
- Das ClientContext-Framework, das Sitzungsspeicher, Ereignisverwaltung usw. unterstützt.
- Definierte Segmente.
- Die init.js-Skripte, die für jede Kontextspeicherkomponente generiert werden, die ClientContext hinzugefügt wurde.
- (Nur Autoreninstanz) Die ClientContext-Benutzeroberfläche.
Die ClientContext-Benutzeroberfläche ist nur in der Autoreninstanz verfügbar.
Erweitern von ClientContext extending-client-context
Um ClientContext zu erweitern, erstellen Sie einen Sitzungsspeicher und zeigen Sie optional die Speicherdaten an:
- Erstellen Sie einen Sitzungsspeicher für die Benutzerdaten, die Sie für Content-Targeting und Webanalyse benötigen.
- Erstellen Sie eine Kontextspeicherkomponente, damit Administratoren den zugehörigen Sitzungsspeicher konfigurieren und Speicherdaten in ClientContext zu Testzwecken anzeigen können.
JSONP
-Dienstes für die Bereitstellung der Daten können Sie einfach die JSONP
-Kontextspeicherkomponente verwenden und dem JSONP-Dienst zuweisen. Dadurch wird der Sitzungsspeicher verarbeitet.Erstellen eines Sitzungsspeichers creating-a-session-store
Erstellen Sie einen Sitzungsspeicher für die Daten, die Sie zu ClientContext hinzufügen und von diesem abrufen müssen. Im Allgemeinen verwenden Sie das folgende Verfahren, um einen Sitzungsspeicher zu erstellen:
-
Erstellen Sie einen Client-Bibliotheksordner mit dem Eigenschaftswert
categories
fürpersonalization.stores.kernel
. ClientContext lädt automatisch die Client-Bibliotheken für diese Kategorie. -
Konfigurieren Sie den Client-Bibliotheksordner so, dass er eine Abhängigkeit vom Client-Bibliotheksordner
personalization.core.kernel
aufweist. Der Client-Bibliotheksordnerpersonalization.core.kernel
enthält die ClientContext-JavaScript-API. -
Fügen Sie das JavaScript hinzu, das den Sitzungsspeicher erstellt und initialisiert.
Wenn Sie das JavaScript in die Client-Bibliothek personalization.stores.kernel einbeziehen, wird der Store beim Laden des ClientContext-Frameworks erstellt.
Sitzungsspeichertypen types-of-session-stores
Sitzungsspeicher werden entweder während einer Browsersitzung erstellt und verfügbar gemacht oder im Browserspeicher oder in Cookies beibehalten. Die ClientContext-JavaScript-API definiert mehrere Klassen, die beide Arten von Datenspeichern darstellen:
CQ_Analytics.SessionStore
: Diese Objekte befinden sich nur im Seiten-DOM. Die Daten werden erstellt und während der gesamten Lebensdauer der Seite beibehalten.CQ_Analytics.PerstistedSessionStore
: Diese Objekte befinden sich im Seiten-DOM und werden entweder im Browser-Speicher oder in Cookies gespeichert. Die Daten sind seiten- und sitzungsübergreifend verfügbar.
Die API bietet außerdem Erweiterungen der Klassen, die sich speziell zum Speichern von JSON- oder JSONP-Daten eignen:
-
Schreibgeschützte Objekte:
CQ_Analytics.JSONStore
undCQ-Analytics.JSONPStore
. -
Beständige Objekte:
CQ_Analytics.PersistedJSONStore
undCQ-Analytics.PersistedJSONPStore
.
Erstellen des Sitzungsspeicherobjekts creating-the-session-store-object
Das JavaScript Ihres Client-Bibliotheksordners erstellt und initialisiert den Sitzungsspeicher. Der Sitzungsspeicher muss dann mit dem Context Store Manager registriert werden. Im folgenden Beispiel wird ein CQ_Analytics.SessionStore-Objekt erstellt und registriert.
//Create the session store
if (!CQ_Analytics.MyStore) {
CQ_Analytics.MyStore = new CQ_Analytics.SessionStore();
CQ_Analytics.MyStore.STOREKEY = "MYSTORE";
CQ_Analytics.MyStore.STORENAME = "mystore";
CQ_Analytics.MyStore.data={};
}
//register the session store
if (CQ_Analytics.ClientContextMgr){
CQ_Analytics.ClientContextMgr.register(CQ_Analytics.MyStore)
}
In diesem Beispiel wird ein CQ_Analytics.JSONStore-Objekt für die Speicherung von JSON-Daten erstellt und registriert.
if (!CQ_Analytics.myJSONStore) {
CQ_Analytics.myJSONStore = CQ_Analytics.JSONStore.registerNewInstance("myjsonstore",{});
}
Erstellen einer Kontextspeicherkomponente creating-a-context-store-component
Erstellen Sie eine Kontextspeicherkomponente zum Rendern von Sitzungsspeicherdaten in ClientContext. Nach der Erstellung können Sie Ihre Kontextspeicherkomponente auf ClientContext ziehen, um Daten aus einem Sitzungsspeicher zu rendern. Kontextspeicherkomponenten bestehen aus den folgenden Elementen:
- JSP-Skript zum Rendern der Daten.
- Ein Dialogfeld "Bearbeiten".
- Ein JSP-Skript zum Initialisieren des Sitzungsspeichers.
- (Optional) Ein Client-Bibliotheksordner, der den Sitzungsspeicher erstellt. Es ist nicht erforderlich, den Client-Bibliotheksordner einzuschließen, wenn die Komponente einen vorhandenen Sitzungsspeicher verwendet.
Erweitern der bereitgestellten Kontextspeicherkomponenten extending-the-provided-context-store-components
AEM stellt die Kontextspeicherkomponenten genericstore und genericstoreproperties bereit, die Sie erweitern können. Die Struktur Ihrer Store-Daten bestimmt die Komponente, die Sie erweitern:
-
Eigenschaft-Wert-Paare:
GenericStoreProperties
-Komponente erweitern. Diese Komponente rendert automatisch Speicher von Eigenschaft-Wert-Paaren. Es werden mehrere Interaktionspunkte bereitgestellt:prolog.jsp
undepilog.jsp
: Komponenteninteraktion, die das Hinzufügen von serverseitiger Logik vor oder nach dem Komponenten-Rendering ermöglicht.
-
Komplexe Daten:
GenericStore
-Komponente erweitern. Ihr Sitzungsspeicher benötigt dann eine "Renderer"-Methode, die jedes Mal aufgerufen wird, wenn die Komponente gerendert werden muss. Die Renderer-Funktion wird mit zwei Parametern aufgerufen:-
@param {String} store
Der zu rendernde Speicher
-
@param {String} divId
Die ID des div-Elements, in das der Speicher gerendert werden muss.
-
/libs/cq/personalization/components/contextstores
installiert.Konfigurieren des Erscheinungsbilds im Sidekick configuring-the-appearance-in-sidekick
Bei der Bearbeitung von ClientContext werden Kontextspeicherkomponenten im Sidekick angezeigt. Wie bei allen Komponenten bestimmen die Eigenschaften componentGroup
und jcr:title
der ClientContext-Komponente Gruppe und Namen der Komponente.
Alle Komponenten mit dem componentGroup
-Eigenschaftswert Client Context
werden standardmäßig im Sidekick angezeigt. Wenn Sie einen anderen Eigenschaftswert für componentGroup
verwenden, muss die entsprechende Komponente im Designmodus manuell zum Sidekick hinzugefügt werden.
Instanzen der Kontextspeicherkomponenten context-store-component-instances
Wenn Sie ClientContext eine Kontextspeicherkomponente hinzufügen, wird unter /etc/clientcontext/default/content/jcr:content/stores
ein Knoten erstellt, der die Komponenteninstanz darstellt. Dieser Knoten enthält die Eigenschaftswerte, die mithilfe des Bearbeitungsdialogfelds der Komponente konfiguriert werden.
Wenn ClientContext initialisiert wird, werden diese Knoten verarbeitet.
Initialisieren des zugehörigen Sitzungsspeichers initializing-the-associated-session-store
Fügen Sie Ihrer Komponente eine init.js.jsp-Datei hinzu, um JavaScript-Code zu generieren, der den Sitzungsspeicher für Ihre Kontextspeicherkomponente initialisiert. Verwenden Sie beispielsweise das Initialisierungsskript, um die Konfigurationseigenschaften der Komponente abzurufen und in den Sitzungsspeicher einzuspeisen.
Das generierte JavaScript wird der Seite hinzugefügt, wenn ClientContext beim Laden der Seite sowohl auf der Autoren- als auch auf der Veröffentlichungsinstanz initialisiert wird. Diese JSP wird ausgeführt, bevor die Instanz der Kontextspeicherkomponente geladen und gerendert wird.
Im Code muss der MIME-Typ der Datei auf text/javascript
festgelegt sein, andernfalls wird er nicht ausgeführt.
Im folgenden Verfahren wird die Skriptdatei init.js.jsp erstellt und der Code hinzugefügt, der den richtigen MIME-Typ festlegt. Der Code, der die Speicherinitialisierung durchführt, würde folgen.
-
Klicken Sie mit der rechten Maustaste auf den Knoten der Kontextspeicherkomponente und klicken Sie auf Erstellen > Datei erstellen .
-
Geben Sie im Namensfeld
init.js.jsp
ein und klicken Sie dann auf „OK“. -
Fügen Sie oben auf der Seite den folgenden Code hinzu und klicken Sie auf Alle speichern .
code language-java <%@page contentType="text/javascript" %>
Rendern von Sitzungsspeicherdaten für genericstoreproperties-Komponenten rendering-session-store-data-for-genericstoreproperties-components
Zeigen Sie Sitzungsspeicherdaten in ClientContext in einem konsistenten Format an.
Anzeigen von Eigenschaftsdaten displaying-property-data
In der Tag-Bibliothek (taglib) für die Personalisierung steht das Tag personalization:storePropertyTag
zur Verfügung. Dieses Tag zeigt den Wert einer Eigenschaft aus dem Sitzungsspeicher an. Um das -Tag zu verwenden, fügen Sie die folgende Codezeile in Ihre JSP-Datei ein:
<%@taglib prefix="personalization" uri="https://www.day.com/taglibs/cq/personalization/1.0" %>
Das Tag weist folgendes Format auf:
<personalization:storePropertyTag propertyName="property_name" store="session_store_name"/>
Das Attribut propertyName
ist der Name der Speichereigenschaft, die angezeigt wird. Das Attribut store
ist der Name des registrierten Speichers. Im folgenden Beispiel-Tag wird der Wert der Eigenschaft authorizableId
des Speichers profile
angezeigt:
<personalization:storePropertyTag propertyName="authorizableId" store="profile"/>
HTML-Struktur html-structure
Der Client-Bibliotheksordner personalization.ui (https://experienceleague.adobe.com/etc/clientlibs/foundation/personalization/ui/themes/default?lang=de) stellt die CSS-Stile bereit, die ClientContext zum Formatieren des HTML-Codes verwendet. Der folgende Code veranschaulicht die vorgeschlagene Struktur für die Anzeige von Store-Daten:
<div class="cq-cc-store">
<div class="cq-cc-thumbnail">
<div class="cq-cc-store-property">
<!-- personalization:storePropertyTag for the store thumbnail image goes here -->
</div>
</div>
<div class="cq-cc-content">
<div class="cq-cc-store-property cq-cc-store-property-level0">
<!-- personalization:storePropertyTag for a store property goes here -->
</div>
<div class="cq-cc-store-property cq-cc-store-property-level1">
<!-- personalization:storePropertyTag for a store property goes here -->
</div>
<div class="cq-cc-store-property cq-cc-store-property-level2">
<!-- personalization:storePropertyTag for a store property goes here -->
</div>
<div class="cq-cc-store-property cq-cc-store-property-level3">
<!-- personalization:storePropertyTag for a store property goes here -->
</div>
</div>
<div class="cq-cc-clear"></div>
</div>
Die Kontextspeicherkomponente /libs/cq/personalization/components/contextstores/profiledata
wendet diese Struktur für die Anzeige von Daten aus dem Profilsitzungsspeicher an. Die Klasse cq-cc-thumbnail
platziert das Miniaturbild. Die Klassen cq-cc-store-property-level*x*
formatieren die alphanumerischen Daten:
- level0, level1 und level2 werden vertikal verteilt und verwenden eine weiße Schrift.
- Level3 und alle weiteren Ebenen werden horizontal verteilt und verwenden eine weiße Schrift mit einem dunkleren Hintergrund.
Rendern von Sitzungsspeicherdaten für genericstore-Komponenten rendering-session-store-data-for-genericstore-components
Um Store-Daten mithilfe einer genericstore-Komponente zu rendern, müssen Sie:
- der JSP-Skriptkomponete das Tag personalization:storeRendererTag hinzufügen, um den Namen des Sitzungsspeichers zu identifizieren.
- Implementieren Sie eine Renderer-Methode in die Sitzungsspeicherklasse.
Identifizieren des genericstore-Sitzungsspeichers identifying-the-genericstore-session-store
In der Tag-Bibliothek (taglib) für die Personalisierung steht das Tag personalization:storePropertyTag
zur Verfügung. Dieses Tag zeigt den Wert einer Eigenschaft aus dem Sitzungsspeicher an. Um das -Tag zu verwenden, fügen Sie die folgende Codezeile in Ihre JSP-Datei ein:
<%@taglib prefix="personalization" uri="https://www.day.com/taglibs/cq/personalization/1.0" %>
Das Tag weist folgendes Format auf:
<personalization:storeRendererTag store="store_name"/>
Implementieren der Renderer-Methode für den Sitzungsspeicher implementing-the-session-store-renderer-method
Ihr Sitzungsspeicher benötigt dann eine "Renderer"-Methode, die jedes Mal aufgerufen wird, wenn die Komponente gerendert werden muss. Die Renderer-Funktion wird mit zwei Parametern aufgerufen:
-
@param {String} store
Der zu rendernde Speicher
-
@param {String} divId
Die ID des div-Elements, in das der Speicher gerendert werden muss.
Interagieren mit Sitzungsspeichern interacting-with-session-stores
Verwenden Sie JavaScript, um mit Sitzungsspeichern zu interagieren.
Zugreifen auf Sitzungsspeicher accessing-session-stores
Rufen Sie ein Sitzungsspeicherobjekt ab, um Daten in den Speicher zu lesen oder zu schreiben. CQ_Analytics.ClientContextMgr
bietet Zugriff auf Stores basierend auf dem Store-Namen. Verwenden Sie nach dem Erhalt die Methoden der CQ-Analytics.SessionStore
oder CQ-Analytics.PersistedSessionStore
, um mit Store-Daten zu interagieren.
Im folgenden Beispiel wird der Speicher profile
und anschließend die Eigenschaft formattedName
daraus abgerufen.
function getName(){
var profilestore = CQ_Analytics.ClientContextMgr.getRegisteredStore("profile");
if(profilestore){
return profilestore.getProperty("formattedName", false);
} else {
return null;
}
}
Erstellen eines Listeners für die Reaktion auf eine Sitzungsspeicheraktualisierung creating-a-listener-to-react-to-a-session-store-update
Sitzungsspeicher lösen Ereignisse aus, sodass Listener und Trigger-Ereignisse auf der Grundlage dieser Ereignisse hinzugefügt werden können.
Die Sitzungsspeicher werden nach dem Muster Observable
erstellt. Sie erweitern CQ_Analytics.Observable
, das die Methode addListener
zur Verfügung stellt.
Im folgenden Beispiel wird dem Ereignis update
ein Listener des Sitzungsspeichers profile
hinzugefügt.
var profileStore = ClientContextMgr.getRegisteredStore("profile");
if( profileStore ) {
//callback execution context
var executionContext = this;
//add "update" event listener to store
profileStore.addListener("update",function(store, property) {
//do something on store update
},executionContext);
}
Überprüfen, ob ein Sitzungsspeicher definiert und initialisiert wurde checking-that-a-session-store-is-defined-and-initialized
Sitzungsspeicher sind erst verfügbar, wenn sie geladen und mit Daten initialisiert wurden. Die folgenden Faktoren können den Zeitpunkt der Verfügbarkeit von Sitzungsspeichern beeinflussen:
- Laden der Seite
- Laden von JavaScript
- Ausführungszeit von JavaScript
- Reaktionszeiten für XHR-Anforderungen
- Dynamische Änderungen am Sitzungsspeicher
Verwenden Sie die CQ_Analytics.ClientContextUtils
-Objekt onStoreRegistered
und onStoreInitialized
-Methoden verwenden, um nur auf Sitzungsspeicher zuzugreifen, wenn diese verfügbar sind. Mit diesen Methoden können Sie Ereignis-Listener registrieren, die auf die Sitzungsregistrierung und die Initialisierungsereignisse reagieren.
Im folgenden Beispiel wird das Ereignis onStoreRegistered
des Sitzungsspeichers profile
verwendet. Wenn der Speicher registriert ist, wird dem Ereignis update
des Sitzungsspeichers ein Listener hinzugefügt. Beim Aktualisieren des Speichers wird der Inhalt des Elements <div class="welcome">
auf der Seite mit dem Namen des Speichers profile
aktualisiert.
//listen for the store registration
CQ_Analytics.ClientContextUtils.onStoreRegistered("profile", listen);
//listen for the store's update event
function listen(){
var profilestore = CQ_Analytics.ClientContextMgr.getRegisteredStore("profile");
profilestore.addListener("update",insertName);
}
//insert the welcome message
function insertName(){
$("div.welcome").text("Welcome "+getName());
}
//obtain the name from the profile store
function getName(){
var profilestore = CQ_Analytics.ClientContextMgr.getRegisteredStore("profile");
if(profilestore){
return profilestore.getProperty("formattedName", false);
} else {
return null;
}
}
Ausschließen einer Eigenschaft aus dem sessionpersistence-Cookie excluding-a-property-from-the-sessionpersistence-cookie
Um zu verhindern, dass eine Eigenschaft eines PersistedSessionStore
beibehalten wird (um sie aus dem Cookie sessionpersistence
auszuschließen), fügen Sie die Eigenschaft der Liste der nicht permanenten Eigenschaften des permanenten Sitzungsspeichers hinzu.
Siehe CQ_Analytics.PersistedSessionStore.setNonPersisted(propertyName)
CQ_Analytics.ClientContextUtils.onStoreRegistered("surferinfo", function(store) {
//this will exclude the browser, OS and resolution properties of the surferinfo session store from the
store.setNonPersisted("browser");
store.setNonPersisted("OS");
store.setNonPersisted("resolution");
});
Konfigurieren des Geräte-Reglers configuring-the-device-slider
Bedingungen conditions
Für die aktuelle Seite ist eine entsprechende Mobilversion erforderlich. Dafür muss für die Seite eine mit einer mobilen Rollout-Konfiguration eingerichtete Live Copy verfügbar sein (rolloutconfig.path.toLowerCase
enthält mobile
).
Konfiguration configuration
Beim Wechseln von der Desktop-Seite zur mobilen Entsprechung:
-
Das DOM der mobilen Seite wird geladen.
-
Das
div
-Hauptelement (erforderlich) mit dem Inhalt wird extrahiert und in die aktuelle Desktop-Seite eingefügt. -
Die CSS- und Hauptteilklassen, die geladen werden müssen, müssen manuell konfiguriert werden.
Beispiel:
window.CQMobileSlider["geometrixx-outdoors"] = {
//CSS used by desktop that need to be removed when mobile
DESKTOP_CSS: [
"/etc/designs/${app}/clientlibs_desktop_v1.css"
],
//CSS used by mobile that need to be removed when desktop
MOBILE_CSS: [
"/etc/designs/${app}/clientlibs_mobile_v1.css"
],
//id of the content that needs to be removed when mobile
DESKTOP_MAIN_ID: "main",
//id of the content that needs to be removed when desktop
MOBILE_MAIN_ID: "main",
//body classes used by desktop that need to be removed when mobile
DESKTOP_BODY_CLASS: [
"page"
],
//body classes used by mobile that need to be removed when desktop
MOBILE_BODY_CLASS: [
"page-mobile"
]
};
Beispiel: Erstellen einer benutzerdefinierten Kontextspeicherkomponente example-creating-a-custom-context-store-component
In diesem Beispiel erstellen Sie eine Kontextspeicherkomponente, die Daten von einem externen Dienst abruft und im Sitzungsspeicher speichert:
- Erweitert die Komponente genericstoreproperties .
- Initialisiert einen Store mithilfe eines
CQ_Analytics.JSONPStore
JavaScript-Objekt. - Ruft einen JSONP-Dienst auf, um Daten abzurufen und zum Store hinzuzufügen.
- Rendert die Daten in ClientContext.
Hinzufügen der geoloc-Komponente add-the-geoloc-component
Erstellen Sie eine CQ-Anwendung und fügen Sie die geoloc-Komponente hinzu.
-
Öffnen Sie die CRXDE Lite in Ihrem Webbrowser (http://localhost:4502/crx/de).
-
Klicken Sie mit der rechten Maustaste auf den Ordner
/apps
und klicken Sie auf „Erstellen“ > „Ordner erstellen“. Geben Sie fürmyapp
einen Namen ein und klicken Sie auf „OK“. -
Erstellen Sie auch unter
myapp
einen Ordner mit dem Namencontextstores
. `` -
Klicken Sie mit der rechten Maustaste auf den Ordner
/apps/myapp/contextstores
und klicken Sie auf „Erstellen“ > „Komponente erstellen“. Geben Sie die folgenden Eigenschaftswerte an und klicken Sie auf "Next":- Titel: geoloc
- Titel: Standortspeicher
- Obertyp:
cq/personalization/components/contextstores/genericstoreproperties
- Gruppe: ClientContext
-
Klicken Sie im Dialogfeld Komponente erstellen auf jeder Seite auf Weiter , bis die Schaltfläche OK aktiviert ist, und klicken Sie dann auf OK.
-
Klicken Sie auf „Alle speichern“.
Erstellen des Dialogfelds "Geoloc-Bearbeitung" create-the-geoloc-edit-dialog
Die Kontextspeicherkomponente erfordert ein Dialogfeld "Bearbeiten". Das Dialogfeld zur geoloc-Bearbeitung enthält eine statische Meldung, die anzeigt, dass keine Eigenschaften zum Konfigurieren vorhanden sind.
-
Klicken Sie mit der rechten Maustaste auf den Knoten
/libs/cq/personalization/components/contextstores/genericstoreproperties/dialog
und klicken Sie auf „Kopieren“. -
Klicken Sie mit der rechten Maustaste auf den Knoten
/apps/myapp/contextstores/geoloc
und klicken Sie auf „Einfügen“. -
Löschen Sie alle untergeordneten Knoten unter dem Knoten „/apps/myapp/contextstores/geoloc/dialog/items/items/tab1/items“:
- store
- properties
- Miniaturansicht
-
Klicken Sie mit der rechten Maustaste auf den Knoten
/apps/myapp/contextstores/geoloc/dialog/items/items/tab1/items
und klicken Sie auf „Erstellen“ > „Knoten erstellen“. Geben Sie die folgenden Eigenschaftswerte an und klicken Sie auf "OK":- Name: statisch
- Typ: cq:Widget
-
Fügen Sie dem Knoten folgende Eigenschaften hinzu:
table 0-row-3 1-row-3 2-row-3 3-row-3 Name Typ Wert cls Zeichenfolge x-form-fieldset-description text Zeichenfolge Die geoloc-Komponente erfordert keine Konfiguration. xtype Zeichenfolge static -
Klicken Sie auf „Alle speichern“.
Initialisierungsskript erstellen create-the-initialization-script
Fügen Sie der geoloc-Komponente eine Datei init.js.jsp hinzu und verwenden Sie sie zum Erstellen des Sitzungsspeichers, zum Abrufen der Standortdaten und zum Hinzufügen zum Store.
Die Datei init.js.jsp wird ausgeführt, wenn ClientContext von der Seite geladen wird. Bis zu diesem Zeitpunkt wird die JavaScript-API für ClientContext geladen und steht für Ihr Skript zur Verfügung.
-
Klicken Sie mit der rechten Maustaste auf die
/apps/myapp/contextstores/geoloc
Knoten und klicken Sie auf Erstellen -> Datei erstellen. Geben Sie den Namen init.js.jsp ein und klicken Sie auf "OK". -
Fügen Sie oben auf der Seite den folgenden Code hinzu und klicken Sie auf Alle speichern .
code language-java <%@page contentType="text/javascript;charset=utf-8" %><% %><%@include file="/libs/foundation/global.jsp"%><% log.info("***** initializing geolocstore ****"); String store = "locstore"; String jsonpurl = "https://api.wipmania.com/jsonp?callback=${callback}"; %> var locstore = CQ_Analytics.StoreRegistry.getStore("<%= store %>"); if(!locstore){ locstore = CQ_Analytics.JSONPStore.registerNewInstance("<%= store %>", "<%= jsonpurl %>",{}); } <% log.info(" ***** done initializing geoloc ************"); %>
Geoloc-Sitzungsspeicherdaten rendern render-the-geoloc-session-store-data
Fügen Sie den Code zur JSP-Datei der geoloc-Komponente hinzu, um die Speicherdaten in ClientContext zu rendern.
-
Öffnen Sie in CRXDE Lite die Datei
/apps/myapp/contextstores/geoloc/geoloc.jsp
. -
Fügen Sie den folgenden HTML-Code unter dem Stub-Code hinzu:
code language-xml <%@taglib prefix="personalization" uri="https://www.day.com/taglibs/cq/personalization/1.0" %> <div class="cq-cc-store"> <div class="cq-cc-content"> <div class="cq-cc-store-property cq-cc-store-property-level0"> Continent: <personalization:storePropertyTag propertyName="address/continent" store="locstore"/> </div> <div class="cq-cc-store-property cq-cc-store-property-level1"> Country: <personalization:storePropertyTag propertyName="address/country" store="locstore"/> </div> <div class="cq-cc-store-property cq-cc-store-property-level2"> City: <personalization:storePropertyTag propertyName="address/city" store="locstore"/> </div> <div class="cq-cc-store-property cq-cc-store-property-level3"> Latitude: <personalization:storePropertyTag propertyName="latitude" store="locstore"/> </div> <div class="cq-cc-store-property cq-cc-store-property-level4"> Longitude: <personalization:storePropertyTag propertyName="longitude" store="locstore"/> </div> </div> <div class="cq-cc-clear"></div> </div>
-
Klicken Sie auf „Alle speichern“.
Komponente zum ClientContext hinzufügen add-the-component-to-client-context
Fügen Sie die Komponente "Location Store"zu ClientContext hinzu, damit sie beim Laden der Seite initialisiert wird.
-
Öffnen Sie die Startseite der Geometrixx Outdoors auf der Autoreninstanz (http://localhost:4502/content/geometrixx-outdoors/en.html).
-
Betätigen Sie Tastenkombination Strg+Alt+C (Windows) oder Ctrl+Wahl+C (Mac), um ClientContext zu öffnen.
-
Klicken Sie auf das Bearbeitungssymbol oben in ClientContext, um ClientContext Designer zu öffnen.
-
Ziehen Sie die Komponente Standortspeicher in ClientContext.
Siehe Standortinformationen in ClientContext . see-the-location-information-in-client-context
Öffnen Sie die Geometrixx Outdoors-Homepage im Bearbeitungsmodus und dann ClientContext, um die Daten aus der Standortspeicherkomponente anzuzeigen.
- Öffnen Sie die englische Version der Geometrixx Outdoors-Site. (http://localhost:4502/content/geometrixx-outdoors/en.html)
- Drücken Sie zum Öffnen von ClientContext die Tastenkombination Strg+Alt+C (Windows) oder Ctrl+Wahl+C (Mac).
Erstellen eines benutzerdefinierten ClientContext creating-a-customized-client-context
Um einen zweiten Client-Kontext zu erstellen, müssen Sie die Verzweigung duplizieren:
/etc/clientcontext/default
-
Der Unterordner:
/content
enthält den Inhalt des benutzerdefinierten ClientContext.
-
Der Ordner:
/contextstores
ermöglicht es Ihnen, verschiedene Konfigurationen für die Kontextspeicher festzulegen.
Um Ihren benutzerdefinierten Client-Kontext zu verwenden, bearbeiten Sie die -Eigenschaftpath
im Designstil der ClientContext-Komponente, wie in der Seitenvorlage enthalten. Beispielsweise als Standardspeicherort von:/libs/cq/personalization/components/clientcontext/design_dialog/items/path