웹 구성 요소
웹 구성 요소코딩에 대한 지식 없이도 웹사이트에 모든 자바스크립트 기능을 통합할 수 있는 표준입니다. 이 멋진 기술 덕분에 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 삽입”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)사용자가 예약을 마무리할 수 있도록 합니다.