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

網站

飯店

實驗性功能

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

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

檢視示範在 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 參數內容也會為燈箱圖庫中的每張圖片新增標題。

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>

處理空白列表內容

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

訊息，並在列表不為空白時顯示訊息。我們從 amp-bind-macro 呼叫 filteredRooms() 函式

以取得使用者選擇篩選的房間列表。

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

需要更詳細的說明嗎？

如果本頁面的說明未涵蓋您的所有問題，歡迎與其他 AMP 使用者交流，討論您的確切使用案例。

前往 Stack Overflow

尚有未說明的功能嗎？

AMP 專案大力鼓勵您的參與和貢獻！我們希望您能成為我們開放原始碼社群的長期參與者，同時也歡迎您針對您特別感興趣的問題做出一次性的貢獻。

在 GitHub 上編輯範例

作者： @aghassemi