Travelling agency site: Create the Where to stay page

The Where to stay page content displays all hotels from all countries and cities. The page gives users the ability to filter hotels on two levels - by country and then by city.

The following screenshot shows the display of Hotels widget:

travelling agency17

Configure the Hotels widget 

The hotels widget can be filtered by both city (direct parent) and by country (grandparent). 
Perform the following:

  1. Select to display hotels From the currently open city.
    This means that when city item is resolved in the URL, the Hotels widget will filter its items by this city. 
  2. Open the Advanced settings and set property EnableParentMultipleLevelFiltering to true.
    When MultipleLevelFiltering is enabled, the widget detects a parent item in the URL from all parent types up in the current type’s tree, until FilterParentTypeName, if you have set one. This means that when the current item is country, the hotels widget will resolve it and display all hotels from that country, when current item is city, all hotels will be filtered and only those in the current city will be displayed. 
    For example: 
    • ~/ where-to-stay – will display all hotels from all countries
    • ~/where-to-stay/united-states-of-america – will display all hotels from USA
    • ~/where-to-stay/united-states-of-america/new-york – will display all hotels from New York
  3. Show all items, if parent filter is not resolved.
    By default when filtering by parent item is enabled and parent item is not resolved in the URL, the widget does not show any items. 
    When you want all hotels to be displayed when there is no parent filter (city nor country), open the Advanced settings of the Hotels widget and set ShowListViewOnEmpyParentFilter property of the widget to true
  4. Go to List settings of the Hotels widget and set the My vacation - List of hotels - With Thumbnail template.

Configure the Countries and Cities filters 

To achieve a contextual filtering (first by country and then by a city in the currently selected country) you need to drop two widgets – Countries and Cities and configure them appropriately.

Countries widget 

The following screenshot shows the display of Countries widget:

travelling agency18

Configuring the Countries in the following way:

  1. Go to Advanced settings and set the display mode of the widget to be always list, by setting the ContentViewDisplayMode of the widget to Master.
  2. To display the country, by which the list of hotels is filtered, when selected, set the SelectCurrentItem property of the widget to true
    Since the widget marks the current item as selected, you must apply a SelectedItemTemplate to the list view template, so that the selected item looks different from the others.
  3. Go to List settings of the Countries widget and set the My vacation - List of countries - Filter template. 

Cities widget

The following screenshot shows the display of Cities widget:

travelling agency19

To enable filtering by cities only for the currently selected country, perform the following:

  1. Configure the Cities widget to display only cities From the currently open country.
  2. Go to Advanced settings and set the display mode of the widget to be always list, by setting the ContentViewDisplayMode of the widget to Master.
  3. To display the city, by which the list of hotels is filtered, when selected, set the SelectCurrentItem property of the widget to true.
    Since the widget marks the current item as selected, you must apply a SelectedItemTemplate to the list view template, so that the selected item looks different from the others.
  4. Go to List settings of the Cities widget and set the My vacation - List of Cities - Filter template.
  5. Since the Cities widget filters it’s content by parent item in the URL, it is important that when you navigate to details of city item, the Cities widget to continue to show list of cities in the current country – Bulgaria.
    For example, if you go from URL ~ /where-to-stay/Bulgaria to ~ /where-to-stay/bulgaria/Plovdiv
    You can achieve this by setting the EnableExtendedParentUrlResolving property of the Cities widget to true. This enables the widget to resolve country item from the URL even when the current URL is actually a child item. 

The following screenshot shows the display of Hotels widget filtered by country USA: 

travelling agency20

The following screenshot shows the display of Hotels widget, filtered by country USA and city New York: 

travelling agency21

Was this article helpful?