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

網站

飯店

實驗性

此範例使用下列實驗性功能：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>

處理空白列表內容

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

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

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

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

需要進一步說明嗎？

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

前往 Stack Overflow

有未說明的特色功能？

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

在 GitHub 上編輯範例

作者： @aghassemi