Task

One of ADCI Solutions’ clients is an American window and door manufacturer. The client needed an unusual feature: depending on the user's geolocation, the content on the website had to change slightly.

Geo-dependent content is a type of website content that changes depending on the user's location.

For instance, in hot Texas, a black window casement will heat up very quickly. This is why it is not available for ordering in this state. Another example: buyers from some states will not find a certain window series on the website because it is not manufactured there. All combinations are set in the admin panel.

How the feature is usually implemented

To dynamically change a site element, a rule is set on the backend. If the user's geolocation matches the geolocation specified in the rule, some part of the content on the newly loaded page changes or disappears.

The problem is that this kills the cache of the element, block, or, in the worst case, the entire page. This means that the user has to wait for the page to load again, although it could have simply been accessed from the cache.

How we did it

We wrote the Front-end Modifier module for working with geo-dependent content. It is built with JavaScript and implemented on the user side, bypassing the cache.

All geolocation-sensitive elements are hidden by default. As the page loads, only elements that are relevant to this geolocation appear, while irrelevant ones remain hidden. This way, we avoided poor UX. Usually, when the page loads, all elements flicker, and if the user notices an element that does not eventually appear on the page, it confuses him or her.

With the Front-end Modifier, we set rules, for example, to hide a window series for certain regions, replace this or that element, etc. When the page is loaded, the rule is loaded along with it and sorts the selected elements using JS. The module concept can be reused on other projects if the client knows exactly by what criteria they want to classify goods or services and what content to show and hide depending on known conditions.

Manual geolocation input

We allow site users to change geolocation manually in case they need to order window installation in another city.

Imagine: a user from New York goes on vacation to San Francisco. There, they decide to order new windows for their home. By default, they will be taken to a site aimed at California residents. All the user needs to do is enter their home zip code in a special box, and they will be redirected to their “home” website.

The function is implemented using custom code, which determines the location through cookies, filters site elements, etc.