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

网站

酒店

实验性

此示例使用以下实验性功能：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 的结果，以便我们可以根据用户选择显示可用客房。

用户可以通过单击来查看每个图像的放大版本。这可以使用 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 撰写