New Royal Academy of Dance Website -The Find a Dance Teacher Functionality (Part 6)

One of the most important areas of the website is the Find a Dance Teacher page. The functionality on this page provides a major selling point for the services that the Royal Academy of Dance can offer:

• For existing students and potential new ones, as well as their parents and friends, it provides the ability to find RAD-accredited dance teachers in their local area. This also provides reassurance that the teacher is legitimate and is affiliated with a well-respected organisation with stringent controls, helping to avoid safeguarding concerns.
• For dance teachers, the listings can help them to potentially recruit interested new students – a major membership benefit associated with becoming a RAD-accredited teacher.

It was therefore vital that this complex area of website functionality worked as well as possible. This functionality consists of two key elements – the backend logic to retrieve teacher data from the external Microsoft Dynamics / Silverbear CRM; and the frontend user-experience.

Backend Functionality

We implemented a custom mechanism on this website to retrieve the latest teacher data from the external CRM periodically, and store a temporary copy of this data in the underlying website database. This approach was used so that the teacher info could be displayed on the frontend as quickly as possible, and to reduce the potential performance implications associated with attempting to retrieve this data from the CRM in ‘real-time’.

The CRM Data Retrieval Mechanism

Various rather convoluted criteria determined whether a teacher membership record in the CRM was actually eligible for display within the ‘Find a Teacher’ functionality itself, or within the ‘Professional Register of Teachers’ shown lower down upon the same page, or not at all. On the new website, it was also now necessary to retrieve teachers who offer ‘Silver Swans’ classes – and these teachers may or may not be RAD registered.

To assist with the correct retrieval of teacher based on the relevant criteria, automated workflows were set up in the CRM to populate the relevant details. Based on this, custom ‘Views’ were set up within the MS Dynamics CRM, to retrieve & display the correct teacher records based on the criteria. In turn, this meant we were able to extract FetchXml files containing the data fields to extract, as well as the various conditions to automatically filter the data correctly to ensure that only the correct teachers were retrieved.

Then upon the website itself, we set up a scheduled Cron task to run periodically. This ran a custom WP CLI command to retrieve the latest teacher data from the CRM and store it in the website’s underlying database. Teacher data was retrieved via SOAP using the FetchXml files above to load the data that the website needed.

Teacher Address Geocoding

For those teachers who opt in to displaying their data within the ‘Find a Teacher’ functionality, we implemented an additional mechanism to subsequently retrieve the teacher location coordinates, based on their supplied address(es). On the new website, this is achieved by sending a request to Google’s Places Text Search API, based on the full teacher address, to try to retrieve as accurate a location as possible. The resulting coordinates are stored in the website’s database.

If this request was unsuccessful (which can happen if Google does not have a record of that address, or the address was entered incorrectly in the CRM), the website falls back to using the teacher’s postcode and sending this to Google’s Geocoding API instead, to retrieve the rough teacher location.

Alternatively, teachers can manually specify their location coordinates via the CRM itself, in which case these are used as-is, without needing to send requests to either of the Google APIs described above.

Loading Teacher Data from the Site Frontend

We set up a custom WP REST API endpoint to allow the frontend functionality to load the teacher data from the database backend. We put a lot of effort into optimising this functionality to ensure that the data loads as quickly as possible, so that the frontend feels responsive.

This endpoint needed to be capable of loading the appropriate teacher records, based on the specified teacher search/filter criteria. Most notably, it needed to be able to retrieve teachers located within a specified radius (distance) from the supplied location coordinates. This was achieved via the usage of SQL query functions such as ST_Distance_Sphere() and POINT(), which are available in modern versions of MariaDB & MySQL database systems.

Frontend Functionality

To provide the smoothest possible User Experience, we were keen for the frontend functionality to work as ‘fluidly’ as possible – i.e. more like a mobile app with new data getting loaded automatically and seamlessly in response to user actions (such as zooming in or out of map, changing the location, or adjusting any of the filter options, clicking on a teacher listing or map marker to show more details, etc) – without requiring the entire page to be reloaded, or extra buttons to be clicked.

App State Management

For this to work reliably, we felt that the best approach would be use a JavaScript framework/library that could automatically keep track of the overall ‘app’ state and handle any updates without needing to manually manipulate the page DOM on every occasion. As these capabilities are core feature of the React library, and this library was already being used for custom blocks and other functionality within the site admin area, this library was a natural choice for implementing the frontend functionality for this major website feature.

To assist with keeping track of the ‘app’ state, we also opted to use the @wordpress/data JS module, which is built on top of Redux – a widely used app state management solution. This module provides additional capabilities that are not directly built-in to Redux itself, which we felt would be useful – for example the ability to add ‘side effects’ such as asynchronously retrieving data from the server whilst also being able to retrieve cached data locally, helping the application run more quickly, and avoiding unnecessary server requests.

By using a solution based upon Redux, it meant we were able to keep track of any changes to the application as a result of user actions, new data from the server, etc. This in turn helped us to debug various issues that were encountered during development.

Google Maps Integration

We used the excellent react-google-maps library to create a seamless integration between the custom React code and the Google Maps API. Behind the scenes, if the map location or zoom level changes, the radius of the currently visible map area is calculated using Google’s Geometry library. This in turn makes it possible to request just those teachers who are located within the area shown on the map. A custom debounce React hook is used to avoid unnecessary requests to the server if the user hasn’t yet finished moving the map around; whilst also ensuring that any existing locally stored data can be displayed in real time, to make the app feel responsive.

The above also helped to make it straightforward to implement functionality for users to easily navigate to a new location, address, postcode or country via a ‘find-as-you-type’ UI, using Google’s Places Autocomplete widget. When a new location is selected, the country associated with the new location is detected, and the map is also automatically updated to display the relevant location. As a result, the new teacher results can then be retrieved for that location, using the same mechanism as above.

Additional Frontend Functionality

The teachers can be filtered based on various additional options, such as a teacher or school name, or various ‘badges’, such as whether the teacher offers online classes.

For the remaining find-as-you-type dropdowns, we used the React Select library, as this provided a very comprehensive API to allow the behaviour of each dropdown to be customised; and so that new results can be retrieved automatically from the server, e.g. to only load the names of teachers or schools who are located within the current country.

Additional capabilities were provided to improve the experience for mobile device users, such as auto-collapsing the filter options by default (whilst still making them easily accessible), automatically scrolling the user to the correct part of the page when required, etc.

Finally, it was important to ensure that this functionality was in line with GDPR legislation, so that any tracking of user behaviour or storage of cookies only happens with user consent. Because the functionality described above is tightly integrated with Google Maps, it was always possible that Google could store cookies, which we have no direct control over.

We therefore designed an alternative UX that would still provide as much access to the Find a Teacher functionality as possible if the user has not yet consented to the storage of cookies on this website. This did not load any Google components such as the map and the find-as-you-type location field in this scenario, and instead allowed the list of results to be filtered based on the current country. If cookies are then subsequently accepted, the full ‘enhanced’ experience is loaded immediately, so that users can access the full functionality without needing to reload the page.

Conclusion

Overall this was a large but very rewarding project to work on, and we are proud of the resulting website. All of the people at the Royal Academy of Dance who were involved with this project were very pleasant to interact with, and extremely appreciative of all our efforts, which made the experience very positive.

Generate UK has a team of talented developers who have a lot of experience working with the many technologies, libraries, frameworks, plugins extensions, APIs, and tools mentioned within this article. Please get in touch if you would like to learn more about how we can help to fulfil the technical or marketing needs of your business.