Grillas

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

Paginá a través de la grilla haciendo clic en el botón Mostrar más (cuando haya más ítems disponibles).

Vista previa de la grilla — *Grilla mostrando múltiples tipos de habitación*

Arriba hay un ejemplo de nuestra grilla 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 grilla a tus usuarios.

Tipos de grillas

Hay tres tipos de grillas:

Grilla basada en una lista seleccionada.
Grilla basada en una búsqueda guardada.
Grilla basada en una ubicación y criterios de ordenamiento (es decir, Grilla clasificada).

Grilla de lista seleccionada

Esta es una grilla 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 grilla.
Se mostrará una nueva ventana que te permitirá nombrar tu grilla. Ver más abajo.
Hacé clic en el botón OK para continuar.

Tu grilla ha sido creada. Navegá a Herramientas > Grillas desde la barra de navegación principal y hacé clic en la pestaña Grillas seleccionadas para ver tu nueva grilla.

Personalizar

El formulario te permite personalizar tu grilla de las siguientes maneras:

Poné un nombre para recordar de qué se trata la grilla.
Seleccioná la Personalización que querés aplicar a esta grilla.
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.

Grilla de lista seleccionada — *Entrada de grilla de lista seleccionada con menú de acciones colapsado*

Arriba se muestra una imagen con todas las acciones disponibles para tu grilla:

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

Abordamos 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 grilla 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 pedirle que cargue una grilla 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 pedirle que cargue tus preferencias de configuración a nivel de página.

Grilla de búsqueda guardada

Esta es una grilla que usa el inventario de tu consulta de búsqueda guardada y convierte los resultados 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 grilla.
Se mostrará una nueva ventana que te permitirá nombrar tu grilla. Ver más abajo.

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

Tu grilla ha sido creada. Navegá a Herramientas > Grillas desde la barra de navegación principal y hacé clic en la pestaña Grillas de búsqueda guardada para ver tu nueva grilla.

Personalizar

El formulario te permite personalizar tu grilla de las siguientes maneras:

Poné un nombre para recordar de qué se trata la grilla.
Seleccioná la Personalización que querés aplicar a esta grilla.
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.

Grilla de búsqueda guardada — *Entrada de grilla 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 grilla 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 pedirle que cargue una grilla 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 pedirle que cargue tus preferencias de configuración a nivel de página.

Grilla clasificada

Crear

Creá una grilla clasificada navegando a Herramientas > Grillas y haciendo clic en la pestaña Grilla clasificada. Hacé clic en el botón Crear grilla clasificada.

Personalizar

El formulario te permite personalizar tu grilla clasificada de las siguientes maneras:

Elegí un destino. Ej. Tokio.
Poné un nombre para recordar de qué se trata la grilla. Ej. Hoteles eco-amigables en Tokio
Seleccioná la Personalización que querés aplicar a esta grilla.
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 grilla clasificada, serás redirigido a la página de tus grillas clasificadas y tu grilla estará lista para ser compartida con el mundo.

Arriba se muestra una imagen con todas las acciones disponibles para tu grilla clasificada:

Actualizar Actualiza la configuración de tu grilla.
Agregar a WinkLinks Agrega la grilla clasificada a tu cuenta de WinkLinks.
Incrustar Te muestra cómo incrustar esta grilla 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.

Abordamos 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 grilla 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 pedirle que cargue una grilla 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 pedirle que cargue tus preferencias de configuración a nivel de página.

API

Los desarrolladores que quieran gestionar grillas pueden dirigirse a Developers > API > Inventory.

Lecturas adicionales

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

Grillas

Tipos de grillas

Grilla de lista seleccionada

Crear

Personalizar

Compartir

Incrustar

Grilla de búsqueda guardada

Crear

Personalizar

Compartir

Incrustar

Grilla clasificada

Crear

Personalizar

Compartir

Incrustar

API

Lecturas adicionales