Amazee Labs: The Zuerich.com Filter Pages based on React and Drupal Support Service 7

Published on February 6, 2019

Annertech: Annertech: Web Agency of the Year

Annertech: Web Agency of the Year My fingers are trembling typing this. I can’t believe it. This morning everyone in Annertech land is thinking “did that really just happen?” It appears it did, we are the web agency of the year! Last night, to top off the other three awards we won – best arts […]

Flickr: Registration Desk – Tuesday – DrupalCon Dublin 2016

comprock posted a photo: The Drupal community is one of the largest open source communities in the world. We’re developers, designers, strategists, coordinators, editors, translators, and more. Each year, we meet at DrupalCamps, meetups, and other events in more than 200 countries. But once a year, our community comes together in a European city for […]

Flickr: Sprint Lounge – Tuesday – DrupalCon Dublin 2016

comprock posted a photo: The Drupal community is one of the largest open source communities in the world. We’re developers, designers, strategists, coordinators, editors, translators, and more. Each year, we meet at DrupalCamps, meetups, and other events in more than 200 countries. But once a year, our community comes together in a European city for […]

Flickr: Tuesday – DrupalCon Dublin 2016

comprock posted a photo: The Drupal community is one of the largest open source communities in the world. We’re developers, designers, strategists, coordinators, editors, translators, and more. Each year, we meet at DrupalCamps, meetups, and other events in more than 200 countries. But once a year, our community comes together in a European city for […]

Flickr: David & Paul – Scout masters – Wednesday – DrupalCon Dublin 2016

comprock posted a photo: The Drupal community is one of the largest open source communities in the world. We’re developers, designers, strategists, coordinators, editors, translators, and more. Each year, we meet at DrupalCamps, meetups, and other events in more than 200 countries. But once a year, our community comes together in a European city for […]

Flickr: Jam interview – Wednesday – DrupalCon Dublin 2016

comprock posted a photo: The Drupal community is one of the largest open source communities in the world. We’re developers, designers, strategists, coordinators, editors, translators, and more. Each year, we meet at DrupalCamps, meetups, and other events in more than 200 countries. But once a year, our community comes together in a European city for […]

Flickr: Sprinters wanted – Wednesday – DrupalCon Dublin 2016

comprock posted a photo: The Drupal community is one of the largest open source communities in the world. We’re developers, designers, strategists, coordinators, editors, translators, and more. Each year, we meet at DrupalCamps, meetups, and other events in more than 200 countries. But once a year, our community comes together in a European city for […]

Flickr: Sprint Lounge – Wednesday – DrupalCon Dublin 2016

comprock posted a photo: The Drupal community is one of the largest open source communities in the world. We’re developers, designers, strategists, coordinators, editors, translators, and more. Each year, we meet at DrupalCamps, meetups, and other events in more than 200 countries. But once a year, our community comes together in a European city for […]

Leopathu: Dynamic Block Weight in Drupal 8

In such a time, i want to place blocks in sidebar region with the dynamic weight. It means the blocks should render in different position for each page request. I have searched and tried lots of method but unfortunately i can’t find proper method to do that. So i have decided to do that with […]

Agiledrop.com Blog: AGILEDROP: Drupal‘s path from 4.0 to 8.0

Last time we guided you through early beginnings of Drupal. We explained how all started and how first versions of Drupal were made. This time we will look how this open-source content-management framework evolved from its fourth to its latest, eight version. Drupal 4.0 Drupal’s fourth version was released on 15. 6. 2002. It became […]

Flickr: Wednesday – DrupalCon Dublin 2016

comprock posted a photo: The Drupal community is one of the largest open source communities in the world. We’re developers, designers, strategists, coordinators, editors, translators, and more. Each year, we meet at DrupalCamps, meetups, and other events in more than 200 countries. But once a year, our community comes together in a European city for […]

OStatic: Web Publishing and Development: Free Tools Abound

Are you involved in DevOps and web development, or are you aiming to be? If so, you’re probably very aware of many of the tools from the open standards and open source arenas that can make your work easier. Still, these are always spreading out at a fast clip and there are some applications and […]

The Zuerich.com Filter Pages based on React and Drupal Support Service 7

We recently relaunched the updated front-end for Zürich Tourismus. In this blog post, I want to highlight some user experience improvements that we added to the existing Drupal Support Service 7 website using React. Enter the Zuerich.com filter pages.

Josef Dabernig
Fri, 04/06/2018 – 09:28

The Zuerich.com filter pages are highly interactive and allow the site visitor to explore data in a synchronized list & map view. We also applied the same concept to the different filter pages for Accommodation, Events and Restaurants.

Instant, Client-Side filtering

A key improvement to the filter pages is that they allow users to quickly explore and filter the data. The filter section immediately updates the corresponding results list according to the selected criteria. This works well for datasets below 1000 items, which are all accessed together and filtered using React on the client-side.

In traditional Drupal Support Service implementations, we would have the entire page reload for every filter click event, or, if we were to use AJAX, the entire results section would reload and require a round-trip to the server which slows down the user experience. With the new React-based approach, we were able to greatly improve the interaction speed. The search box also instantly filters the items for every character that the user enters.

Proximity Filtering

A really cool feature on top of the instant client-side filtering is the “Nearby me” search. It allows the user to either select their own geolocation or select from some popular points of interest. For tourists that aren’t yet familiar with the city, being able to choose between various important locations, such as the Zurich airport or main station, helps in their orientation.

When a point of interest has been selected, the map instantly switches to “Filter list by map” mode which only displays the results that correspond to the current map window. As the user zooms in or out, the map automatically updates the results list.

Keeping Multiple Viewports in Sync

Keeping multiple viewports easily in sync is one of the main advantages of using React to implement the filter pages. The state of the dataset and filters can be managed centrally and will automatically update the different views, such as the filters themselves, the results list as well as the markers on the map. By moving around the map, the user is also able to filter the list results to show only what is available in the current viewport which helps narrow down their search geographically.

Unlimited, Interactive, React-based Filter Pages

The Zuerich.com filter pages are built using React components within the existing Drupal Support Service 7 infrastructure that drives the main website. We fetch the data from the backend using custom JSON feeds and render the filters, the results lists and map views using React. By doing so, we significantly improved the actual and perceived performance of the user interactions with the filters and map view. The same concept has been applied to different parts of the website. There are many more of these filters pages in addition to the ones used for Accommodation, Events and Restaurants.

In the back-end, the content editors are able to create custom filter pages using a special Content Type form. Filter settings and sort or proximity search options are able to be configured accordingly. In the React-based front-end, we then show the adjusted set of filter options and adjust the list views slightly i.e. to show star ratings for hotels.


Source: New feed

REQUEST FOR PROPOSAL

Need a quick project proposal?

Submit the RFP form below and we will send you a project proposal in 48 hours. If you like what you see, we can schedule a call to discuss the project in greater detail.

Step 1 of 2

  • Contact Information

* Subject to reasonable use. Small fixes and updates must be requested one at a time and take no more than 30 minutes. Only mission-critical tasks are addressed on weekends.

Shopping Cart
There are no products in the cart!
Continue Shopping
0