How to show the office locations nearest to a user

We look at a recent client implementation for showing their office locations nearest to a website visitor. We cover topics such as location tracking and integrating with APIs that return JSON data.

The Client Requirements

Our client, The Learning Experience, runs day-care centers all over the US, and they operate primarily in a franchisee model. The redesign of the website required that we should first check the user’s location

and then show day care centers within a 25-mile proximity:

When the user clicks on a center, we show them a lot of details about the center: facilities, team, events, photos and such.

From a technical perspective, there were several key constraints. The Learning Experience has a central system where all the franchisees log in to update their information (photos, events, programs, promotions etc). The website would have to integrate with this system to get the center details in real-time.

The Solution Architecture

The website was built on the WordPress platform, and hosted on WPEngine. A key aspect of the website architecture was the use of the Divi Builder.

The Location Tracking Architecture

First, the franchisee centers were modeled as Advanced Custom Fields.

Then we used a popular plugin called “Geo my WP” that can point to these office locations and automatically provide location tracking capability.

The Integration Architecture

Since all the franchisee center information is administered in a back-end system, the center detail page had to get the data in real-time via an API call that returned JSON.

Similarly, we needed to create a cron job that would run on a daily basis and call an API that would return a JSON with the list of all centers along with their addresses. This JSON would be parsed and imported into the Advanced Custom Fields.



Related Insights

Site Personalization in WordPress

In an earlier post, we had introduced the fundamentals of site personalization. In this post, we will take a specific usecase and see how to implement it in WordPress.

Vinod Pabba

Personalization

Introduction to Site Personalization

We introduce the three pillars of site personalization : Site components, Incoming state of a visitor and Behavior in the active session. We then formulate a usecase to illustrate these ideas and implement them in multiple CMS platforms such as WordPress, Drupal, AEM, Kentico and others.

Vinod Pabba

Personalization

Making your dynamic data location-aware

Many websites have dynamic data entities (offices, employees, experts) that need to be location-aware. When a user in a certain physical location comes to the site we need to show only the data is closest to them (the closest office, the nearest employee, experts within a 25-mile radius). We discuss generic approaches to accomplish this.

Vinod Pabba

Personalization

Subscribe to our newsletter