Headless CMS

Wink tīmekļa komponenti ir neatkarīgi no ietvariem pielāgoti HTML elementi. Ja jūsu headless CMS renderē HTML — neatkarīgi no tā, vai tas ir Next.js, Nuxt, Astro, SvelteKit vai kāds cits ietvars — jūs varat iegult Wink komponentus bez īpašas integrācijas.

Trīs soļu iegulšana

Katru Wink integrāciju, neatkarīgi no platformas, veic trīs soļos.

1. Iekļaut stila lapu

Pievienojiet šo savas dokumenta <head> sadaļā (vai ekvivalentā globālajā izkārtojumā):

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

2. Iekļaut JavaScript

Pievienojiet šo pirms aizverošā </body> taga (vai jūsu izkārtojuma skriptu sadaļā):

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

3. Pievienot lietotnes ielādētāju

Novietojiet šo vienu reizi katrā lapā, jebkurā vietā ķermenī (parasti jūsu globālā izkārtojuma kājenē):

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

Ietvaru piemēri

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>

Komponentu izvietošana saturā

Jūsu CMS bagātā teksta vai pielāgoto lauku tipos iegult komponentu tagus tieši HTML izvades daļā:

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

Contentful, Strapi, Sanity vai līdzīgām headless platformām izmantojiet Rich Text lauku vai Custom Block, kas renderē neapstrādātu HTML, un ielīmējiet tur komponenta tagu.

npm pakotne

TypeScript projektiem @wink/elements pakotne nodrošina:

load() funkciju, kas programmatiski ielādē CDN skriptus
Pilnas TypeScript tipu deklarācijas visiem komponentu atribūtiem

npm install @wink/elements

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

// Izsauciet vienu reizi lietotnes startā
load({ clientId: 'YOUR_CLIENT_ID' });

Pieejamie komponenti

Komponents	HTML tags	Mērķis
Content loader	`<wink-content-loader>`	Rāda viesnīcu kartītes, režģus, kartes
Lookup	`<wink-lookup>`	Meklēšanas josla galamērķiem
Search button	`<wink-search-button>`	Atver maršruta izvēlētāju
Account button	`<wink-account-button>`	Pieslēgšanās / lietotāja izvēlne
Itinerary button	`<wink-itinerary-button>`	Rāda pašreizējo maršrutu
Itinerary picker	`<wink-itinerary-picker>`	Pilna maršruta forma
Shopping cart	`<wink-shopping-cart-button>`	Groza kopsavilkuma poga

Skatīt Web Components pilnu atribūtu atsauci.