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

Paginá a través de la cuadrícula haciendo clic en el botón Mostrar más (cuando haya más ítems 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 ordenamiento (es decir, Cuadrícula clasificada).

Cuadrícula de lista seleccionada

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

Crear

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

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

Tu cuadrícula ha sido creada. Navegá a Herramientas > Cuadrículas desde la barra de navegación principal y hacé 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:

Poné un nombre para recordar de qué se trata la cuadrícula.
Seleccioná la Personalización que querés aplicar a esta cuadrícula.
Seleccioná la cara inicial de la tarjeta que querés que los usuarios vean primero. Por defecto, es la cara nativa de ese inventario.
Seleccioná la insignia que querés usar en la tarjeta. Una insignia permite a los usuarios comparar inventario según una métrica agregada como eco-amigable.
Agregá palabras clave, separadas por comas, que serán usadas por los Web Crawlers.
Agregá títulos y descripciones en los idiomas que querés que el usuario vea.
Hacé 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 Agrega 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 usa el inventario de tu consulta de búsqueda guardada y convierte los resultados de búsqueda en inventario de viaje reservable que podés mostrar a tus usuarios.

Crear

Navegá a Inventario > Búsquedas guardadas desde la barra de navegación principal. Si aún no creaste una búsqueda guardada, visitá Buscar para aprender cómo hacerlo.

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

Hacé clic en el botón OK para continuar.

Tu cuadrícula ha sido creada. Navegá a Herramientas > Cuadrículas desde la barra de navegación principal y hacé 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:

Poné un nombre para recordar de qué se trata la cuadrícula.
Seleccioná la Personalización que querés aplicar a esta cuadrícula.
Seleccioná la cara inicial de la tarjeta que querés que los usuarios vean primero. Por defecto, es la cara nativa de ese inventario.
Seleccioná la insignia que querés usar en la tarjeta. Una insignia permite a los usuarios comparar inventario según una métrica agregada como eco-amigable.
Agregá palabras clave, separadas por comas, que serán usadas por los Web Crawlers.
Agregá títulos y descripciones en los idiomas que querés que el usuario vea.
Hacé 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

Creá una cuadrícula clasificada navegando a Herramientas > Cuadrículas y haciendo clic en la pestaña Cuadrícula clasificada. Hacé clic en el botón Crear cuadrícula clasificada.

Personalizar

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

Elegí un destino. Ej. Tokio.
Poné un nombre para recordar de qué se trata la cuadrícula. Ej. Hoteles eco-amigables en Tokio
Seleccioná la Personalización que querés aplicar a esta cuadrícula.
Seleccioná la cara inicial de la tarjeta que querés que los usuarios vean primero. Por defecto, es la cara nativa de ese inventario.
Elegí qué característica usar para ordenar las propiedades. Ej. Eco-amigabilidad.
Agregá palabras clave, separadas por comas, que serán usadas por los Web Crawlers.
Agregá títulos y descripciones en los idiomas que querés que el usuario vea.
Hacé 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 Agrega 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

Aprendé más sobre nuestra colección de Componentes Web.
Aprendé 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