Grids

Una cuadrícula representa una lista de proveedores e inventario, y muestra los detalles mediante una interfaz de usuario interactiva y reservable. La cuadrícula permite mostrar cualquier inventario de su lista seleccionada o búsqueda guardada. Un usuario interactúa con una cuadrícula de la misma manera que interactúa con una persona.tarjetacon una característica adicional:

Navegue por la cuadrícula haciendo clic en elShow more botón (cuando haya más artículos disponibles).

Vista previa de la cuadrícula — *Cuadrícula que muestra varios tipos de habitaciones*

Arriba hay un ejemplo de nuestra cuadrícula que muestra una lista de tarjetas de tipo de habitación.

El resto de este artículo le mostrará cómo crear, personalizar y exponer la cuadrícula a sus usuarios.

Tipos de cuadrícula

Hay tres tipos de cuadrículas:

Cuadrícula basada en unalista curada.
Cuadrícula basada en unabúsqueda guardada.
Cuadrícula de cuadrícula basada en una ubicación y criterios de ordenación (es decir, cuadrícula clasificada).

Cuadrícula de listas curadas

Esta es una cuadrícula que utiliza el inventario que ha recopilado en una de sus listas seleccionadas y convierte la lista en un inventario de viajes reservables que puede mostrar a sus usuarios.

Crear

Navegar aInventory > Curated ListsDesde la barra de navegación principal. Para este ejemplo, usaremos suFavoriteslista. Si aún no has añadido nada a tu listaFavorites, ir a Buscarpara aprender cómo.

Haga clic en el Actions botón en el Favorites lista.
Haga clic en el Create a grid botón.
Se mostrará una nueva ventana que le permitirá nombrar su cuadrícula. Vea abajo.
Hacer clic OK botón para continuar.

Tu cuadrícula ha sido creada. Navega aTools > Gridsdesde la barra de navegación principal y haga clic en elCurated GridsPestaña para ver su nueva cuadrícula.

Personalizar

El formulario le permite personalizar su cuadrícula de las siguientes maneras:

Dale un nombre para que puedas recordar de qué se trata la cuadrícula.
Seleccione el Personalización desea aplicar a esta cuadrícula.
Seleccione la cara inicial de la tarjeta que desea que los usuarios vean primero. Por defecto, es la cara nativa de ese inventario.
Seleccione la insignia que desea usar en la tarjeta. Una insignia permite a los usuarios comparar el inventario según una métrica agregada, como eco-friendly.
Agregue palabras clave, separadas por una coma, que serán utilizadas por Rastreadores web.
Agrega títulos y descripciones en los idiomas que quieres que el usuario vea.
Haga clic en el Save botón para continuar.

Cuadrícula de listas curadas — *Entrada de cuadrícula de lista curada con menú de acciones contraído*

Arriba se muestra una imagen con todas las acciones disponibles para su cuadrícula:

ActualizarActualiza la configuración de tu red.
Añadir a WinkLinksAgrega la cuadrícula a tu cuenta de WinkLinks.
EmpotrarLe muestra cómo incrustar esta cuadrícula como unaReden su sitio web.
Usar con WordPressLe muestra cómo utilizar nuestroComplemento de WordPresspara incrustar esta cuadrícula en su sitio web.

A continuación, abordaremos algunas de estas opciones con más detalle.

Empotrar

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

Aquí te explicamos cómo integrar tu cuadrícula en tu sitio:

La línea 3 le muestra cómo integrar los estilos Wink en su sitio.
Las líneas 6 a 9 le muestran cómo utilizar elcargador de contenido de winkComponente web y dígale que busque una cuadrícula para su código.
La línea 11 le muestra cómo integrar nuestro Javascript en su sitio.
La línea 13 le muestra cómo incrustar elCargador de aplicaciones winkComponente web y dígale que obtenga sus preferencias de configuración a nivel de página.

Cuadrícula de búsqueda guardada

Esta es una cuadrícula que utiliza el inventario de su consulta de búsqueda guardada y convierte los resultados de la búsqueda en un inventario de viajes reservables que puede mostrar a sus usuarios.

Crear

Navegar aInventory > Saved searchesDesde la barra de navegación principal. Si aún no has creado una búsqueda guardada, ve aBuscarpara aprender cómo.

Haga clic en el Actions botón en su búsqueda guardada.
Haga clic en el Create a grid botón.
Se mostrará una nueva ventana que le permitirá nombrar su cuadrícula. Vea abajo.

Haga clicOKbotón para continuar.

Tu cuadrícula ha sido creada. Navega aTools > Gridsdesde la barra de navegación principal y haga clic en elSaved Search GridsPestaña para ver su nueva cuadrícula.

Personalizar

El formulario le permite personalizar su cuadrícula de las siguientes maneras:

Dale un nombre para que puedas recordar de qué se trata la cuadrícula.
Seleccione el Personalización desea aplicar a esta cuadrícula.
Seleccione la cara inicial de la tarjeta que desea que los usuarios vean primero. Por defecto, es la cara nativa de ese inventario.
Seleccione la insignia que desea usar en la tarjeta. Una insignia permite a los usuarios comparar el inventario según una métrica agregada, como eco-friendly.
Agregue palabras clave, separadas por una coma, que serán utilizadas por Rastreadores web.
Agrega títulos y descripciones en los idiomas que quieres que el usuario vea.
Haga clic en el Save botón para continuar.

Cuadrícula de búsqueda guardada — *Entrada de cuadrícula de búsqueda guardada con menú de acciones contraído*

Empotrar

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

Aquí te explicamos cómo integrar tu cuadrícula en tu sitio:

La línea 3 le muestra cómo integrar los estilos Wink en su sitio.
Las líneas 6 a 9 le muestran cómo utilizar elcargador de contenido de winkComponente web y dígale que busque una cuadrícula para su código.
La línea 11 le muestra cómo integrar nuestro Javascript en su sitio.
La línea 13 le muestra cómo incrustar elCargador de aplicaciones winkComponente web y dígale que obtenga sus preferencias de configuración a nivel de página.

Cuadrícula clasificada

Crear

Crea una cuadrícula clasificada navegando aTools > Gridsy haga clic en elRanked Gridpestaña. Haga clic en elCreate ranked grid botón.

Personalizar

El formulario le permite personalizar su cuadrícula de clasificación de las siguientes maneras:

Elige un destino. Por ejemplo, Tokio.
Dale un nombre para que puedas recordar de qué se trata la cuadrícula. Por ejemplo, hoteles ecológicos en Tokio.
Seleccione el Personalización desea aplicar a esta cuadrícula.
Seleccione la cara inicial de la tarjeta que desea que los usuarios vean primero. Por defecto, es la cara nativa de ese inventario.
Elija por qué característica ordenar las propiedades. Por ejemplo, respeto al medio ambiente.
Agregue palabras clave, separadas por una coma, que serán utilizadas por Rastreadores web.
Agrega títulos y descripciones en los idiomas que quieres que el usuario vea.
Haga clic en el Save botón para continuar.

Después de guardar su cuadrícula clasificatoria, será redirigido a su página de cuadrículas clasificatorias y su cuadrícula ahora estará lista para ser compartida con el mundo.

Cuadrícula clasificada — *Una cuadrícula clasificada con un menú de acciones contraído*

Arriba se muestra una imagen con todas las acciones disponibles para su cuadrícula de clasificación:

ActualizarActualiza la configuración de tu red.
Añadir a WinkLinksAgrega la cuadrícula clasificada a su cuenta de WinkLinks.
EmpotrarLe muestra cómo incrustar esta cuadrícula como unaReden su sitio web.
Usar con WordPressLe muestra cómo utilizar nuestroComplemento de WordPresspara incrustar esta tarjeta en su sitio web.

A continuación, abordaremos algunas de estas opciones con más detalle.

Empotrar

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

Aquí te explicamos cómo integrar tu cuadrícula en tu sitio:

La línea 3 le muestra cómo integrar los estilos Wink en su sitio.
Las líneas 6 a 9 le muestran cómo utilizar elcargador de contenido de winkComponente web y dígale que obtenga una cuadrícula clasificada para su código.
La línea 11 le muestra cómo integrar nuestro Javascript en su sitio.
La línea 13 le muestra cómo incrustar elCargador de aplicaciones winkComponente web y dígale que obtenga sus preferencias de configuración a nivel de página.

API

Los desarrolladores que quieran administrar redes pueden dirigirse aDesarrolladores > API > Inventario.

Lectura adicional

Conozca más sobre nuestra colección deComponentes web.
Obtenga más información sobre elPlugin Wink para WordPress.

Grids

Tipos de cuadrícula

Cuadrícula de listas curadas

Crear

Personalizar

Compartir

Empotrar

Cuadrícula de búsqueda guardada

Crear

Personalizar

Compartir

Empotrar

Cuadrícula clasificada

Crear

Personalizar

Compartir

Empotrar

API

Lectura adicional