그리드

그리드는 공급자 및 재고 목록을 나타내며, 대화형 예약 가능한 그리드 UI를 통해 세부 정보를 제공합니다. 그리드는 선별된 목록이나 저장된 검색에서 가져온 모든 재고를 표시할 수 있습니다. 사용자는 개별 카드와 동일한 방식으로 그리드와 상호작용하지만 한 가지 추가 기능이 있습니다:

더 보기 버튼을 클릭하여 그리드를 페이지네이션할 수 있습니다 (더 많은 항목이 있을 때).

위는 객실 유형 카드 목록을 보여주는 그리드 예시입니다.

이 문서의 나머지 부분에서는 그리드를 생성, 사용자 지정 및 사용자에게 노출하는 방법을 안내합니다.

그리드 유형

그리드에는 세 가지 유형이 있습니다:

선별된 목록을 기반으로 한 그리드.
저장된 검색을 기반으로 한 그리드.
위치 및 정렬 기준을 기반으로 한 그리드 (즉, 순위 그리드).

선별된 목록 그리드

이 그리드는 선별된 목록에 수집한 재고를 사용하여, 사용자가 볼 수 있는 예약 가능한 여행 재고로 목록을 변환합니다.

생성

메인 내비게이션 바에서 Inventory > Curated Lists로 이동합니다. 이 예제에서는 Favorites 목록을 사용합니다. 아직 Favorites에 항목을 추가하지 않았다면, 검색에서 방법을 확인하세요.

Favorites 목록에서 Actions 버튼을 클릭합니다.
Create a grid 버튼을 클릭합니다.
새 창이 열리면 그리드 이름을 지정할 수 있습니다. 아래 참조.
계속하려면 OK 버튼을 클릭합니다.

그리드가 생성되었습니다. 메인 내비게이션 바에서 Tools > Grids로 이동한 후 Curated Grids 탭을 클릭하여 새 그리드를 확인하세요.

사용자 지정

양식을 통해 다음과 같이 그리드를 사용자 지정할 수 있습니다:

그리드가 무엇인지 기억하기 쉽도록 이름을 지정합니다.
이 그리드에 적용할 사용자 지정을 선택합니다.
사용자가 처음 보게 될 초기 카드 면을 선택합니다. 기본값은 해당 재고의 기본 면입니다.
카드에 사용할 배지를 선택합니다. 배지는 친환경과 같은 집계 지표로 재고를 비교할 수 있게 합니다.
쉼표로 구분된 키워드를 추가합니다. 이 키워드는 웹 크롤러에서 사용됩니다.
사용자가 볼 언어로 제목과 설명을 추가합니다.
계속하려면 Save 버튼을 클릭합니다.

위 이미지는 그리드에 사용할 수 있는 모든 작업을 보여줍니다:

업데이트 그리드 구성을 업데이트합니다.
WinkLinks에 추가 그리드를 WinkLinks 계정에 추가합니다.
임베드 이 그리드를 Grid로 웹사이트에 임베드하는 방법을 보여줍니다.
WordPress와 함께 사용 WordPress 플러그인을 사용하여 이 그리드를 웹사이트에 임베드하는 방법을 보여줍니다.

아래에서 이러한 옵션 중 일부를 자세히 다룹니다.

임베드

<html>
  <head>
    <link rel="stylesheet" href="https://elements.wink.travel/styles.css"></link>
  </head>
  <body>
    <wink-content-loader
       layout="LIST"
       id="9a212b5e-62a7-11ef-ac3f-42004e494300"
    ></wink-content-loader>

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

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

사이트에 그리드를 임베드하는 방법은 다음과 같습니다:

3번째 줄은 Wink 스타일을 사이트에 임베드하는 방법을 보여줍니다.
6~9번째 줄은 wink-content-loader 웹 컴포넌트를 사용하여 그리드를 가져오는 방법을 보여줍니다.
11번째 줄은 자바스크립트를 사이트에 임베드하는 방법을 보여줍니다.
13번째 줄은 wink-app-loader 웹 컴포넌트를 사용하여 페이지 수준 구성 설정을 가져오는 방법을 보여줍니다.

저장된 검색 그리드

이 그리드는 저장된 검색 쿼리의 재고를 사용하여, 검색 결과를 사용자가 볼 수 있는 예약 가능한 여행 재고로 변환합니다.

생성

메인 내비게이션 바에서 Inventory > Saved searches로 이동합니다. 아직 저장된 검색을 생성하지 않았다면, 검색에서 방법을 확인하세요.

저장된 검색에서 Actions 버튼을 클릭합니다.
Create a grid 버튼을 클릭합니다.
새 창이 열리면 그리드 이름을 지정할 수 있습니다. 아래 참조.

계속하려면 OK 버튼을 클릭합니다.

그리드가 생성되었습니다. 메인 내비게이션 바에서 Tools > Grids로 이동한 후 Saved Search Grids 탭을 클릭하여 새 그리드를 확인하세요.

사용자 지정

양식을 통해 다음과 같이 그리드를 사용자 지정할 수 있습니다:

그리드가 무엇인지 기억하기 쉽도록 이름을 지정합니다.
이 그리드에 적용할 사용자 지정을 선택합니다.
사용자가 처음 보게 될 초기 카드 면을 선택합니다. 기본값은 해당 재고의 기본 면입니다.
카드에 사용할 배지를 선택합니다. 배지는 친환경과 같은 집계 지표로 재고를 비교할 수 있게 합니다.
쉼표로 구분된 키워드를 추가합니다. 이 키워드는 웹 크롤러에서 사용됩니다.
사용자가 볼 언어로 제목과 설명을 추가합니다.
계속하려면 Save 버튼을 클릭합니다.

임베드

<html>
  <head>
    <link rel="stylesheet" href="https://elements.wink.travel/styles.css"></link>
  </head>
  <body>
    <wink-content-loader
       layout="LIST"
       id="be3130d5-62a7-11ef-ac3f-42004e494300"
    ></wink-content-loader>

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

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

사이트에 그리드를 임베드하는 방법은 다음과 같습니다:

3번째 줄은 Wink 스타일을 사이트에 임베드하는 방법을 보여줍니다.
6~9번째 줄은 wink-content-loader 웹 컴포넌트를 사용하여 그리드를 가져오는 방법을 보여줍니다.
11번째 줄은 자바스크립트를 사이트에 임베드하는 방법을 보여줍니다.
13번째 줄은 wink-app-loader 웹 컴포넌트를 사용하여 페이지 수준 구성 설정을 가져오는 방법을 보여줍니다.

순위 그리드

생성

Tools > Grids로 이동한 후 Ranked Grid 탭을 클릭합니다. Create ranked grid 버튼을 클릭합니다.

사용자 지정

양식을 통해 순위 그리드를 다음과 같이 사용자 지정할 수 있습니다:

목적지를 선택합니다. 예: 도쿄.
그리드가 무엇인지 기억하기 쉽도록 이름을 지정합니다. 예: 도쿄의 친환경 호텔
이 그리드에 적용할 사용자 지정을 선택합니다.
사용자가 처음 보게 될 초기 카드 면을 선택합니다. 기본값은 해당 재고의 기본 면입니다.
부동산을 정렬할 특성을 선택합니다. 예: 친환경성.
쉼표로 구분된 키워드를 추가합니다. 이 키워드는 웹 크롤러에서 사용됩니다.
사용자가 볼 언어로 제목과 설명을 추가합니다.
계속하려면 Save 버튼을 클릭합니다.

순위 그리드를 저장하면 순위 그리드 페이지로 리디렉션되며, 이제 그리드를 전 세계와 공유할 준비가 완료됩니다.

위 이미지는 순위 그리드에 사용할 수 있는 모든 작업을 보여줍니다:

업데이트 그리드 구성을 업데이트합니다.
WinkLinks에 추가 순위 그리드를 WinkLinks 계정에 추가합니다.
임베드 이 그리드를 Grid로 웹사이트에 임베드하는 방법을 보여줍니다.
WordPress와 함께 사용 WordPress 플러그인을 사용하여 이 카드를 웹사이트에 임베드하는 방법을 보여줍니다.

아래에서 이러한 옵션 중 일부를 자세히 다룹니다.

임베드

<html>
  <head>
    <link rel="stylesheet" href="https://elements.wink.travel/styles.css"></link>
  </head>
  <body>
    <wink-content-loader
       layout="RANKED"
       id="2483d55e-62a5-11ef-ac3f-42004e494300"
    ></wink-content-loader>

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

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

사이트에 그리드를 임베드하는 방법은 다음과 같습니다:

3번째 줄은 Wink 스타일을 사이트에 임베드하는 방법을 보여줍니다.
6~9번째 줄은 wink-content-loader 웹 컴포넌트를 사용하여 순위 그리드를 가져오는 방법을 보여줍니다.
11번째 줄은 자바스크립트를 사이트에 임베드하는 방법을 보여줍니다.
13번째 줄은 wink-app-loader 웹 컴포넌트를 사용하여 페이지 수준 구성 설정을 가져오는 방법을 보여줍니다.

API

그리드를 관리하려는 개발자는 Developers > API > Inventory로 이동하세요.

추가 자료

웹 컴포넌트에 대해 자세히 알아보세요.
Wink WordPress 플러그인에 대해 자세히 알아보세요.