Squarespace

Squarespace hỗ trợ HTML và JavaScript tùy chỉnh, có nghĩa là bạn có thể nhúng bất kỳ thành phần web Wink nào trực tiếp vào trang của bạn mà không cần plugin. Hướng dẫn này sẽ chỉ cho bạn cách tải các script của Wink trên toàn bộ trang và sau đó đặt các thành phần trên từng trang riêng lẻ.

Tải các script Wink trên toàn trang

Thêm các script vào phần footer và header toàn cục của trang có nghĩa là Wink sẽ có mặt trên mọi trang mà không cần lặp lại thiết lập.

Trong trình chỉnh sửa Squarespace, vào Settings → Advanced → Code Injection.

Trong trường Header, thêm stylesheet:

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

Trong trường Footer, thêm script và trình tải ứng dụng (thay YOUR_CLIENT_ID bằng Client ID Wink của bạn):

<script src="https://elements.wink.travel/elements.js" type="module" defer></script>
<wink-app-loader client-id="YOUR_CLIENT_ID"></wink-app-loader>

Nhấn Save.

Thêm thành phần vào một trang

Khi các script đã được tải toàn cục, bạn có thể thả bất kỳ thành phần Wink nào vào bất kỳ trang nào bằng cách sử dụng Code Block.

Mở trang bạn muốn chỉnh sửa.
Nhấn Edit và thêm một khối Code mới vào vị trí bạn muốn thành phần xuất hiện.

Dán HTML của thành phần, ví dụ một trình tải nội dung:

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

Nhấn Apply rồi Save.

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

Thành phần	Thẻ HTML	Mục đích
Trình tải nội dung	`<wink-content-loader>`	Hiển thị thẻ khách sạn, lưới, bản đồ
Tìm kiếm	`<wink-lookup>`	Thanh tìm kiếm điểm đến
Nút tìm kiếm	`<wink-search-button>`	Mở bộ chọn hành trình
Nút tài khoản	`<wink-account-button>`	Đăng nhập / menu người dùng
Nút hành trình	`<wink-itinerary-button>`	Hiển thị hành trình hiện tại
Bộ chọn hành trình	`<wink-itinerary-picker>`	Biểu mẫu hành trình đầy đủ
Giỏ hàng	`<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 của từng thành phần.