Кейс: Разработка нового сайта «Мегахенд»

В первых числах декабря 2018 года ко мне обратился Дмитрий, директор по рекламе компании «Мегахенд» — одной из крупнейших в России сетей по продаже секонд-хенда с оригинальной системой скидок от 10 до 90%. Сеть «Мегахенд» состоит из 128 магазинов, представленных в 97 городах России. Дмитрий искал разработчика, способного быстро сделать сайт и нашёл мои контакты в интернете. 

Сайт Мегахенд с геотаргетингом

Проблемы

Основными проблемами Дмитрий обозначил:

  1. Есть сайт с устаревшим дизайном и неудобной навигацией. 
  2. Посетителям сложно найти ближайший магазин и посмотреть сегодняшнюю скидку.
  3. Есть новый дизайн сайта, но он требует изменений.
  4. И, главное — сроки горят и необходимо сделать новый сайт до конца месяца! 
Старая версия сайта Мегахенд
Старая версия сайта «Мегахенд»

Решение

Взвесив минусы и плюсы, решили с Дмитрием остановиться на следующем списке задач:

  1. Разработать новый сайт  на CMS WordPress — это популярнейшая и удобная система управления контентом. К тому же старый сайт тоже на этой системе. 
  2. Готовый дизайн взять за основу, но во время вёрстки внести в него изменения своими силами.
  3. Со старого сайта импортировать новости, справочные страницы и магазины. 
  4. Настроить на сайте геотаргетинг. Автоматически определять город посетителей и дать возможность самостоятельно сделать выбор своего региона.
  5. Показывать посетителю только ближайшие магазины. Настроить связь между городом посетителя и магазинами. 
  6. В каждом магазине отображать «Скидку дня». Написать скрипт, который будет определять размер сегодняшней скидки.

Итак, приступим.

Вёрстка

Во время вёрстки я парралельно вносил изменения в предоставленный дизайн. Частично поправил интерфейс и добавил элементы управления городом посетителя. Магазины Мегахенд находятся в 97 городах России, поэтому важно реализовать выбор города заметным и удобным.

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

Геотаргетинг на мобильной версии сайта Мегахенд
Представление сайта на сматрфоне

Страницы сайта я верстаю на фреймворке Bootstrap 4 — популярном инструменте включающем в себя HTML— и CSS-шаблоны оформления для типографики, веб-форм, кнопок, меток, блоков навигации и прочих компонентов веб-интерфейса. Благодаря этому фреймворку скорость вёрстки ускоряется в разы, так как не приходится каждый раз изобретать велосипед.

CMS WordPress

Заглянув в панель администратора старого сайта я почувствовал себя археологом — движок WordPress был настолько устаревший, что отказывался обновляться. В общем, с помощью магии мне удалось импортировать все данные на новую версию CMS и двинуться дальше.

Важно регулярно обновлять CMS для исправления ошибок системы и защиты от хакерских атак. Пренебрегая этим правилом вы рискуете однажды лишиться своего сайта.

На основе готовой вёрстки я сделал новую тему оформления и приступил к настройке геотаргетинга.

Редактирование магазина с панели администратора CMS WordPress
Редактирование информации о магазинах

Геотаргетинг

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

Это именно то, что необходимо реализовать на сайте «Мегахенд».

Геолокацию и выбора города я сделал с помощью плагина WT Geotargeting Pro. Этот плагин я создал 5 лет назад, и за это время он стал не только моим частым инструментом, но и полюбился многими веб-разработчиками.

Подтверждение геолокации на сайте Мегахенд
Уточнение города посетителя

При посещении сайта мы по IP-адресу определяем местоположение посетителя и указываем его город в Header и Footer сайта.

Так как ни один сервис геолокации неспособен со 100% точностью узнать местоположение посетителя, необходимо удостовериться что мы верно определили город. При первом заходе посетителя на сайт мы выводим всплывающее окно и спрашиваем верно ли определён город. Если неверно — пользователь может самостоятельно сделать выбор.

Выбор города на сайте Мегахенд
Выбор города

Кстати, работая над этим сайтом, я столкнулся с редкой проблемой — хостинг-провайдер Majordomo блокирует все порты, в том числе порт 7020, через который работает сервис геолокации IpGeoBase. Обращение в службу поддержки не решило проблему — нам отказали, написав, что открытие закрытых портов на виртуальном хостинге невозможно.

Обычно, на других хостингах, такие проблемы решаются быстро, но не в этот раз. Таким образом, нам пришлось отказаться от бесплатного сервиса IpGeoBase в пользу платного MindMax.

Начиная с апреля 2020 года это не является проблемой, так как я включил поддержку сервиса геолокации DaData в новых версиях плагина WT Geotargeting.

Магазины и скидка дня

На главной странице я настроил отображение ближайших магазинов. Если посетитель из Москвы, то он видит только Московские магазины. Для просмотра всех магазинов посетитель может перейти на страницу «Магазины».

Магазины на сайте Мегахенд

В магазинах «Мегахенд»каждый день меняется скидка по нарастающей, обнуляясь каждые 2 недели. Для удобства посетителей сайта мы сделали отображение размера активной скидки с помощью стикеров. При просмотре каждого магазина пользователь сразу видит размер сегодняшней скидки. 

Так же на главной странице и на страницах «Магазины» и «Контакты» разместили интерактивную карту Яндекс и указали на ней все существующие магазины.

Карта Яндекс на сайте Мегахенд

Да настройки отображения магазинов я использовал плагин «WT Point of sale». Этот плагин я написал для одного из давних проектов, с тех пор продолжаю его использовать, при необходимости улучшая. С помощью «WT Point of sale» можно не только связать магазины с городами посетителей, но и удобно редактировать контакты, режим работы и другую информацию в панели администратора.

Точно в срок!

Новый сайт разработали и запустили точно в срок — на всё ушло меньше месяца! Это здорово, так как обычно реализация таких проектов занимает больше времени. Заказчик был заинтересован в скорости выполнения работ, оперативно предоставлял контент, присылал правки и согласовывал все этапы выполнения работ.

В результате, к наступлению нового 2019 года, сайт был готов к приёму клиентов сети «Мегахенд»!

Ссылки по теме:

  1. Сайт сети магазинов «Мегахенд».
  2. Плагин WT Geotargeting.
  3. Плагин WT Point of sale.