Grids

Une grille représente une liste de fournisseurs et de stocks, et en expose les détails via une interface interactive et réservable. La grille permet d’afficher tout stock provenant de votre liste organisée ou de votre recherche enregistrée. Un utilisateur interagit avec une grille de la même manière qu’il interagit avec un individu.carteavec une fonctionnalité supplémentaire :

Parcourez la grille en cliquant sur le boutonShow more bouton (lorsque plus d’articles sont disponibles).

Aperçu de la grille — *Grille montrant plusieurs types de pièces*

Ci-dessus, un exemple de notre grille montrant une liste de cartes de type de chambre.

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

Types de grilles

Il existe trois types de grilles :

Grille basée sur unliste organisée.
Grille basée sur unrecherche enregistrée.
Grille basée sur un critère de localisation et de tri (c’est-à-dire grille classée).

Grille de liste organisée

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

Créer

Accéder àInventory > Curated Listsdepuis la barre de navigation principale. Pour cet exemple, nous utiliserons votreFavoritesliste. Si vous n’avez encore rien ajouté à votreFavorites, aller àRecherchepour apprendre comment.

Cliquez sur le Actions bouton sur le Favorites liste.
Cliquez sur le Create a grid bouton.
Une nouvelle fenêtre s’affichera, vous permettant de nommer votre grille. Voir ci-dessous.
Cliquez OK bouton pour continuer.

Votre grille a été créée. Accédez àTools > Gridsdepuis la barre de navigation principale et cliquez sur leCurated Gridsonglet pour voir votre nouvelle grille.

Personnaliser

Le formulaire vous permet de personnaliser votre grille des manières suivantes :

Donnez-lui un nom pour vous rappeler de quoi parle la grille.
Sélectionnez le Personnalisation vous souhaitez postuler à cette grille.
Sélectionnez la face de la carte que vous souhaitez montrer en premier aux utilisateurs. Par défaut, il s’agit de la face native de cet inventaire.
Sélectionnez le badge à utiliser sur la carte. Un badge permet aux utilisateurs de comparer l’inventaire selon une mesure globale, telle que eco-friendly.
Ajoutez des mots-clés, séparés par une virgule, qui seront utilisés par Robots d’exploration Web.
Ajoutez des titres et des descriptions dans les langues que vous souhaitez que l’utilisateur voie.
Cliquez sur le Save bouton pour continuer.

Grille de liste organisée — *Entrée de grille de liste organisée avec menu d’actions réduit*

Ci-dessus, vous trouverez une image avec toutes les actions disponibles pour votre grille :

Mise à jourMet à jour la configuration de votre grille.
Ajouter à WinkLinksAjoute la grille à votre compte WinkLinks.
IntégrerVous montre comment intégrer cette grille en tant queGrilledans votre site Web.
Utiliser avec WordPressVous montre comment utiliser notreplugin WordPresspour intégrer cette grille dans votre site Web.

Nous couvrons certaines de ces options, plus en détail, 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 vous montre comment intégrer les styles Wink dans votre site.
Les lignes 6 à 9 vous montrent comment utiliser lechargeur de contenu winkComposant Web et dites-lui de récupérer une grille pour votre code.
La ligne 11 vous montre comment intégrer notre Javascript dans votre site.
La ligne 13 vous montre comment intégrer lechargeur d’application winkComposant Web et dites-lui 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 la recherche en inventaire de voyages réservables que vous pouvez montrer à vos utilisateurs.

Créer

Accéder àInventory > Saved searchesdepuis la barre de navigation principale. Si vous n’avez pas encore créé de recherche enregistrée, accédez àRecherchepour apprendre comment.

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

CliquezOKbouton pour continuer.

Votre grille a été créée. Accédez àTools > Gridsdepuis la barre de navigation principale et cliquez sur leSaved Search Gridsonglet pour voir votre nouvelle grille.

Personnaliser

Le formulaire vous permet de personnaliser votre grille des manières suivantes :

Donnez-lui un nom pour vous rappeler de quoi parle la grille.
Sélectionnez le Personnalisation vous souhaitez postuler à cette grille.
Sélectionnez la face de la carte que vous souhaitez montrer en premier aux utilisateurs. Par défaut, il s’agit de la face native de cet inventaire.
Sélectionnez le badge à utiliser sur la carte. Un badge permet aux utilisateurs de comparer l’inventaire selon une mesure globale, telle que eco-friendly.
Ajoutez des mots-clés, séparés par une virgule, qui seront utilisés par Robots d’exploration Web.
Ajoutez des titres et des descriptions dans les langues que vous souhaitez que l’utilisateur voie.
Cliquez sur le Save bouton pour continuer.

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

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 vous montre comment intégrer les styles Wink dans votre site.
Les lignes 6 à 9 vous montrent comment utiliser lechargeur de contenu winkComposant Web et dites-lui de récupérer une grille pour votre code.
La ligne 11 vous montre comment intégrer notre Javascript dans votre site.
La ligne 13 vous montre comment intégrer lechargeur d’application winkComposant Web et dites-lui de récupérer vos préférences de configuration au niveau de la page.

Grille de classement

Créer

Créez une grille classée en naviguant versTools > Gridset cliquez sur leRanked Gridonglet. Cliquez sur l’ongletCreate ranked grid bouton.

Personnaliser

Le formulaire vous permet de personnaliser votre grille classée des manières suivantes :

Choisissez une destination. Par exemple, Tokyo.
Donnez-lui un nom pour vous rappeler de quoi parle la grille. Par exemple, les hôtels écologiques à Tokyo
Sélectionnez le Personnalisation vous souhaitez postuler à cette grille.
Sélectionnez la face de la carte que vous souhaitez montrer en premier aux utilisateurs. Par défaut, il s’agit de la face native de cet inventaire.
Choisissez la caractéristique par laquelle trier les propriétés. Par exemple, le respect de l’environnement.
Ajoutez des mots-clés, séparés par une virgule, qui seront utilisés par Robots d’exploration Web.
Ajoutez des titres et des descriptions dans les langues que vous souhaitez que l’utilisateur voie.
Cliquez sur le Save bouton 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.

Ci-dessus, vous trouverez une image avec toutes les actions disponibles pour votre grille de classement :

Mise à jourMet à jour la configuration de votre grille.
Ajouter à WinkLinksAjoute la grille classée à votre compte WinkLinks.
IntégrerVous montre comment intégrer cette grille en tant queGrilledans votre site Web.
Utiliser avec WordPressVous montre comment utiliser notreplugin WordPresspour intégrer cette carte dans votre site Web.

Nous couvrons certaines de ces options, plus en détail, 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 vous montre comment intégrer les styles Wink dans votre site.
Les lignes 6 à 9 vous montrent comment utiliser lechargeur de contenu winkComposant Web et dites-lui de récupérer une grille classée pour votre code.
La ligne 11 vous montre comment intégrer notre Javascript dans votre site.
La ligne 13 vous montre comment intégrer lechargeur d’application winkComposant Web et dites-lui de récupérer vos préférences de configuration au niveau de la page.

API

Les développeurs qui souhaitent gérer des grilles peuvent se rendre surDéveloppeurs > API > Inventaire.

Lectures complémentaires

En savoir plus sur notre collection deComposants Web.
En savoir plus sur lePlugin WordPress Wink.

Grids

Types de grilles

Grille de liste organisée

Créer

Personnaliser

Partager

Intégrer

Grille de recherche enregistrée

Créer

Personnaliser

Partager

Intégrer

Grille de classement

Créer

Personnaliser

Partager

Intégrer

API

Lectures complémentaires