콘텐츠로 이동

웹 구성 요소

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

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

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

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 결제 웹 구성 요소를 사용하려는 모든 페이지에 포함해야 할 두 가지 사항이 있습니다.

  1. 우리의 스타일시트를 포함시켜 주세요.
  2. 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)사용자가 예약을 마무리할 수 있도록 합니다.

결제 세부 정보
그림 1. 샘플 결제 양식