Headless CMS

Các thành phần web Wink là các phần tử HTML tùy chỉnh không phụ thuộc vào framework. Nếu headless CMS của bạn hiển thị HTML — dù qua Next.js, Nuxt, Astro, SvelteKit hay bất kỳ framework nào khác — bạn có thể nhúng các thành phần Wink mà không cần tích hợp đặc biệt.

Ba bước nhúng

Mỗi tích hợp Wink, bất kể nền tảng nào, đều tuân theo ba bước giống nhau.

1. Bao gồm stylesheet

Thêm đoạn này vào <head> của tài liệu (hoặc bố cục toàn cục tương đương):

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

2. Bao gồm JavaScript

Thêm đoạn này trước thẻ đóng </body> (hoặc trong phần script của bố cục):

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

3. Thêm trình tải ứng dụng

Đặt đoạn này một lần trên mỗi trang, ở bất kỳ đâu trong phần body (thường là ở chân trang của bố cục toàn cục):

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

Ví dụ 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>

Đặt các thành phần trong nội dung

Trong trường rich text hoặc các loại trường tùy chỉnh của CMS, nhúng thẻ thành phần trực tiếp vào đầu ra HTML:

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

Đối với Contentful, Strapi, Sanity hoặc các nền tảng headless tương tự, sử dụng trường Rich Text hoặc Custom Block cho phép hiển thị HTML thô, rồi dán thẻ thành phần vào đó.

Gói npm

Đối với dự án TypeScript, gói @wink/elements cung cấp:

Hàm load() để chèn script CDN một cách lập trình
Khai báo kiểu TypeScript đầy đủ cho tất cả thuộc tính thành phần

npm install @wink/elements

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

// Gọi một lần khi khởi động app
load({ clientId: 'YOUR_CLIENT_ID' });

Các thành phần có sẵn

Thành phần	Thẻ HTML	Mục đích
Content loader	`<wink-content-loader>`	Hiển thị thẻ khách sạn, lưới, bản đồ
Lookup	`<wink-lookup>`	Thanh tìm kiếm điểm đến
Search button	`<wink-search-button>`	Mở bộ chọn hành trình
Account button	`<wink-account-button>`	Đăng nhập / menu người dùng
Itinerary button	`<wink-itinerary-button>`	Hiển thị hành trình hiện tại
Itinerary picker	`<wink-itinerary-picker>`	Biểu mẫu hành trình đầy đủ
Shopping cart	`<wink-shopping-cart-button>`	Nút tóm tắt giỏ hàng

Xem Web Components để tham khảo đầy đủ các thuộc tính.