Ajoutez ContextHub à vos pages pour activer les fonctionnalités ContextHub et créer un lien vers les bibliothèques JavaScript ContextHub.
L’API JavaScript ContextHub permet d’accéder aux données contextuelles gérées par ContextHub. Cette page décrit brièvement les principales fonctionnalités de l’API pour accéder à des données contextuelles et les manipuler. Suivez les liens vers la documentation de référence de l’API pour consulter des informations détaillées et des exemples de code.
Pour activer les fonctionnalités et créer un lien vers les bibliothèques JavaScript ContextHub, insérez le composant contexthub
dans la section head
de votre page. Le code HTL de votre composant de page devrait ressembler à ceci :
<sly data-sly-resource="${'contexthub' @ resourceType='granite/contexthub/components/contexthub'}"/>
Notez que vous devez également déterminer si la barre d’outils ContextHub apparaît ou non dans le mode Aperçu. Voir Affichage et masquage de l’IU ContextHub.
Utilisez des magasins ContextHub pour conserver des données contextuelles. ContextHub fournit les types de magasins suivants, qui constituent la base de tous les types :
Tous les types de magasins sont des extensions de la classe ContextHub.Store.Core
. Pour plus d’informations sur la création d’un type de magasin, voir Création de magasins personnalisés. Pour plus d’informations sur les exemples de types de magasins, voir Exemples de candidats au titre de magasins ContextHub.
Les magasins ContextHub utilisent l’un des modes de persistance suivants :
Par défaut, ContextHub utilise le mode de persistance Local. Si le navigateur ne prend pas en charge ni n’autorise HTML5 localStorage, la persistance de session est utilisée. Si le navigateur ne prend pas en charge ni n’autorise HTML5 sessionStorage, la persistance Window.name est utilisée.
En interne, les données de magasin forment une structure arborescente, ce qui permet d’ajouter des valeurs en tant qu’objets complexes ou que types principaux. Lorsque vous ajoutez des objets complexes à des magasins, leurs propriétés forment des branches dans l’arborescence de données. Par exemple, l’objet complexe suivant est ajouté à un magasin vide nommé location :
Object {
number: 321,
data: {
city: "Basel",
country: "Switzerland",
details: {
population: 173330,
elevation: 260
}
}
}
La structure arborescente du magasin peut être conceptualisée comme suit :
/
|- number
|- data
|- city
|- country
|- details
|- population
|- elevation
La structure arborescente définit les éléments de données du magasin sous la forme de paires clé/valeur. Dans l’exemple ci-dessus, la clé /number
correspond à la valeur 321
et la clé /data/country
à la valeur Switzerland
.
ContextHub fournit la classe ContextHub.Utils.JSON.tree
pour manipuler des objets JavaScript. Utilisez les fonctions de cette classe pour manipuler des objets JavaScript avant de les ajouter à un magasin ou après les avoir récupérés d’un magasin.
En outre, la classe ContextHub.Utils.JSON
fournit des fonctions pour sérialiser des objets en chaînes et désérialiser des chaînes en objets. Utilisez cette classe pour gérer les données JSON afin de prendre en charge les navigateurs qui n’intègrent pas, en natif, les fonctions JSON.parse
et JSON.stringify
.
Utilisez l’objet JavaScript ContextHub
pour obtenir un magasin comme objet JavaScript. Une fois que vous avez obtenu l’objet de magasin, vous pouvez manipuler les données qu’il contient. Utilisez la fonction getAllStores
ou getStore
pour obtenir le magasin.
La classe JavaScript ContexHub.Store.Core
définit plusieurs fonctions permettant d’interagir avec les données du magasin. Les fonctions suivantes stockent et récupèrent plusieurs éléments de données contenus dans des objets :
Les différents éléments de données sont stockés sous la forme d’un ensemble de paires clé/valeur. Pour stocker et récupérer des valeurs, spécifiez la clé correspondante :
Notez que les magasins candidats personnalisés peuvent définir des fonctions supplémentaires qui permettent d’accéder aux données du magasin.
Par défaut, ContextHub ne connaît pas les utilisateurs et utilisatrices actuellement connectés sur les serveurs de publication. Il considère ces utilisateurs et utilisatrices comme étant « anonymes ».
Vous pouvez sensibiliser ContextHub aux utilisateurs connectés en chargeant le magasin de profils. Consultez l’exemple de code sur GitHub ici.
ContextHub comprend un framework d’événements qui vous permet de répondre automatiquement aux événements du magasin. Chaque objet du magasin contient un objet ContextHub.Utils.Eventing
disponible sous la forme d’une propriété eventing
du magasin. Utilisez la fonction on
ou once
pour lier une fonction JavaScript à un événement de magasin.
L’API JavaScript ContextHub offre une prise en charge de plusieurs navigateurs pour la gestion des cookies de navigateur. L’espace de noms ContextHub.Utils.Cookie
définit plusieurs fonctions permettant de créer, de manipuler et de supprimer des cookies.
Le moteur de segments ContextHub vous permet de déterminer quels segments enregistrés sont résolus dans le contexte actuel. Utilisez la fonction getResolvedSegments de la classe ContextHub.SegmentEngine.SegmentManager
pour récupérer les segments résolus. Utilisez ensuite la fonction getName
ou getPath
de la classe ContextHub.SegmentEngine.Segment
pour tester un segment.
Les segments ContextHub sont installés sous le nœud /conf/<site>/settings/wcm/segments
.
Les segments suivants sont installés avec le site de tutoriel WKND.
Les règles utilisées pour résoudre ces segments sont résumées comme suit :
Les segments installés sont fournis en tant que configurations de référence afin de vous aider à créer votre propre configuration dédiée pour votre projet et, en tant que tels, ne doivent pas être utilisés directement.
Il existe un certain nombre d’options pour déboguer ContextHub, y compris la génération de journaux. Voir Configuration de ContextHub pour plus d’informations.
ContextHub fournit une page de diagnostics qui affiche un aperçu de son framework.