Grilles

Une grille représente une liste de fournisseurs et d’inventaire et expose les détails via une interface interactive et réservable sous forme de grille. La grille prend en charge l’affichage de tout inventaire issu de votre liste sélectionnée ou de votre recherche enregistrée. Un utilisateur interagit avec une grille de la même manière qu’avec une carte individuelle, avec une fonctionnalité supplémentaire :

Paginer dans la grille en cliquant sur le bouton Afficher plus (lorsque d’autres éléments sont disponibles).

Aperçu de la grille — *Grille affichant plusieurs types de chambres*

Ci-dessus un exemple de notre grille affichant une liste de cartes de types de chambres.

Le reste de cet article vous guide pour créer, personnaliser et exposer la grille à vos utilisateurs.

Types de grilles

Il existe trois types de grilles :

Grille basée sur une liste sélectionnée.
Grille basée sur une recherche enregistrée.
Grille basée sur un lieu et des critères de tri (c’est-à-dire une grille classée).

Grille de liste sélectionnée

Il s’agit d’une grille qui utilise l’inventaire que vous avez collecté dans l’une de vos listes sélectionnées et convertit la liste en inventaire de voyage réservable que vous pouvez montrer à vos utilisateurs.

Créer

Naviguez vers Inventaire > Listes sélectionnées depuis la barre de navigation principale. Pour cet exemple, nous utiliserons votre liste Favoris. Si vous n’avez pas encore ajouté d’éléments à vos Favoris, rendez-vous sur Recherche pour apprendre comment faire.

Cliquez sur le bouton Actions de la liste Favoris.
Cliquez sur le bouton Créer une grille.
Une nouvelle fenêtre s’affichera, vous permettant de nommer votre grille. Voir ci-dessous.
Cliquez sur le bouton OK pour continuer.

Votre grille a été créée. Naviguez vers Outils > Grilles depuis la barre de navigation principale et cliquez sur l’onglet Grilles sélectionnées pour voir votre nouvelle grille.

Personnaliser

Le formulaire vous permet de personnaliser votre grille de la manière suivante :

Donnez-lui un nom pour vous souvenir du sujet de la grille.
Sélectionnez la Personnalisation que vous souhaitez appliquer à cette grille.
Sélectionnez la face initiale de la carte que vous voulez que les utilisateurs voient en premier. Par défaut, c’est la face native de cet inventaire.
Sélectionnez le badge que vous souhaitez utiliser sur la carte. Un badge permet aux utilisateurs de comparer l’inventaire selon une métrique agrégée telle que écologique.
Ajoutez des mots-clés, séparés par une virgule, qui seront utilisés par les robots d’indexation.
Ajoutez des titres et descriptions dans les langues que vous souhaitez que l’utilisateur voie.
Cliquez sur le bouton Enregistrer pour continuer.

Grille de liste sélectionnée — *Entrée de grille de liste sélectionnée avec menu d’actions replié*

L’image ci-dessus vous montre toutes les actions disponibles pour votre grille :

Mettre à jour Met à jour la configuration de votre grille.
Ajouter à WinkLinks Ajoute la grille à votre compte WinkLinks.
Intégrer Vous montre comment intégrer cette grille en tant que Grille dans votre site web.
Utiliser avec WordPress Vous montre comment utiliser notre plugin WordPress pour intégrer cette grille dans votre site web.

Nous détaillons certaines de ces options ci-dessous.

Intégrer

<html>
  <head>
    <link rel="stylesheet" href="https://elements.wink.travel/styles.css"></link>
  </head>
  <body>
    <wink-content-loader
       layout="LIST"
       id="9a212b5e-62a7-11ef-ac3f-42004e494300"
    ></wink-content-loader>

    <script src="https://elements.wink.travel/elements.js" type="module" defer></script>

    <wink-app-loader
      client-id="YOUR CLIENT ID GOES HERE"
      configuration-id="YOUR CUSTOMIZATION ID GOES HERE"
    ></wink-app-loader>
  </body>
</html>

Voici comment intégrer votre grille dans votre site :

La ligne 3 montre comment intégrer les styles Wink dans votre site.
Les lignes 6 à 9 montrent comment utiliser le composant Web wink-content-loader et lui indiquer de récupérer une grille pour votre code.
La ligne 11 montre comment intégrer notre Javascript dans votre site.
La ligne 13 montre comment intégrer le composant Web wink-app-loader et lui indiquer de récupérer vos préférences de configuration au niveau de la page.

Grille de recherche enregistrée

Il s’agit d’une grille qui utilise l’inventaire de votre requête de recherche enregistrée et convertit les résultats de recherche en inventaire de voyage réservable que vous pouvez montrer à vos utilisateurs.

Créer

Naviguez vers Inventaire > Recherches enregistrées depuis la barre de navigation principale. Si vous n’avez pas encore créé de recherche enregistrée, rendez-vous sur Recherche pour apprendre comment faire.

Cliquez sur le bouton Actions de votre recherche enregistrée.
Cliquez sur le bouton Créer une grille.
Une nouvelle fenêtre s’affichera, vous permettant de nommer votre grille. Voir ci-dessous.

Cliquez sur le bouton OK pour continuer.

Votre grille a été créée. Naviguez vers Outils > Grilles depuis la barre de navigation principale et cliquez sur l’onglet Grilles de recherche enregistrée pour voir votre nouvelle grille.

Personnaliser

Le formulaire vous permet de personnaliser votre grille de la manière suivante :

Donnez-lui un nom pour vous souvenir du sujet de la grille.
Sélectionnez la Personnalisation que vous souhaitez appliquer à cette grille.
Sélectionnez la face initiale de la carte que vous voulez que les utilisateurs voient en premier. Par défaut, c’est la face native de cet inventaire.
Sélectionnez le badge que vous souhaitez utiliser sur la carte. Un badge permet aux utilisateurs de comparer l’inventaire selon une métrique agrégée telle que écologique.
Ajoutez des mots-clés, séparés par une virgule, qui seront utilisés par les robots d’indexation.
Ajoutez des titres et descriptions dans les langues que vous souhaitez que l’utilisateur voie.
Cliquez sur le bouton Enregistrer pour continuer.

Grille de recherche enregistrée — *Entrée de grille de recherche enregistrée avec menu d’actions replié*

Intégrer

<html>
  <head>
    <link rel="stylesheet" href="https://elements.wink.travel/styles.css"></link>
  </head>
  <body>
    <wink-content-loader
       layout="LIST"
       id="be3130d5-62a7-11ef-ac3f-42004e494300"
    ></wink-content-loader>

    <script src="https://elements.wink.travel/elements.js" type="module" defer></script>

    <wink-app-loader
      client-id="YOUR CLIENT ID GOES HERE"
      configuration-id="YOUR CUSTOMIZATION ID GOES HERE"
    ></wink-app-loader>
  </body>
</html>

Voici comment intégrer votre grille dans votre site :

La ligne 3 montre comment intégrer les styles Wink dans votre site.
Les lignes 6 à 9 montrent comment utiliser le composant Web wink-content-loader et lui indiquer de récupérer une grille pour votre code.
La ligne 11 montre comment intégrer notre Javascript dans votre site.
La ligne 13 montre comment intégrer le composant Web wink-app-loader et lui indiquer de récupérer vos préférences de configuration au niveau de la page.

Grille classée

Créer

Créez une grille classée en naviguant vers Outils > Grilles et cliquez sur l’onglet Grille classée. Cliquez sur le bouton Créer une grille classée.

Personnaliser

Le formulaire vous permet de personnaliser votre grille classée de la manière suivante :

Choisissez une destination. Ex. Tokyo.
Donnez-lui un nom pour vous souvenir du sujet de la grille. Ex. Hôtels écologiques à Tokyo
Sélectionnez la Personnalisation que vous souhaitez appliquer à cette grille.
Sélectionnez la face initiale de la carte que vous voulez que les utilisateurs voient en premier. Par défaut, c’est la face native de cet inventaire.
Choisissez la caractéristique selon laquelle trier les propriétés. Ex. Écologie.
Ajoutez des mots-clés, séparés par une virgule, qui seront utilisés par les robots d’indexation.
Ajoutez des titres et descriptions dans les langues que vous souhaitez que l’utilisateur voie.
Cliquez sur le bouton Enregistrer pour continuer.

Après avoir enregistré votre grille classée, vous êtes redirigé vers votre page de grilles classées et votre grille est maintenant prête à être partagée avec le monde.

L’image ci-dessus vous montre toutes les actions disponibles pour votre grille classée :

Mettre à jour Met à jour la configuration de votre grille.
Ajouter à WinkLinks Ajoute la grille classée à votre compte WinkLinks.
Intégrer Vous montre comment intégrer cette grille en tant que Grille dans votre site web.
Utiliser avec WordPress Vous montre comment utiliser notre plugin WordPress pour intégrer cette carte dans votre site web.

Nous détaillons certaines de ces options ci-dessous.

Intégrer

<html>
  <head>
    <link rel="stylesheet" href="https://elements.wink.travel/styles.css"></link>
  </head>
  <body>
    <wink-content-loader
       layout="RANKED"
       id="2483d55e-62a5-11ef-ac3f-42004e494300"
    ></wink-content-loader>

    <script src="https://elements.wink.travel/elements.js" type="module" defer></script>

    <wink-app-loader
      client-id="YOUR CLIENT ID GOES HERE"
      configuration-id="YOUR CUSTOMIZATION ID GOES HERE"
    ></wink-app-loader>
  </body>
</html>

Voici comment intégrer votre grille dans votre site :

La ligne 3 montre comment intégrer les styles Wink dans votre site.
Les lignes 6 à 9 montrent comment utiliser le composant Web wink-content-loader et lui indiquer de récupérer une grille classée pour votre code.
La ligne 11 montre comment intégrer notre Javascript dans votre site.
La ligne 13 montre comment intégrer le composant Web wink-app-loader et lui indiquer de récupérer vos préférences de configuration au niveau de la page.

API

Les développeurs qui souhaitent gérer les grilles peuvent se rendre sur Développeurs > API > Inventaire.

Lectures complémentaires

En savoir plus sur notre collection de Composants Web.
En savoir plus sur le plugin WordPress Wink.

Grilles

Types de grilles

Grille de liste sélectionnée

Créer

Personnaliser

Partager

Intégrer

Grille de recherche enregistrée

Créer

Personnaliser

Partager

Intégrer

Grille classée

Créer

Personnaliser

Partager

Intégrer

API

Lectures complémentaires