JavaScript плагин выбора города для мультирегиональных сайтов

Опубликовано: Ноябрь 10, 2016 в 6:50 пп

Специалистами нашей компании был разработан универсальный JS плагин для геопозиционирования посетителей интернет-сайтов. Им сегодня и делимся!

Плагин подходит для интернет-магазинов, корп.сайтов, каталогов и лендингов, имеющих офисы в разных городах. Плагин при заходе посетителя на сайт определяет город и во всплывающем окне предлагает подтвердить либо выбрать другой. Он универсален, прост в настройке и устанавливается на любую cms.

Для кого и зачем?

Наша компания разрабатывает и обслуживает сайты компаний из различных регионов, в том числе крупные интернет-магазины, торгующие по всей России, за ее пределами, имеющие зачастую несколько офисов в разных городах.
Как следствие, возникает вопрос показа покупателям из разных городов разных контактных данных и цен.
Велосипед мы не придумывали, а просто взяли за пример для решения подобные механизмы, используемые, например, на сайтах интернет-ритейлеров Ulmart, DNS, М-Видео и т.д..

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

Как должно работать?

  • При первом посещении сайта определяется город пользователя;
  • Пользователю предлагается подтвердить свой город, нажав на кнопку “ДА” во всплывающем модальном окне;
  • Если пользователь по какой-то причине нажимает “нет”, то ему предлагается выбрать из других доступных городов;
  • При выборе города, меняются контактные данные в определенных блоках сайта.

Требования к юзабилити:

  • Плагин должен быть универсальным, то есть устанавливаться на любую CMS с минимальными доработками;
  • Простым в использовании, то есть его установка и настройка не должна занимать много времени;
  • Не должен тормозить загрузку сайта и браузер пользователя;

Несколько часов работы и напряженного кодинга и архив с плагином лежит в разделе “Скачать”.

Алгоритм работы следующий:

  • Скрипт инициализирует кнопку выбора города в заданном по class блоке;
  • определяет город пользователя по IP с помощью сервиса freegeoip.net;
  • далее, если город подтвержден, плагин меняет данные в месте, куда вставлен вывод;
  • данные о возможных городах, блоках и прочих настройках лежат в одном конфигурационном файле;
  • если город не подтверждается — предлагаем выбор среди городов, указанных в конфиге;
  • если сервис не смог определить город, то плагин предложит указанный город по умолчанию;
  • если город определился, но в конфиге такого нет, то будет предложен ближайший;
  • после выбора города плагин перезагружает страницу, обновляя данные.

Установка так же предельно проста и для программиста не составит большого труда:

  1. папку с плагином нужно загрузить в корневой каталог сайта;
  2. в файле function.php необходимо заполнить правильно ключ (город транслитом) и name (первый элемент подмассивов) остальные элементы произвольные (телефон, почта, адрес и т. д.) см.изображение 3;
  3. подключить function.php в движке сайта, желательно до ;
  4. далее необходимо изменить шаблон сайта, прописав блок с определенным значением class там, где хотим вывести кнопку вывода/выбора города;
  5. вставить php вставку в шаблон там, где будем менять информацию, вида:
    <?php $current_city = get_adress_obj();
    echo $current_city['header_adress']; //произвольный, описанный вами элемент массива города в function.php
    echo $current_city['header_phone']; //произвольный, описанный вами элемент массива города в function.php

    или
    echo iconv('utf-8','windows-1251',$current_city['header_adress']); //если кодировка не utf-8;
    ?>
  6. инициализировать плагин, см. рис. 4.

Подробнее подсказки вы найдете в архиве с плагином и самих файлах.

Рис. 3Рис. 4

Где уже установлен плагин?

Разработанный плагин незамедлительно был внедрен на давно ожидающие этого сайты, rikon.ru и vape-star.ru

Можно убедиться, что все выглядит и работает как задумано, причем, если на vape-star города всего два, то на rikon городов уже 19, а на vape-star плагином изменяется ещё и карта в нижней части страницы.

Можете пройти и посмотреть: http://www.rikon.ru/ и http://vape-star.ru/

Заключение

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

Скрыть
Перезвоним Вам в течении 30 минут!

...ну в рабочее время разумеется =)