Cuadrículas

Una cuadrícula representa una lista de proveedores e inventario y expone los detalles a través de una interfaz interactiva y reservable en forma de cuadrícula. La cuadrícula admite mostrar cualquier inventario de tu lista seleccionada o búsqueda guardada. Un usuario interactúa con una cuadrícula de la misma manera que interactúa con una tarjeta individual, con una característica adicional:

Paginación a través de la cuadrícula haciendo clic en el botón Mostrar más (cuando hay más elementos disponibles).

Vista previa de cuadrícula — *Cuadrícula mostrando múltiples tipos de habitación*

Arriba hay un ejemplo de nuestra cuadrícula mostrando una lista de tarjetas de tipos de habitación.

El resto de este artículo te guía sobre cómo crear, personalizar y exponer la cuadrícula a tus usuarios.

Tipos de cuadrículas

Hay tres tipos de cuadrículas:

Cuadrícula basada en una lista seleccionada.
Cuadrícula basada en una búsqueda guardada.
Cuadrícula basada en una ubicación y criterios de ordenación (es decir, Cuadrícula clasificada).

Cuadrícula de lista seleccionada

Esta es una cuadrícula que utiliza el inventario que has recopilado en una de tus listas seleccionadas y convierte la lista en inventario de viaje reservable que puedes mostrar a tus usuarios.

Crear

Navega a Inventario > Listas seleccionadas desde la barra de navegación principal. Para este ejemplo, usaremos tu lista Favoritos. Si aún no has agregado nada a tus Favoritos, ve a Buscar para aprender cómo hacerlo.

Haz clic en el botón Acciones en la lista Favoritos.
Haz clic en el botón Crear una cuadrícula.
Se mostrará una nueva ventana que te permitirá nombrar tu cuadrícula. Ver más abajo.
Haz clic en el botón OK para continuar.

Tu cuadrícula ha sido creada. Navega a Herramientas > Cuadrículas desde la barra de navegación principal y haz clic en la pestaña Cuadrículas seleccionadas para ver tu nueva cuadrícula.

Personalizar

El formulario te permite personalizar tu cuadrícula de las siguientes maneras:

Dale un nombre para que recuerdes de qué trata la cuadrícula.
Selecciona la Personalización que deseas aplicar a esta cuadrícula.
Selecciona la cara inicial de la tarjeta que quieres que los usuarios vean primero. Por defecto, es la cara nativa de ese inventario.
Selecciona la insignia que quieres usar en la tarjeta. Una insignia permite a los usuarios comparar inventario según una métrica agregada como eco-amigable.
Añade palabras clave, separadas por comas, que serán usadas por los Web Crawlers.
Añade títulos y descripciones en los idiomas que quieres que el usuario vea.
Haz clic en el botón Guardar para continuar.

Cuadrícula de lista seleccionada — *Entrada de cuadrícula de lista seleccionada con menú de acciones colapsado*

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

Actualizar Actualiza la configuración de tu cuadrícula.
Agregar a WinkLinks Añade la cuadrícula a tu cuenta de WinkLinks.
Incrustar Te muestra cómo incrustar esta cuadrícula como un Grid en tu sitio web.
Usar con WordPress Te muestra cómo usar nuestro plugin de WordPress para incrustar esta cuadrícula en tu sitio web.

Cubrimos algunas de estas opciones con más detalle a continuación.

Incrustar

<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 mostramos cómo incrustar tu cuadrícula en tu sitio:

La línea 3 muestra cómo incrustar los estilos de Wink en tu sitio.
Las líneas 6 a 9 muestran cómo usar el Componente Web wink-content-loader y decirle que obtenga una cuadrícula para tu código.
La línea 11 muestra cómo incrustar nuestro Javascript en tu sitio.
La línea 13 muestra cómo incrustar el Componente Web wink-app-loader y decirle que obtenga tus preferencias de configuración a nivel de página.

Cuadrícula de búsqueda guardada

Esta es una cuadrícula que utiliza el inventario en tu consulta de búsqueda guardada y convierte los resultados de búsqueda en inventario de viaje reservable que puedes mostrar a tus usuarios.

Crear

Navega a Inventario > Búsquedas guardadas desde la barra de navegación principal. Si aún no has creado una búsqueda guardada, ve a Buscar para aprender cómo hacerlo.

Haz clic en el botón Acciones en tu búsqueda guardada.
Haz clic en el botón Crear una cuadrícula.
Se mostrará una nueva ventana que te permitirá nombrar tu cuadrícula. Ver más abajo.

Haz clic en el botón OK para continuar.

Tu cuadrícula ha sido creada. Navega a Herramientas > Cuadrículas desde la barra de navegación principal y haz clic en la pestaña Cuadrículas de búsqueda guardada para ver tu nueva cuadrícula.

Personalizar

El formulario te permite personalizar tu cuadrícula de las siguientes maneras:

Dale un nombre para que recuerdes de qué trata la cuadrícula.
Selecciona la Personalización que deseas aplicar a esta cuadrícula.
Selecciona la cara inicial de la tarjeta que quieres que los usuarios vean primero. Por defecto, es la cara nativa de ese inventario.
Selecciona la insignia que quieres usar en la tarjeta. Una insignia permite a los usuarios comparar inventario según una métrica agregada como eco-amigable.
Añade palabras clave, separadas por comas, que serán usadas por los Web Crawlers.
Añade títulos y descripciones en los idiomas que quieres que el usuario vea.
Haz clic en el botón Guardar para continuar.

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

Incrustar

<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 mostramos cómo incrustar tu cuadrícula en tu sitio:

La línea 3 muestra cómo incrustar los estilos de Wink en tu sitio.
Las líneas 6 a 9 muestran cómo usar el Componente Web wink-content-loader y decirle que obtenga una cuadrícula para tu código.
La línea 11 muestra cómo incrustar nuestro Javascript en tu sitio.
La línea 13 muestra cómo incrustar el Componente Web wink-app-loader y decirle que obtenga tus preferencias de configuración a nivel de página.

Cuadrícula clasificada

Crear

Crea una cuadrícula clasificada navegando a Herramientas > Cuadrículas y haz clic en la pestaña Cuadrícula clasificada. Haz clic en el botón Crear cuadrícula clasificada.

Personalizar

El formulario te permite personalizar tu cuadrícula clasificada de las siguientes maneras:

Elige un destino. Ej. Tokio.
Dale un nombre para que recuerdes de qué trata la cuadrícula. Ej. Hoteles eco-amigables en Tokio
Selecciona la Personalización que deseas aplicar a esta cuadrícula.
Selecciona la cara inicial de la tarjeta que quieres que los usuarios vean primero. Por defecto, es la cara nativa de ese inventario.
Elige qué característica usar para ordenar las propiedades. Ej. Eco-amigabilidad.
Añade palabras clave, separadas por comas, que serán usadas por los Web Crawlers.
Añade títulos y descripciones en los idiomas que quieres que el usuario vea.
Haz clic en el botón Guardar para continuar.

Después de guardar tu cuadrícula clasificada, serás redirigido a la página de tus cuadrículas clasificadas y tu cuadrícula estará lista para ser compartida con el mundo.

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

Actualizar Actualiza la configuración de tu cuadrícula.
Agregar a WinkLinks Añade la cuadrícula clasificada a tu cuenta de WinkLinks.
Incrustar Te muestra cómo incrustar esta cuadrícula como un Grid en tu sitio web.
Usar con WordPress Te muestra cómo usar nuestro plugin de WordPress para incrustar esta tarjeta en tu sitio web.

Cubrimos algunas de estas opciones con más detalle a continuación.

Incrustar

<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 mostramos cómo incrustar tu cuadrícula en tu sitio:

La línea 3 muestra cómo incrustar los estilos de Wink en tu sitio.
Las líneas 6 a 9 muestran cómo usar el Componente Web wink-content-loader y decirle que obtenga una cuadrícula clasificada para tu código.
La línea 11 muestra cómo incrustar nuestro Javascript en tu sitio.
La línea 13 muestra cómo incrustar el Componente Web wink-app-loader y decirle que obtenga tus preferencias de configuración a nivel de página.

API

Los desarrolladores que quieran gestionar cuadrículas pueden dirigirse a Desarrolladores > API > Inventario.

Lecturas adicionales

Aprende más sobre nuestra colección de Componentes Web.
Aprende más sobre el plugin de WordPress de Wink.

Cuadrículas

Tipos de cuadrículas

Cuadrícula de lista seleccionada

Crear

Personalizar

Compartir

Incrustar

Cuadrícula de búsqueda guardada

Crear

Personalizar

Compartir

Incrustar

Cuadrícula clasificada

Crear

Personalizar

Compartir

Incrustar

API

Lecturas adicionales