웹 구성 요소

웹 구성 요소코딩에 대한 지식 없이도 웹사이트에 모든 자바스크립트 기능을 통합할 수 있는 표준입니다. 이 멋진 기술 덕분에 Wink 여행 상품 목록을 아주 간편하게 삽입할 수 있습니다. 이 글에서는 웹 구성 요소 모음을 단계별로 살펴보고 사용 방법을 알려드립니다.

윙크 삽입

웹 구성 요소 중 하나를 표시하려는 페이지에는 세 가지 항목을 포함해야 합니다.

우리의 스타일시트를 포함시켜 주세요.
Javascript를 포함하세요.
애플리케이션 로더를 포함시킵니다.

스타일시트

CSS 스타일을 문서 머리글에 포함하세요.

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

자바스크립트

문서 하단에 Javascript를 포함하세요. (본문 끝 태그 바로 위에 넣는 것을 권장합니다.).

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

이제 귀하의 사이트가 준비되었으며 웹 구성 요소를 표시할 수 있습니다.

구성 요소

아래에서 당사의 구성 요소 라이브러리에 대해 알아보세요.

애플리케이션 로더

로더는 상태를 유지하고 구성 요소 간의 상호 작용을 관리하는 역할을 합니다.Javascript 아래에 포함하세요).

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

콘텐츠 로더

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

사용 가능한 속성:

공들여 나열한 것
ID
종류

속성sort레이아웃이 있는 경우에만 사용 가능합니다.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>

샘플은 다음에서 찾을 수 있습니다.카드,그리드 그리고 지도.

조회

Lookup은 순위가 매겨진 그리드 중 하나와 함께 사용하면 매우 효과적입니다. 사용자가 호텔과 목적지를 검색하면 검색 결과에 따라 그리드가 업데이트됩니다.

<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>

여정 구성 요소 중 하나에서 여정을 변경하면 현재 페이지에 표시 중인 모든 인벤토리에 여정 업데이트 이벤트가 트리거됩니다.

계정

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

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

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

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

TripPay 삽입

TripPay 결제 웹 구성 요소를 사용하려는 모든 페이지에 포함해야 할 두 가지 사항이 있습니다.

우리의 스타일시트를 포함시켜 주세요.
Javascript를 포함하세요.

스타일시트

CSS 스타일을 문서 머리글에 포함하세요.

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

자바스크립트

문서 하단에 Javascript를 포함하세요. (본문 끝 태그 바로 위에 넣는 것을 권장합니다.).

<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>

:::참고 예약 계약서 생성 방법을 알아보려면id가이드를 읽어보세요:TripPay와 통합. :::

위젯은 실행을 위한 계약을 준비하고 지불 세부 정보를 표시합니다.(그림 1)사용자가 예약을 마무리할 수 있도록 합니다.