ClientContext in Detail

ClientContext rappresenta una raccolta di dati utente assemblata in modo dinamico. Potete utilizzare i dati per determinare il contenuto da visualizzare su una pagina Web in una determinata situazione (targeting del contenuto). I dati sono disponibili anche per l'analisi dei siti Web e per qualsiasi javascript nella pagina.

ClientContext è costituito principalmente dai seguenti aspetti:

• L'archivio delle sessioni, che contiene i dati utente.
• Interfaccia utente che visualizza i dati utente e fornisce gli strumenti per simulare l'esperienza utente.
• Una API javascript per interagire con gli store di sessioni.

Per creare un archivio di sessioni standalone e aggiungerlo a ClientContext oppure creare uno store di sessioni associato a un componente Context Store. AEM installa diversi componenti Context Store che puoi utilizzare immediatamente. Potete utilizzare questi componenti come base per i componenti.

Per informazioni sull'apertura di ClientContext, sulla configurazione delle informazioni visualizzate e sulla simulazione dell'esperienza utente, vedere ClientContext.

Archivio sessione

ClientContext include diversi store di sessioni contenenti dati utente. I dati dello store provengono dalle origini seguenti:

• Il browser Web del client.
• Il server (vedere JSONP Store per l'archiviazione di informazioni da origini terze parti)

Il framework ClientContext fornisce un javascript API che potete utilizzare per interagire con gli store di sessioni per leggere e scrivere i dati utente, nonché per ascoltare e reagire agli eventi di store. Potete anche creare store di sessioni per i dati utente da utilizzare per il targeting dei contenuti o per altri scopi.

I dati dell'archivio delle sessioni rimangono sul client. ClientContext non riscrive i dati al server. Per inviare dati al server, utilizzare un modulo o sviluppare JavaScript personalizzato.

Ogni archivio di sessioni è un insieme di coppie proprietà-valore. Lo store di sessioni rappresenta una raccolta di dati (di qualsiasi tipo) il cui significato concettuale può essere deciso dal progettista e/o sviluppatore. Nell'esempio seguente, il codice javascript definisce un oggetto che rappresenta i dati di profilo che potrebbero contenere gli archivi di sessioni:

{
  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"
}

Un archivio delle sessioni può essere mantenuto nelle sessioni del browser, oppure può durare solo per la sessione del browser in cui viene creato.

Componenti per store di contesto

Un componente per l’archivio di contesto è un componente CQ che può essere aggiunto a ClientContext. In genere, i componenti dell'archivio di contesto visualizzano i dati provenienti da uno store di sessioni a cui sono associati. Tuttavia, le informazioni visualizzate dai componenti dell'archivio di contesto non sono limitate ai dati dell'archivio di sessione.

I componenti dell'archivio di contesto possono includere i seguenti elementi:

• Script JSP che definiscono l'aspetto in ClientContext.
• Proprietà per elencare il componente nella barra laterale.
• Modificare le finestre di dialogo per configurare le istanze dei componenti.
• Javascript che inizializza lo store di sessioni.

Per una descrizione dei componenti Context Store installati che è possibile aggiungere a Context Store, vedere Client Context Components disponibili.

Distribuzione di contenuti mirati

Le informazioni sul profilo vengono utilizzate anche per distribuire contenuti mirati.

Aggiunta di contesto client a una pagina

Includete il componente ClientContext nella sezione body delle pagine Web per attivare ClientContext. Il percorso del nodo del componente ClientContext è /libs/cq/personalization/components/clientcontext. Per includere il componente, aggiungete il seguente codice al file JSP del componente di pagina, situato appena sotto l'elemento body della pagina:

<cq:include path="clientcontext" resourceType="cq/personalization/components/clientcontext"/>

Il componente clientcontext fa in modo che la pagina carichi le librerie client che implementano ClientContext.

• L'API JavaScript ClientContext.
• ClientContext Framework che supporta gli store di sessioni, la gestione eventi e così via.
• Segmenti definiti.
• Gli script init.js generati per ciascun componente dell'archivio di contesto aggiunto a ClientContext.
• (Solo istanza Author) L'interfaccia utente ClientContext.

L'interfaccia utente ClientContext è disponibile solo nell'istanza di creazione.

Estensione del contesto client

Per estendere ClientContext, create uno store di sessione ed eventualmente visualizzate i dati dello store:

• Create un archivio di sessione per i dati utente necessari per il targeting dei contenuti e l'analisi Web.
• Create un componente per l’archivio di contesto per consentire agli amministratori di configurare l’archivio di sessioni associato e di visualizzare i dati dell’archivio di ClientContext a scopo di test.

Creazione di uno store di sessione

Crea uno store di sessione per i dati da aggiungere e recuperare da ClientContext. In genere, per creare uno store di sessioni si utilizza la procedura seguente:

1. Creare una cartella libreria client con un valore di proprietà categories di personalization.stores.kernel. ClientContext carica automaticamente le librerie client di questa categoria.

2. Configurate la cartella della libreria client in modo che abbia una dipendenza dalla cartella della libreria client personalization.core.kernel. La libreria client personalization.core.kernel fornisce l'API JavaScript ClientContext.

3. Aggiungete il javascript che crea e inizializza lo store di sessioni.

L'inclusione di javascript nella libreria client personalization.stores.kernel determina la creazione dello store quando viene caricato ClientContext Framework.

Tipi di archivi di sessione

Gli store di sessione vengono creati e disponibili durante una sessione del browser, oppure vengono memorizzati nell'archivio del browser o nei cookie. L'API JavaScript ClientContext definisce diverse classi che rappresentano entrambi i tipi di archivio dati:

• [CQ_Analytics.SessionStore](/docs/experience-manager-65/developing/personlization/client-context/ccjsapi.html?lang=it#cq-analytics-sessionstore): Questi oggetti risiedono solo nel DOM della pagina. I dati vengono creati e memorizzati durante il ciclo di vita della pagina.
• [CQ_Analytics.PerstistedSessionStore](/docs/experience-manager-65/developing/personlization/client-context/ccjsapi.html?lang=it#cq-analytics-persistedsessionstore): Questi oggetti risiedono nel DOM della pagina e sono persistenti nell’archiviazione del browser o nei cookie. I dati sono disponibili su più pagine e tra sessioni utente.

L'API fornisce inoltre estensioni di queste classi specializzate nella memorizzazione di dati JSON o di dati JSONP:

• Oggetti solo sessione: CQ_Analytics.JSONStore e CQ_Analytics.JSONPStore.

• Oggetti persistenti: CQ_Analytics.PersistedJSONStore e CQ_Analytics.PersistedJSONPStore.

Creazione dell'oggetto Store di sessione

Il javascript della cartella della libreria client crea e inizializza lo store di sessioni. Lo store sessione deve quindi essere registrato tramite Context Store Manager. Nell'esempio seguente viene creato e registrato un oggetto CQ_Analytics.SessionStore.

//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)
}

Per la memorizzazione dei dati JSON, l'esempio seguente crea e registra un oggetto CQ_Analytics.JSONStore.

if (!CQ_Analytics.myJSONStore) {
    CQ_Analytics.myJSONStore = CQ_Analytics.JSONStore.registerNewInstance("myjsonstore",{});
}

Creazione di un componente per l'archivio di contesto

Create un componente dell'archivio di contesto per eseguire il rendering dei dati dell'archivio di sessione in ClientContext. Una volta creato, potete trascinare il componente dell'archivio di contesto in ClientContext per eseguire il rendering dei dati da uno store di sessione. I componenti dell’archivio di contesto sono costituiti dai seguenti elementi:

• Script JSP per il rendering dei dati.
• Una finestra di dialogo di modifica.
• Uno script JSP per l'inizializzazione dello store di sessioni.
• (Facoltativo) Una cartella libreria client che crea lo store sessione. Non è necessario includere la cartella della libreria client se il componente utilizza uno store di sessione esistente.

Estensione dei componenti Context Store forniti

AEM fornisce i componenti di archivio contestuale di genericstore e di genericstoreproperties che è possibile estendere. La struttura dei dati dello store determina il componente che si estende:

• Coppie proprietà-valore: Estende il componente GenericStoreProperties. Questo componente esegue automaticamente il rendering degli archivi di coppie proprietà-valore. Sono forniti diversi punti di interazione:

  • prolog.jsp e epilog.jsp: interazione di componente che consente di aggiungere logica lato server prima o dopo il rendering del componente.

• Dati complessi: Estende il componente GenericStore. Sarà quindi necessario un metodo "renderer" per lo store di sessioni, che verrà chiamato ogni volta che è necessario eseguire il rendering del componente. La funzione di rendering viene chiamata con due parametri:

  • @param {String} store
    Lo store da eseguire

  • @param {String} divId
    Id del div in cui deve essere eseguito il rendering dello store.

Configurazione dell'aspetto nella barra laterale

Durante la modifica di ClientContext, i componenti dell'archivio di contesto vengono visualizzati nella barra laterale. Come per tutti i componenti, le proprietà componentGroup e jcr:title del componente ClientContext determinano il gruppo e il nome del componente.

Tutti i componenti con un valore di proprietà componentGroup di Client Context vengono visualizzati nella barra laterale per impostazione predefinita. Se si utilizza un valore diverso per la proprietà componentGroup, è necessario aggiungere manualmente il componente alla barra laterale utilizzando la modalità Progettazione.

Istanze componente archivio contesto

Quando aggiungete un componente dell'archivio di contesto a ClientContext, un nodo che rappresenta l'istanza del componente viene creato sotto /etc/clientcontext/default/content/jcr:content/stores. Questo nodo contiene i valori delle proprietà configurati tramite la finestra di dialogo di modifica del componente.

Quando ClientContext viene inizializzato, questi nodi vengono elaborati.

Inizializzazione dello store di sessioni associato

Aggiungete un file init.js.jsp al componente per generare codice JavaScript che inizializza l’archivio di sessioni utilizzato dal componente dell’archivio di contesto. Ad esempio, utilizzare lo script di inizializzazione per recuperare le proprietà di configurazione per il componente e utilizzarle per compilare l'archivio delle sessioni.

Il codice JavaScript generato viene aggiunto alla pagina quando ClientContext viene inizializzato al caricamento della pagina sia nelle istanze di creazione che di pubblicazione. Questo JSP viene eseguito prima che l’istanza del componente dell’archivio di contesto venga caricata ed eseguita.

Il codice deve impostare il tipo mime del file su text/javascript, altrimenti non viene eseguito.

La procedura seguente crea il file di script init.js.jsp e aggiunge il codice che imposta il tipo mime corretto. Seguirà il codice che esegue l'inizializzazione dello store.

1. Fare clic con il pulsante destro del mouse sul nodo del componente dell'archivio di contesto e scegliere Crea > Crea file.

2. Nel campo Nome, digitare init.js.jsp, quindi fare clic su OK.

3. Nella parte superiore della pagina, aggiungete il codice seguente e fate clic su Salva tutto.

   <%@page contentType="text/javascript" %>
   

Rendering dei dati dell'archivio di sessioni per i componenti genericstoreproperties

Visualizzare i dati dell'archivio di sessioni in ClientContext utilizzando un formato coerente.

Visualizzazione dei dati delle proprietà

La libreria di personalizzazione fornisce il tag personalization:storePropertyTag che visualizza il valore di una proprietà da uno store di sessioni. Per utilizzare il tag , includi la seguente riga di codice nel file JSP:

<%@taglib prefix="personalization" uri="https://www.day.com/taglibs/cq/personalization/1.0" %>

Il tag ha il formato seguente:

<personalization:storePropertyTag propertyName="property_name" store="session_store_name"/>

L'attributo propertyName è il nome della proprietà store da visualizzare. L'attributo store è il nome dello store registrato. Il seguente tag di esempio visualizza il valore della proprietà authorizableId dell'archivio profile:

<personalization:storePropertyTag propertyName="authorizableId" store="profile"/>

Struttura HTML

La cartella della libreria client personalization.ui (/etc/clientlibs/foundation/personalization/ui/topics/default?lang=it) fornisce gli stili CSS utilizzati da ClientContext per formattare il codice HTML. Il codice seguente illustra la struttura suggerita da utilizzare per visualizzare i dati dello store:

<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>

Il componente /libs/cq/personalization/components/contextstores/profiledata dell'archivio di contesto utilizza questa struttura per visualizzare i dati dall'archivio delle sessioni di profilo. La classe cq-cc-thumbnail inserisce l'immagine della miniatura. Le classi cq-cc-store-property-level*x* formattano i dati alfanumerici:

• level0, level1 e level2 sono distribuiti in verticale e utilizzano un font bianco.
• level3 ed eventuali livelli aggiuntivi vengono distribuiti in orizzontale e utilizzano un font bianco con uno sfondo più scuro.

Rendering dei dati dell'archivio delle sessioni per i componenti di genericstore

Per eseguire il rendering dei dati di un archivio utilizzando un componente di un archivio generico, è necessario:

• Aggiungete il tag personalization:storeRendererTag allo script JSP del componente per identificare il nome dell'archivio delle sessioni.
• Implementare un metodo di rendering nella classe dell'archivio sessioni.

Identificazione dello store di sessioni di genericstore

La libreria di personalizzazione fornisce il tag personalization:storePropertyTag che visualizza il valore di una proprietà da uno store di sessioni. Per utilizzare il tag , includi la seguente riga di codice nel file JSP:

<%@taglib prefix="personalization" uri="https://www.day.com/taglibs/cq/personalization/1.0" %>

Il tag ha il formato seguente:

<personalization:storeRendererTag store="store_name"/>

Implementazione del metodo di rendering dello store di sessione

Sarà quindi necessario un metodo "renderer" per lo store di sessioni, che verrà chiamato ogni volta che è necessario eseguire il rendering del componente. La funzione di rendering viene chiamata con due parametri:

• Store @param {String}
  Lo store da eseguire
• @param {String} divId
  Id del div in cui deve essere eseguito il rendering dello store.

Interazione con gli store di sessione

Utilizzate javascript per interagire con gli store di sessioni.

Accesso agli archivi di sessione

Ottenete un oggetto store sessione per leggere o scrivere dati nello store. CQ_Analytics. ClientContextMgrfornisce l'accesso agli store in base al nome dello store. Una volta ottenuto, utilizzate i metodi di CQ_Analytics.SessionStore o CQ_Analytics.PersistedSessionStore per interagire con i dati dello store.

Nell'esempio seguente viene ottenuto lo store profile, quindi viene recuperata la proprietà formattedName dallo store.

function getName(){
   var profilestore = CQ_Analytics.ClientContextMgr.getRegisteredStore("profile");
   if(profilestore){
      return profilestore.getProperty("formattedName", false);
   } else {
      return null;
   }
}

Creazione di un listener per reagire a un aggiornamento dello store di sessioni

La sessione memorizza gli eventi di attivazione, pertanto è possibile aggiungere listener ed attivare gli eventi in base a tali eventi.

Gli archivi di sessione sono basati sul pattern Observable. Estendono CQ_Analytics.Observable che fornisce il metodo [addListener](/docs/experience-manager-65/developing/personlization/client-context/ccjsapi.md#addlistener-event-fct-scope).

Nell'esempio seguente viene aggiunto un listener all'evento update dell'archivio di sessioni profile.

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);
}

Verifica della definizione e dell'inizializzazione di uno store di sessione

Gli store di sessione non sono disponibili finché non vengono caricati e inizializzati con i dati. I seguenti fattori possono influenzare il tempo di disponibilità dell'archivio di sessione:

• Caricamento pagina
• Caricamento JavaScript
• Tempo di esecuzione JavaScript
• Tempi di risposta per le richieste XHR
• Modifiche dinamiche allo store di sessioni

Utilizzare i metodi CQ_Analytics.ClientContextUtils dell'oggetto onStoreRegistered e onStoreInitialized per accedere agli store di sessioni solo quando sono disponibili. Questi metodi consentono di registrare i listener di eventi che reagiscono agli eventi di registrazione e inizializzazione delle sessioni.

Nell’esempio seguente viene utilizzato l’evento onStoreRegistered dell’archivio di sessioni profile. Quando lo store viene registrato, un listener viene aggiunto all’evento update dello store di sessione. Quando lo store viene aggiornato, il contenuto dell’elemento <div class="welcome"> nella pagina viene aggiornato con il nome dallo store profile.

//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;
    }
}

Esclusione di una proprietà dal cookie di persistenza sessione

Per evitare che una proprietà di un oggetto PersistedSessionStore venga mantenuta (ovvero escluderla dal cookie sessionpersistence), aggiungete la proprietà all'elenco delle proprietà non persistenti dell'archivio delle sessioni persistenti.

Consulta [CQ_Analytics.PersistedSessionStore.setNonPersisted(propertyName)](/docs/experience-manager-65/developing/personlization/client-context/ccjsapi.md#setnonpersisted-name)

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");
});

Configurazione del dispositivo di scorrimento

Condizioni

La pagina corrente deve avere una pagina mobile corrispondente; questo è determinato solo se per la pagina è configurato LiveCopy con una configurazione di rollout mobile ( rolloutconfig.path.toLowerCase contiene mobile).

Configurazione

Quando si passa dalla pagina desktop a quella mobile equivalente:

• Viene caricato il DOM della pagina mobile.

• La div principale (richiesta) che contiene il contenuto, viene estratta e iniettata nella pagina desktop corrente.

• Le classi CSS e body da caricare devono essere configurate manualmente.

Esempio:

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"
  ]
};

Esempio: Creazione di un componente personalizzato per l'archivio di contesto

In questo esempio, potete creare un componente per l’archivio di contesto che recupera i dati da un servizio esterno e li memorizza nell’archivio di sessioni:

• Estende il componente genericstoreproperties.
• Inizializza uno store utilizzando un oggetto JavaScript CQ_Analytics.JSONPStore.
• Chiama un servizio JSONP per recuperare i dati e aggiungerli allo store.
• Consente di renderizzare i dati in ClientContext.

Aggiungere il componente geoloc

Create un’applicazione CQ e aggiungete il componente geoloc.

1. Aprite il CRXDE Lite nel browser Web (https://localhost:4502/crx/de).

2. Fare clic con il pulsante destro del mouse sulla cartella /apps e scegliere Crea > Crea cartella. Specificate un nome di myapp, quindi fate clic su OK.

3. Analogamente, sotto myapp, create una cartella denominata contextstores. "

4. Fare clic con il pulsante destro del mouse sulla cartella /apps/myapp/contextstores e scegliere Crea > Crea componente. Specificate i seguenti valori di proprietà e fate clic su Avanti:

   • Etichetta: geoloc
   • Titolo: Store posizione
   • Super Type: cq/personalization/components/contextstores/genericstoreproperties
   • Gruppo: ClientContext

5. Nella finestra di dialogo Crea componente, fare clic su Avanti su ciascuna pagina fino a quando il pulsante OK non è abilitato, quindi fare clic su OK.

6. Fate clic su Salva tutto.

Crea finestra di dialogo Modifica geoloc

Il componente per l’archivio di contesto richiede una finestra di dialogo di modifica. La finestra di dialogo di modifica geoloc conterrà un messaggio statico che indica che non sono presenti proprietà da configurare.

1. Fare clic con il pulsante destro del mouse sul nodo /libs/cq/personalization/components/contextstores/genericstoreproperties/dialog e scegliere Copia.

2. Fare clic con il pulsante destro del mouse sul nodo /apps/myapp/contextstores/geoloc e fare clic su Incolla.

3. Elimina tutti i nodi secondari sotto il nodo /apps/myapp/contextstores/geoloc/dialog/items/items/tab1/items:

   • store
   • proprietà
   • thumbnail

4. Fare clic con il pulsante destro del mouse sul nodo /apps/myapp/contextstores/geoloc/dialog/items/items/tab1/items e scegliere Crea > Crea nodo. Specificate i seguenti valori di proprietà e fate clic su OK:

   • Nome: static
   • Tipo: cq:Widget

5. Aggiungi le seguenti proprietà al nodo:

   Nome	Tipo	Valore
   cls	Stringa	x-form-field-description
   testo	Stringa	Il componente geoloc non richiede alcuna configurazione.
   xtype	Stringa	statici

6. Fate clic su Salva tutto.

   

Creare lo script di inizializzazione

Aggiungete un file init.js.jsp al componente geoloc e utilizzatelo per creare lo store della sessione, recuperare i dati sulla posizione e aggiungerlo allo store.

Il file init.js.jsp viene eseguito quando ClientContext viene caricato dalla pagina. A questo punto, l'API JavaScript ClientContext viene caricata e disponibile per lo script.

1. Fate clic con il pulsante destro del mouse sul nodo /apps/myapp/contextstores/geoloc e scegliete Crea > Crea file. Specificate il Nome di init.js.jsp e fate clic su OK.

2. Aggiungete il codice seguente nella parte superiore della pagina, quindi fate clic su Salva tutto.

   <%@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 ************"); %>
   

Eseguire il rendering dei dati dell'archivio delle sessioni geoloc

Aggiungete il codice al file JSP del componente geoloc per eseguire il rendering dei dati dello store in ClientContext.

1. In CRXDE Lite , aprire il file /apps/myapp/contextstores/geoloc/geoloc.jsp.

2. Aggiungete il seguente codice HTML sotto il codice stub:

   <%@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>
   

3. Fate clic su Salva tutto.

Aggiungere il componente al contesto client

Aggiungete il componente Location Store al ClientContext in modo che venga inizializzato al caricamento della pagina.

1. Aprite la home page dei Geometrixx Outdoors nell'istanza di creazione (https://localhost:4502/content/geometrixx-outdoors/en.html).

2. Fate clic su Ctrl+Alt+C (Windows) o Ctrl+Opzione+C (Mac) per aprire Client Context.

3. Fate clic sull'icona di modifica nella parte superiore di ClientContext per aprire ClientContext Designer.

   

4. Trascinate il componente Location Store in ClientContext.

Vedere Informazioni sulla posizione nel contesto client

Aprite la home page dei Geometrixx Outdoors in modalità di modifica, quindi aprite ClientContext per visualizzare i dati dal componente Location Store.

1. Aprite la pagina inglese del sito Geometrixx Outdoors. (https://localhost:4502/content/geometrixx-outdoors/en.html)
2. Per aprire ClientContext, premete Ctrl+Alt+C (Windows) o Ctrl+Opzione+C (Mac).

Creazione di un contesto client personalizzato

Per creare un secondo contesto client è necessario duplicare il ramo:

/etc/clientcontext/default

• La sottocartella:
  /content
  conterrà il contenuto del contesto client personalizzato.

• La cartella:
  /contextstores
  consente di definire configurazioni diverse per gli store contestuali.

Per utilizzare il contesto personalizzato del cliente, modificare la proprietà
path
nello stile di progettazione del componente contesto client, come incluso nel modello di pagina. Ad esempio, come posizione standard di:
/libs/cq/personalization/components/clientcontext/design_dialog/items/path