Grids

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

그리드를 클릭하여 페이지를 넘기세요.Show more버튼(더 많은 아이템이 출시되면).

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

이 문서의 나머지 부분에서는 그리드를 만들고, 사용자 지정하고, 사용자에게 공개하는 방법을 안내합니다.

그리드 유형

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

그리드 기반큐레이트된 목록.
그리드 기반저장된 검색.
위치 및 정렬 기준에 따른 그리드 그리드(즉, 순위 그리드).

큐레이트된 목록 그리드

이는 귀하가 큐레이팅한 목록 중 하나에서 수집한 인벤토리를 활용하고 해당 목록을 사용자에게 보여줄 수 있는 예약 가능한 여행 인벤토리로 변환하는 그리드입니다.

만들다

로 이동Inventory > Curated Lists메인 탐색 모음에서. 이 예에서는 다음을 사용합니다.Favorites목록. 아직 목록에 아무것도 추가하지 않았다면Favorites, 가다찾다방법을 배우려면.

클릭 Actions 버튼을 Favorites 목록.
클릭 Create a grid 단추.
새 창이 나타나면 그리드의 이름을 지정할 수 있습니다. 아래를 참조하세요.
딸깍 하는 소리 OK 계속하려면 버튼을 클릭하세요.

그리드가 생성되었습니다. 다음으로 이동하세요.Tools > Grids메인 탐색 표시줄에서 다음을 클릭합니다.Curated Grids탭을 클릭하여 새 그리드를 확인하세요.

사용자 정의

이 양식을 사용하면 다음과 같은 방법으로 그리드를 사용자 지정할 수 있습니다.

그리드의 기능을 기억할 수 있도록 이름을 지정하세요.
선택하세요 사용자 정의 이 그리드에 적용하고 싶습니다.
사용자에게 가장 먼저 보여줄 카드 페이스를 선택하세요. 기본적으로 해당 인벤토리의 기본 페이스입니다.
카드에 사용할 배지를 선택하세요. 배지를 사용하면 다음과 같은 집계 지표를 기준으로 재고를 비교할 수 있습니다. eco-friendly.
쉼표로 구분된 키워드를 추가하세요. 웹 크롤러.
사용자에게 보여주고 싶은 언어로 제목과 설명을 추가하세요.
클릭 Save 계속하려면 버튼을 클릭하세요.

공유하다

위에는 그리드에서 사용 가능한 모든 작업이 표시된 이미지가 나와 있습니다.

업데이트그리드 구성을 업데이트합니다.
WinkLinks에 추가WinkLinks 계정에 그리드를 추가합니다.
포함시키다이 그리드를 다음과 같이 포함하는 방법을 보여줍니다.그리드귀하의 웹사이트에.
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번째 줄에서는 다음을 사용하는 방법을 보여줍니다.윙크-컨텐츠-로더웹 구성 요소를 가져와서 코드에 대한 그리드를 가져오도록 합니다.
11번째 줄에서는 Javascript를 사이트에 삽입하는 방법을 보여줍니다.
13번째 줄에서는 다음을 포함하는 방법을 보여줍니다.윙크 앱 로더웹 구성 요소를 가져와서 페이지 수준 구성 기본 설정을 가져오도록 합니다.

저장된 검색 그리드

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

만들다

로 이동Inventory > Saved searches메인 탐색 모음에서. 아직 저장된 검색을 만들지 않았다면 다음으로 이동하세요.찾다방법을 배우려면.

클릭 Actions 저장된 검색에서 버튼을 클릭하세요.
클릭 Create a grid 단추.
새 창이 나타나면 그리드의 이름을 지정할 수 있습니다. 아래를 참조하세요.

클릭OK계속하려면 버튼을 클릭하세요.

그리드가 생성되었습니다. 다음으로 이동하세요.Tools > Grids메인 탐색 표시줄에서 다음을 클릭합니다.Saved Search Grids탭을 클릭하여 새 그리드를 확인하세요.

사용자 정의

이 양식을 사용하면 다음과 같은 방법으로 그리드를 사용자 지정할 수 있습니다.

그리드의 내용을 기억할 수 있도록 이름을 지정하세요.
선택하세요 사용자 정의 이 그리드에 적용하고 싶습니다.
사용자에게 가장 먼저 보여줄 카드 페이스를 선택하세요. 기본적으로 해당 인벤토리의 기본 페이스입니다.
카드에 사용할 배지를 선택하세요. 배지를 사용하면 다음과 같은 집계 지표를 기준으로 재고를 비교할 수 있습니다. eco-friendly.
쉼표로 구분된 키워드를 추가하세요. 웹 크롤러.
사용자에게 보여주고 싶은 언어로 제목과 설명을 추가하세요.
클릭 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번째 줄에서는 다음을 사용하는 방법을 보여줍니다.윙크-컨텐츠-로더웹 구성 요소를 가져와서 코드에 대한 그리드를 가져오도록 합니다.
11번째 줄에서는 Javascript를 사이트에 내장하는 방법을 보여줍니다.
13번째 줄에서는 다음을 포함하는 방법을 보여줍니다.윙크 앱 로더웹 구성 요소를 가져와서 페이지 수준 구성 기본 설정을 가져오도록 합니다.

순위 그리드

만들다

다음으로 이동하여 순위가 매겨진 그리드를 만듭니다.Tools > Grids그리고 클릭하세요Ranked Grid탭을 클릭하세요Create ranked grid버튼.

사용자 정의

이 양식을 사용하면 다음과 같은 방법으로 순위 그리드를 사용자 지정할 수 있습니다.

목적지를 선택하세요. 예를 들어 도쿄.
그리드의 기능을 기억할 수 있도록 이름을 지정하세요. 예를 들어 도쿄의 친환경 호텔
선택하세요 사용자 정의 이 그리드에 적용하고 싶습니다.
사용자에게 가장 먼저 보여줄 카드 페이스를 선택하세요. 기본적으로 해당 인벤토리의 기본 페이스입니다.
속성을 정렬할 특성을 선택하세요. 예를 들어 친환경성.
쉼표로 구분된 키워드를 추가하세요. 웹 크롤러.
사용자에게 보여주고 싶은 언어로 제목과 설명을 추가하세요.
클릭 Save 계속하려면 버튼을 클릭하세요.

순위 그리드를 저장한 후에는 순위 그리드 페이지로 이동하게 되며, 이제 그리드를 전 세계와 공유할 준비가 되었습니다.

공유하다

위에는 순위 그리드에 사용 가능한 모든 작업이 표시된 이미지가 나와 있습니다.

업데이트그리드 구성을 업데이트합니다.
WinkLinks에 추가WinkLinks 계정에 순위 그리드를 추가합니다.
포함시키다이 그리드를 다음과 같이 포함하는 방법을 보여줍니다.그리드귀하의 웹사이트에.
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번째 줄에서는 다음을 사용하는 방법을 보여줍니다.윙크-컨텐츠-로더웹 구성 요소를 사용하여 코드에 대한 순위가 매겨진 그리드를 가져오도록 합니다.
11번째 줄에서는 Javascript를 사이트에 내장하는 방법을 보여줍니다.
13번째 줄에서는 다음을 포함하는 방법을 보여줍니다.윙크 앱 로더웹 구성 요소를 가져와서 페이지 수준 구성 기본 설정을 가져오도록 합니다.

API

그리드를 관리하려는 개발자는 다음으로 이동할 수 있습니다.개발자 > API > 인벤토리.

추가 읽기

우리의 컬렉션에 대해 자세히 알아보세요웹 구성 요소.
자세히 알아보세요윙크 워드프레스 플러그인.