{ "Items": [
{ "Name": "Product 1", "Description": "A product description" },
{ "Name": "Product 2", "Description": "A product description" },
{ "Name": "Product 3", "Description": "A product description" }
]}
Connecteurs de données dynamiques
Il y a de nombreux scénarios dans lesquels vous pouvez avoir besoin d'afficher des données dynamiques sur votre site Web statique.
Les connecteurs peuvent être utiles pour afficher des avis utilisateurs sur des pages de produits, des offres d'emploi ou des commentaires utilisateurs.
Fonctionnement général
Techniquement, les connecteurs sont des appels à des ressources JSON (API ou fichiers statiques) disponibles sur Internet.
Lorsqu'un visiteur affiche la page qui contient un connecteur, une requête AJAX est envoyée vers la ressource pour obtenir les données et construire dynamiquement la page.
Les données sont donc chargées dynamiquement à chaque visite, contrairement aux pages du site, qui sont statiques et générées à un instant donné.
Créer un premier connecteur
Pour fonctionner correctement, les ressources utilisées dans les connecteurs doivent respecter un format spécifique.
Un nœud parent doit être nommé "Items", lequel doit contenir un ensemble de nœuds dont les propriétés sont libres.
Dans cet exemple, le nœud parent contient 3 éléments possédant une propriété "Name" et une propriété "Description".
Créez une API (ou un fichier JSON à plat) et déployez-la à un endroit accessible par les visiteurs de votre site Web.
La technologie utilisée n'a pas d'impact, seul le flux de données retourné est important.
Dans cet article, nous allons utiliser l'adresse https://api.getpagefabric.com/test1 .
Notez : Créer et déployer des API ou des fichiers JSON sur Internet peut nécessiter de faire appel à un hébergeur Web, ce qui peut engendrer des frais d'utilisation.
Enregistrer le connecteur dans PageFabric
Pour enregistrer un connecteur, cliquez sur Site > Connecteur dans le ruban.
Dans la fenêtre des connecteurs, cliquez sur Ajouter pour ajouter un nouveau connecteur au site Web.
Dans la fenêtre d'édition d'un connecteur, procédez comme suit :
- Indiquez un nom pour votre connecteur. Il ne sera pas affiché.
- Indiquez l'adresse de l'API à appeler pour obtenir les données JSON.
- Cliquez sur Actualiser les champs pour mettre à jour les champs du connecteur.
- Cliquez sur Enregistrer et fermer.
Créer votre page
Pour attacher un connecteur à des éléments de page, procédez comme suit :
1. Déposez un conteneur de cartes sur la page
2. Déposez une carte dans le conteneur
3. Sélectionnez le conteneur de cartes et affichez le panneau des propriétés de l'élément (ou appuyez sur Alt+I)
4. Dépliez la zone Liaisons de données, puis cliquez sur le bouton Sélectionnez un connecteur
5. Sélectionnez la carte que vous avez positionné en étape 2
6. Affichez le panneau des propriétés de l'élément (ou appuyez sur Alt+I)
7. Dépliez la zone Liaisons de données, puis activez l'option Utiliser en tant que template
8. Sélectionnez une zone de texte à l'intérieur de la carte
9. Affichez le panneau des propriétés de l'élément (ou appuyez sur Alt+I)
10. Dépliez la zone Liaisons de données, puis sélectionnez le champ de données du connecteur que vous souhaitez afficher à cet emplacement.
Exemple en direct
Ce conteneur de cartes obtient ses données JSON depuis la source https://api.getpagefabric.com/test1.
{Name}
{Description}