酒店
- 简介设置搜索可用房间客户端筛选筛选实现房间列表初始状态房间列表处理空列表内容

网站

酒店

实验性

此示例使用了以下实验性功能：amp-date-pickeramp-lightbox-gallery。通过下面的按钮启用实验。某些组件还需要启用 AMP Beta 通道。了解有关实验性功能的更多信息。

启用实验
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 的结果，以便我们可以根据用户的选择显示可用房间。

用户可以通过单击来查看每个图像的放大版本。这可以通过将 lightbox 属性添加到每个 amp-img 来使用 amp-lightbox-gallery 实现；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 编写