웹 컴포넌트

웹 컴포넌트 는 코딩 지식 없이도 전체 자바스크립트 기능을 웹사이트에 통합할 수 있는 표준입니다. 이 멋진 기술 덕분에 Wink 여행 인벤토리를 매우 간편하게 삽입할 수 있습니다. 이 문서에서는 웹 컴포넌트 모음을 소개하고 사용 방법을 안내합니다.

Wink 삽입하기

웹 컴포넌트를 표시하려는 모든 페이지에 반드시 포함해야 할 세 가지가 있습니다.

스타일시트 포함
자바스크립트 포함
애플리케이션 로더 포함

스타일시트

문서의 head에 CSS 스타일을 포함하세요.

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

자바스크립트

문서 하단에 자바스크립트를 포함하세요. (body 태그 닫기 바로 위에 포함하는 것을 권장합니다).

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

이제 사이트가 준비되어 웹 컴포넌트를 표시할 수 있습니다.

컴포넌트

아래에서 컴포넌트 라이브러리에 대해 읽어보세요.

애플리케이션 로더

로더는 상태를 유지하고 컴포넌트 간 상호작용을 관리합니다. (자바스크립트 아래에 포함하세요).

<html>
  <body>
    <wink-app-loader
      client-id="YOUR CLIENT ID GOES HERE"
      configuration-id="YOUR CUSTOMIZATION ID GOES HERE"
    ></wink-app-loader>
  </body>
</html>

콘텐츠 로더

콘텐츠 로더는 웹 컴포넌트 라이브러리의 핵심입니다. 인벤토리(카드, 그리드, 지도)를 표시하는 역할을 합니다.

사용 가능한 속성:

layout
id
sort

sort 속성은 layout이 RANKED일 때만 사용 가능하며, 기존 랭킹 그리드를 사용하지 않을 경우에만 적용됩니다. 이 경우 id는 비워두세요.

사용 가능한 레이아웃 유형:

AD_BANNER
MAP
HOTEL
GUEST_ROOM
MEETING_ROOM
SPA
RESTAURANT
ACTIVITY
ATTRACTION
PLACE
ADD_ON
LIST
SEARCH
RANKED

사용 가능한 정렬 유형:

MEMBER
PRICE_LOW_TO_HIGH
PRICE_HIGH_TO_LOW
PRICE
POPULARITY
ECO
EXPERIENCE
PERK
LOYALTY
PACKAGE

<html>
  <body>
    <wink-content-loader
       layout="GUEST_ROOM"
       id="2de7ee9c-61c9-11ef-9722-42004e494300"
    ></wink-content-loader>
  </body>
</html>

카드, 그리드, 지도 샘플을 확인할 수 있습니다.

룩업

룩업은 랭킹 그리드와 함께 잘 작동합니다. 사용자가 호텔과 목적지를 검색하면 그리드가 검색 결과에 따라 업데이트됩니다.

<html>
  <body>
    <wink-lookup></wink-lookup>
  </body>
</html>

위 컴포넌트를 클릭하면 목적지나 호텔을 입력할 수 있는 모달이 열립니다.

일정

일정 버튼은 현재 일정을 버튼에 표시합니다. 클릭하면 전체 일정 선택기가 모달로 표시됩니다.

<html>
  <body>
    <wink-itinerary></wink-itinerary>
  </body>
</html>

일정 웹 컴포넌트

위 버튼을 클릭하면 일정을 업데이트할 수 있는 모달이 열립니다.

검색

검색은 일정 선택기의 아이콘 전용 버튼입니다. 클릭하면 전체 일정 선택기가 모달로 표시됩니다.

<html>
  <body>
    <wink-search></wink-search>
  </body>
</html>

위 버튼을 클릭하면 일정을 업데이트할 수 있는 모달이 열립니다.

일정 폼

일정 컴포넌트는 사용자가 상호작용할 수 있는 일정 폼을 표시합니다.

<html>
  <body>
    <wink-itinerary-form></wink-itinerary-form>
  </body>
</html>

Itinerary formweb component — *일정 폼 웹 컴포넌트*

일정 컴포넌트에서 일정을 변경하면 현재 페이지에 표시 중인 인벤토리에 일정 업데이트 이벤트가 트리거됩니다.

계정

계정 버튼을 통해 Wink 인증을 사이트에 추가할 수 있습니다.

<html>
  <body>
    <wink-account></wink-account>
  </body>
</html>

사용자가 인증되지 않은 상태에서 버튼을 클릭하면 인증 페이지로 이동합니다. 인증된 경우에는 사용자의 프로필 아이콘이 표시됩니다.

버튼을 클릭하면 사용자별 드롭다운이 열립니다.

TripPay 삽입하기

TripPay 결제 웹 컴포넌트를 사용하려는 모든 페이지에 반드시 포함해야 할 두 가지가 있습니다.

스타일시트 포함
자바스크립트 포함

스타일시트

문서의 head에 CSS 스타일을 포함하세요.

<html>
  <head>
    <link rel="stylesheet" href="https://elements.trippay.io/styles.css"></link>
  </head>
</html>

자바스크립트

문서 하단에 자바스크립트를 포함하세요. (body 태그 닫기 바로 위에 포함하는 것을 권장합니다).

<html>
  <body>
    <script src="https://elements.trippay.io/elements.js" type="module" defer></script>
  </body>
</html>

이제 사이트가 준비되어 웹 컴포넌트를 표시할 수 있습니다.

컴포넌트

결제

결제 컴포넌트는 여행자가 구매를 원하고 해당 상품의 규칙과 가격을 TripPay에 알릴 수 있게 합니다.

필수 속성은 다음과 같습니다:

id 실행할 예약 계약의 식별자

<html>
  <body>
    <trip-pay id="<INSERT_BOOKING_CONTRACT_ID>"></trip-pay>
  </body>
</html>

위젯은 계약 실행을 준비하고 사용자에게 결제 세부사항 (그림 1) 을 표시하여 예약을 완료할 수 있게 합니다.

오류

WinkLinks 또는 자체 웹사이트에서 웹 컴포넌트를 삽입할 때 오류 메시지가 나타난다면, 다음과 같은 원인이 있을 수 있습니다:

이용 가능 여부

인벤토리가 더 이상 이용 가능하지 않을 수 있습니다. Wink Studio 에서 “카드” 상태가 이용 가능한지 확인하세요. 이용 불가능하면 빨간색으로 표시됩니다. 이 경우 공급자가 다시 이용 가능하게 만들 때까지 기다리거나 목록에서 제거할 수 있습니다.

제거됨

인벤토리가 제거되었을 수 있습니다. Wink Studio 에서 “카드” 상태가 이용 가능한지 확인하세요. 이용 불가능하면 빨간색으로 표시됩니다. 이 경우 공급자가 다시 이용 가능하게 만들 때까지 기다리거나 목록에서 제거할 수 있습니다.

커스터마이징

인벤토리와 함께 정의한 커스터마이징을 실수로 제거했을 수 있습니다. 커스터마이징이 여전히 존재하는지 확인하고, 없으면 새로 설정하세요.

애플리케이션

웹 개발자 전용 안내입니다. 애플리케이션 을 실수로 제거하여 클라이언트 ID가 더 이상 유효하지 않다면, 새 애플리케이션을 생성하고 새 클라이언트 ID를 사용해 웹 컴포넌트를 삽입하세요.