그리드

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

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

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

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

그리드 유형

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

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

선별된 목록 그리드

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

생성

메인 내비게이션 바에서 목록 > 선별됨으로 이동합니다. 이 예제에서는 즐겨찾기 목록을 사용합니다. 아직 즐겨찾기에 항목을 추가하지 않았다면, 검색에서 방법을 확인하세요.

즐겨찾기 목록에서 작업 버튼을 클릭합니다.
그리드 생성 버튼을 클릭합니다.
새 창이 열리면 그리드 이름을 입력합니다. 아래 참조.
계속하려면 확인 버튼을 클릭합니다.

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

맞춤 설정

폼에서는 다음과 같이 그리드를 맞춤 설정할 수 있습니다:

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

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

업데이트 그리드 구성을 업데이트합니다.
WinkLinks에 추가 그리드를 WinkLinks 계정에 추가합니다.
임베드 이 그리드를 그리드로 웹사이트에 임베드하는 방법을 보여줍니다.
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 웹 컴포넌트를 사용해 페이지 수준 구성 설정을 불러오는 방법을 보여줍니다.

저장된 검색 그리드

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

생성

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

저장된 검색에서 작업 버튼을 클릭합니다.
그리드 생성 버튼을 클릭합니다.
새 창이 열리면 그리드 이름을 입력합니다. 아래 참조.

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

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

맞춤 설정

폼에서는 다음과 같이 그리드를 맞춤 설정할 수 있습니다:

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

임베드

<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 웹 컴포넌트를 사용해 페이지 수준 구성 설정을 불러오는 방법을 보여줍니다.

랭킹 그리드

생성

그리드로 이동한 후 랭킹 탭을 클릭합니다. 랭킹 그리드 생성 버튼을 클릭하세요.

맞춤 설정

폼에서는 랭킹 그리드를 다음과 같이 맞춤 설정할 수 있습니다:

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

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

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

업데이트 그리드 구성을 업데이트합니다.
WinkLinks에 추가 랭킹 그리드를 WinkLinks 계정에 추가합니다.
임베드 이 그리드를 그리드로 웹사이트에 임베드하는 방법을 보여줍니다.
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

그리드를 관리하려는 개발자는 개발자 > API > 인벤토리로 이동하세요.

추가 자료

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