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

网站

酒店

实验性

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

启用实验
AMP 版本
PROD 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-img 添加 lightbox 属性，使用 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 撰写