CMS sin cabeza

Los componentes web de Wink son elementos HTML personalizados independientes del framework. Si tu CMS sin cabeza renderiza HTML — ya sea mediante Next.js, Nuxt, Astro, SvelteKit o cualquier otro framework — puedes insertar los componentes de Wink sin ninguna integración especial.

La inserción en tres pasos

Cada integración de Wink, sin importar la plataforma, sigue los mismos tres pasos.

1. Incluir la hoja de estilos

Agrega esto en el <head> de tu documento (o en el layout global equivalente):

<link rel="stylesheet" href="https://elements.wink.travel/styles.css">

2. Incluir el JavaScript

Agrega esto antes de la etiqueta de cierre </body> (o en la sección de scripts de tu layout):

<script src="https://elements.wink.travel/elements.js" type="module" defer></script>

3. Agregar el cargador de la aplicación

Coloca esto una vez por página, en cualquier parte del body (típicamente en el footer del layout global):

<wink-app-loader client-id="YOUR_CLIENT_ID"></wink-app-loader>

Ejemplos por framework

Next.js (App Router)

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        <link rel="stylesheet" href="https://elements.wink.travel/styles.css" />
      </head>
      <body>
        {children}
        <script src="https://elements.wink.travel/elements.js" type="module" defer />
        <wink-app-loader client-id="YOUR_CLIENT_ID" />
      </body>
    </html>
  );
}

Nuxt 3

<template>
  <div>
    <slot />
    <wink-app-loader client-id="YOUR_CLIENT_ID" />
  </div>
</template>

<script setup>
useHead({
  link: [{ rel: 'stylesheet', href: 'https://elements.wink.travel/styles.css' }],
  script: [{ src: 'https://elements.wink.travel/elements.js', type: 'module', defer: true }],
})
</script>

Astro

<html lang="en">
  <head>
    <link rel="stylesheet" href="https://elements.wink.travel/styles.css" />
  </head>
  <body>
    <slot />
    <script src="https://elements.wink.travel/elements.js" type="module" is:inline></script>
    <wink-app-loader client-id="YOUR_CLIENT_ID"></wink-app-loader>
  </body>
</html>

SvelteKit

<svelte:head>
  <link rel="stylesheet" href="https://elements.wink.travel/styles.css" />
</svelte:head>

<slot />
<wink-app-loader client-id="YOUR_CLIENT_ID" />

<script>
  import { onMount } from 'svelte';
  onMount(async () => {
    await import('https://elements.wink.travel/elements.js');
  });
</script>

Colocando componentes en contenido

En el texto enriquecido o tipos de campo personalizados de tu CMS, inserta las etiquetas de los componentes directamente en el HTML generado:

<wink-content-loader
  layout="HOTEL"
  id="YOUR_LAYOUT_ID"
></wink-content-loader>

Para Contentful, Strapi, Sanity o plataformas sin cabeza similares, usa un campo de Rich Text o un Bloque Personalizado que renderice HTML sin procesar, y pega allí la etiqueta del componente.

Paquete npm

Para proyectos TypeScript, el paquete @wink/elements provee:

Una función load() que inyecta los scripts del CDN programáticamente
Declaraciones completas de tipos TypeScript para todos los atributos de los componentes

npm install @wink/elements

import { load } from '@wink/elements';

// Llamar una vez al iniciar la app
load({ clientId: 'YOUR_CLIENT_ID' });

Componentes disponibles

Componente	Etiqueta HTML	Propósito
Content loader	`<wink-content-loader>`	Mostrar tarjetas de hoteles, grillas, mapas
Lookup	`<wink-lookup>`	Barra de búsqueda para destinos
Search button	`<wink-search-button>`	Abrir selector de itinerario
Account button	`<wink-account-button>`	Iniciar sesión / menú de usuario
Itinerary button	`<wink-itinerary-button>`	Mostrar itinerario actual
Itinerary picker	`<wink-itinerary-picker>`	Formulario completo de itinerario
Shopping cart	`<wink-shopping-cart-button>`	Botón resumen del carrito

Consulta Web Components para la referencia completa de atributos.