酒店
实验性
此示例使用以下实验性功能:amp-date-picker
amp-lightbox-gallery
。 通过下面的按钮启用实验。 某些组件还需要启用 AMP Beta 频道。 了解更多关于实验性功能的信息。
- AMP 版本生产 测试
简介
这是一个示例,展示了如何实现酒店页面。 它具有基于日期选择的房间可用性以及页面数据上的宠物友好筛选器。 房间列表在筛选后会自动调整大小,如果没有任何结果,则会向用户显示一条消息。 用户可以使用图库放大照片并滑动浏览房间。
设置
我们使用一些 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}}🐾{{/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