Hotel

Edit on Github
Open in Playground View Demo

Experimental Mode

This example uses the following experimental features: [amp-date-picker,amp-lightbox-gallery]. Enable the experiments via the button below. Some components require the AMP Dev Channel to be enabled as well. Learn more here.

Enable Dev Channel

Introduction

This is a sample showing how to implement an hotel page. It features a room availability based on date selection and a pet friendly filter on page data. The room list resize automatically after filtering and a message to the user is shown in case of empty result. The user can enlarge photoes and swipe rooms by using a gallery.

Setup

We use a few AMP extensions to dynamically render a list of rooms. We use amp-form to send a filter request to the server.

<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>

We use amp-mustache as a template rendering engine for amp-list.

<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script>

We use amp-list to dynamically show a list of rooms.

<script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>

We use amp-bind to filter rooms based on their availability.

<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>

We use amp-date-picker to simplify entering dates for checking room availability.

<script async custom-element="amp-date-picker" src="https://cdn.ampproject.org/v0/amp-date-picker-0.1.js"></script>

We use amp-lightbox-gallery to make it possible enlarge an image upon clicking ans swipe throughout all the images.

<script async custom-element="amp-lightbox-gallery" src="https://cdn.ampproject.org/v0/amp-lightbox-gallery-0.1.js"></script>

We use amp-fit-text to fit the hotel name to the available space.

<script async custom-element="amp-fit-text" src="https://cdn.ampproject.org/v0/amp-fit-text-0.1.js"></script>

Searching for available Rooms

This sample shows how to search for available rooms based on date selection. You can implement an availability search by using the amp-date-picker as input of a form. Here we are using type=range as we need 2 dates: the arriving and leaving date of an hotel reservation. Upon receiving a submit-succes event from the form response, we set the value of a global variable rooms to the form response. We are using the variable rooms throughout the sample to access the response from other AMP components.

Example

<form method="GET"
  action="https://amp-by-example-live.glitch.me/rooms"
  action-xhr="https://amp-by-example-live.glitch.me/rooms"
  target="_top"
  on="submit-success:AMP.setState({
            rooms: event.response
        })">
  <amp-date-picker id="picker"
    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"
    class="pt1 ml1">
    <input placeholder="arriving"
      id="arriving" />
    <input placeholder="leaving"
      id="leaving" />
    <button on="tap: picker.clear">Clear</button>
  </amp-date-picker>
  <button class="ampstart-btn caps m1">Check Availability</button>
</form>

Client-side Filtering

We want to make it possible for the user to filter rooms by pet friendliness. The filter shouldn't require an additional network request, instead it should work client-side. We implement a filter by adding a checkbox which sets a new variable, filterPetFriendly, whenever the value changes.

Example

<label class="ml1">Show only pet friendly rooms:
  <input type="checkbox"
    class="m1"
    on="change:AMP.setState({
      showPetFriendlyOnly: event.checked
    })">
</label>

We use amp-bind-macro to implement a function which filters the amp-list content based on the pet-friendly variable. By using amp-bind-macro we avoid duplicating the filter expression across the page.

Example

<amp-bind-macro id="filteredRooms"
  expression="rooms.filter(room => showPetFriendlyOnly ? room.petFriendly : true)">
</amp-bind-macro>

Rooms List Initial State

We are using amp-state to set the initial value of the variable rooms to the list of rooms returned by the server.

This is necessary for client-side filtering to work after the initial page load. We are using the variable rooms throughout the sample to access this list from other AMP components.

Both, amp-list and amp-state, use the same endpoint.

Example

<amp-state id="rooms"
  src="https://amp-by-example-live.glitch.me/rooms"></amp-state>

Rooms List

We are using amp-list to show a list of rooms. We bind the value of the src variable to the result of the function filterRooms so that we can show the available rooms based on the user selection.

The user can view an enlarged version of each image by clicking on it. This can be implemented using the amp-lightbox-gallery by adding the lightbox attribute to every amp-img; the alt parameter content adds also a caption for every image in the lightbox gallery.

amp-list content takes the entire height on the page from the height attribute; after filtering, it could take unused space: we are resizing by binding the height attribute to the result of the height of the image plus the margins multiplied by the length of the list.

Example

<amp-list class="rooms"
  layout="fixed-height"
  height="800"
  src="https://amp-by-example-live.glitch.me/rooms"
  [src]="filteredRooms()"
  items="."
  [height]="(80 + (16*2)) * filteredRooms().length">
  <template type="amp-mustache">
    <amp-img width="108"
      height="80"
      src="{{img}}"
      lightbox
      alt="{{name}}-{{desc}}"
      class="m1"></amp-img>
    <div class="m1">{{name}} {{#petFriendly}}&#128062;{{/petFriendly}}</div>
    <button class="ampstart-btn caps m1 mb3">book</button>
  </template>
</amp-list>

Handling Empty List Content

In case no rooms are available, we are showing a message to inform the user. We hide the message by default and show it when the list is not empty. We are calling filteredRooms() function from the amp-bind-macro to get the list of rooms filtered by user selection.

Example

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