Как реализовать геозависимый контент на сайте

Геозависимый контент — тип контента сайта, который меняется в зависимости от местоположения юзера. Рассказываем, как мы настроили его на сайте клиента.

Одним из клиентов студии является американский производитель окон и дверей. Клиенту понадобилась необычная фича: в зависимости от геолокации пользователя контент на сайте должен немного меняться.

К примеру, в жарком Техасе чёрный цвет наружной части будет быстро нагреваться на солнце, и поэтому в он недоступен для заказа в регионе. А покупатели из некоторых штатов не увидят в перечне определённую серию окон, потому что здесь ее не производят. Все комбинации задаются в админке.

Чтобы динамически изменить элемент сайта, на бэкенде задается правило. Если геолокация пользователя совпадает с геолокациями, прописанными в правиле, какая-то часть контента на только что загруженной странице меняется или исчезает.

Проблема в том, что это убивает кэш элемента, блока или в худшем случае всей страницы. А это значит, что пользователю приходится ждать, когда страница загрузится заново, хотя она могла быть просто взята из кэша.

Для работы с геозависимым контентом мы написали модуль Front-end Modifier. Он построен на JavaScript и реализуется на стороне пользователя в обход кэша.

Все чувствительные к изменению геолокации элементы по умолчанию скрыты. По ходу загрузки страницы на ней появляются только актуальные для этой геолокации элементы, а неактуальные остаются скрытыми. Так мы избежали некачественного UX — обычно при загрузке страницы все элементы мерцают, и если пользователь замечает элемент, который потом не прогружается, это сбивает его с толку.

С помощью модуля Front-end Modifier мы задаем правила: скрыть серию для таких-то регионов, заменить этот или тот элемент. При загрузке страницы правило подгружается вместе с ней и с помощью JS сортирует выбранные элементы. Концепцию модуля можно переиспользовать и на других проектах, если клиент точно знает, по какому признаку он хочет классифицировать товары или услуги, какой контент показывать и не показывать в зависимости от заранее известных условий.

Мы позволили пользователям сайта менять геолокацию вручную на случай, если нужно заказать установку окон в другом городе.

Представим: пользователь житель Нью-Йорка проводит отпуск в Сан-Франциско, откуда решил заказать окна домой. По умолчанию он попадет на сайт, ориентированный на жителей Калифорнии с соответствующим ассортиментом. Но ему достаточно ввести домашний почтовый индекс в специальное поле и «оказаться» там, где он хочет.

Функция реализуется с помощью кастомного кода, который через куки определяет локацию, фильтрует элементы сайта и т. д.

Читать дальше: Ограничения облачных хостингов, о которых вы не знали