飯店
- 簡介設定搜尋可用的客房用戶端篩選篩選器實作客房列表初始狀態客房列表處理空白列表內容

網站

飯店

實驗性功能

此範例使用以下實驗性功能：amp-date-pickeramp-lightbox-gallery。透過下方的按鈕啟用實驗性功能。部分元件也需要啟用 AMP Beta Channel。深入瞭解實驗性功能。

啟用實驗性功能
AMP 版本
正式版 Beta 版

檢視示範在 Playground 中開啟

簡介

這是一個展示如何實作飯店頁面的範例。它具有根據日期選擇顯示客房可用性的功能，以及頁面資料上的寵物友善篩選器。客房列表會在篩選後自動調整大小，並且在沒有結果時向使用者顯示訊息。使用者可以使用圖庫放大照片和滑動瀏覽客房。

設定

我們使用一些 AMP 擴充功能來動態呈現客房列表。我們使用 amp-form 向伺服器發送篩選請求。

<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>

我們使用 amp-mustache 作為 amp-list 的範本呈現引擎。

<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>

我們使用 amp-list 來動態顯示客房列表。

<script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>

我們使用 amp-bind 根據客房的可用性來篩選客房。

<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>

我們使用 amp-date-picker 來簡化輸入日期以檢查客房可用性的流程。

<script async custom-element="amp-date-picker" src="https://cdn.ampproject.org/v0/amp-date-picker-0.1.js"></script>

我們使用 amp-lightbox-gallery 使點擊圖片時可以放大圖片，並滑動瀏覽所有圖片。

<script async custom-element="amp-lightbox-gallery" src="https://cdn.ampproject.org/v0/amp-lightbox-gallery-0.1.js"></script>

我們使用 amp-fit-text 使飯店名稱符合可用空間。

<script async custom-element="amp-fit-text" src="https://cdn.ampproject.org/v0/amp-fit-text-0.1.js"></script>

搜尋可用的客房

此範例展示如何根據日期選擇搜尋可用的客房。您可以使用 amp-date-picker 作為表單的輸入來實作可用性搜尋。

在這裡，我們使用 type=range，因為我們需要 2 個日期：飯店預訂的入住和退房日期。從表單回應收到 submit-succes 事件後，我們將全域變數 rooms 的值設定為表單回應。我們在整個範例中使用變數 rooms 來存取來自其他 AMP 元件的回應。

<form method="GET" action-xhr="/documentation/examples/e-commerce/hotel/rooms" target="_top" on="submit-success:AMP.setState({
            rooms: event.response
        })">
    <amp-date-picker id="picker" layout="container" type="range" mode="overlay" locale="en" format="YYYY-MM-DD" min="2017-10-26" month-format="MMM" start-input-selector="#arriving" end-input-selector="#leaving">
        <input name="start" id="arriving">
        <input name="end" id="leaving">
        <button on="tap: picker.clear">Clear</button>
    </amp-date-picker>
    <input type="submit" value="Check Availability">
  </form>

用戶端篩選

我們希望讓使用者可以依寵物友善度篩選客房。篩選器不應需要額外的網路請求，而應在用戶端運作。我們透過新增一個核取方塊來實作篩選器，該核取方塊會在值變更時設定一個新的變數 filterPetFriendly。

僅顯示寵物友善客房

<label>Show only pet friendly rooms:
  <input type="checkbox" on="change:AMP.setState({
    showPetFriendlyOnly: event.checked
  })">
</label>

篩選器實作

我們使用 amp-bind-macro 來實作一個函數，該函數根據寵物友善變數篩選 amp-list 內容。透過使用 amp-bind-macro，我們避免在頁面上重複篩選器運算式。

<amp-bind-macro id="filteredRooms" expression="rooms.filter(room => showPetFriendlyOnly ? room.petFriendly : true)">
</amp-bind-macro>

客房列表初始狀態

我們使用 amp-state 將變數 rooms 的初始值設定為伺服器傳回的客房列表。

這對於在初始頁面載入後使用戶端篩選功能運作是必要的。我們在整個範例中使用變數 rooms 來存取來自其他 AMP 元件的此列表。

amp-list 和 amp-state 都使用相同的端點。

<amp-state id="rooms" src="/documentation/examples/e-commerce/hotel/rooms"></amp-state>

客房列表

我們使用 amp-list 來顯示客房列表。我們將 src 變數的值繫結至函數 filterRooms 的結果，以便我們可以根據使用者的選擇顯示可用的客房。

使用者可以透過點擊每張圖片來檢視放大版本。這可以使用 amp-lightbox-gallery 透過將 lightbox 屬性新增至每個 amp-img 來實作；alt 參數內容也會為 lightbox 圖庫中的每張圖片新增標題。

amp-list 內容從 height 屬性取得頁面上的完整高度；篩選後，它可能會佔用未使用的空間：我們透過將 height 屬性繫結至圖片高度加上邊距乘以列表長度的結果來調整大小。

<amp-list class="rooms" layout="fixed-height" height="800" src="/documentation/examples/e-commerce/hotel/rooms" [src]="filteredRooms()" items="." [height]="(80 + (16*2)) * filteredRooms().length" binding="refresh">
  <template type="amp-mustache">
    <amp-img width="108" height="80" src="/static/samples/{{img}}" lightbox alt="{{name}}-{{desc}}"></amp-img>
    <div>{{name}} {{#petFriendly}}&#128062;{{/petFriendly}}</div>
    <button>book</button>
  </template>
</amp-list>

處理空白列表內容

如果沒有可用的客房，我們會顯示訊息通知使用者。我們隱藏

訊息預設為隱藏，並在列表不為空白時顯示。我們正在呼叫 filteredRooms() 函數

從 amp-bind-macro 取得使用者選擇篩選後的客房列表。

<p hidden [hidden]="filteredRooms().length > 0">Sorry, no rooms available</p>

需要更多說明嗎？

如果本頁面的說明沒有涵蓋您的所有問題，請隨時與其他 AMP 使用者聯繫，討論您的確切使用案例。

前往 Stack Overflow

有未說明的特色功能嗎？

AMP 專案強烈鼓勵您的參與和貢獻！我們希望您能成為我們開放原始碼社群的長期參與者，但我們也歡迎您針對您特別關注的問題做出一次性的貢獻。

在 GitHub 上編輯範例

由 @aghassemi 撰寫