View Source

Component Tree

Hotel Listing (1)
- Hotel Offers (1.1)
  - Hero Images (1.1.1)
  - Hotel Name (1.1.2)
  - Region (1.1.3)
  - Hotel Description (1.1.4)
  - Member Price (1.1.5)
  - Select Button (1.1.6)
  - Nightly Price (1.1.7)
  - Total Price (1.1.8)
  - Collect this hotel button (1.1.9)
- Sort by (1.2)
  - Recommended
  - Price
  - Distance from downtown
  - Guest rating + our picks
  - Price + our picks
  - Star rating
Filters (2)
- Search by Property Name -
  - Keyword search of Hotel English name or Chinese name
- Popular Filters
  - Control: checkboxes
  - Data: returned by JSON
- Price per night
  - Control: Slider with min/max values
  - Data: Min is the minimum value of all hotel offers. Max is maximum value of all hotel offers.
- Guest rating
  - Control: Radio group
  - Data: Any, Wonderful (9+), Very good (8+), Good (7)
- Star rating:
  - Data: 1, 2, 3, 4, 5
- Payment type
  - Data:
    - Fully refundable
    - Reserve now, pay later
- Property Type
  - Data: get distinct values from hotel offers
- Vacation Rental bedrooms
  - Data
    - Studio
    - 1
    - 2
    - 3
    - 4+
- Neighborhood
- Popular Locations
- Meal plans available
- Amenities
- Travel experience
  - Control : checkboxes
  - Data
    - LGBTQ welcoming
    - Business friendly
    - Family friendly

Components

Index	Id	Type	Name	Data	Validation	Remarks
1.1.1	image-1.1.x	image	Hero Image		Not Null	Size is fixed
1.1.2	label-1.1.2.x	label	Hotel Name			e.g ibis Hong Kong
1.1.3	label-1.1.3.x	label	Region			e.g. Sheung Wan
1.1.4	label-1.1.4.x	label	Hotel Description
1.1.5	label-1.1.5x	label	Member Price
1.1.6	button-1.1.6.x	button	Select Button			Tag to favorite
1.1.7	label-1.1.7.x	tag	Nightly Price
1.1.8	label-1.1.8.x	label	Total Price			includes taxes & fees
1.1.9	image-1.1.9.x	image	Collect this hotel			Click to add this hotel to the favorite
1.2	combobox-1.2	combobox	Sort by	Recommended Price Distance from downtown Guest rating + our picks Price + our picks Star rating

Notes:

No page refresh, only Ajax