Разработка нового сайта «Мегахенд»
В первых числах декабря 2018 года к нам обратился Дмитрий, директор по рекламе компании «Мегахенд» — одной из крупнейших в России сетей по продаже секонд-хенда с оригинальной системой скидок от 10 до 90%. Сеть «Мегахенд» состоит из 128 магазинов, представленных в 97 городах России. Дмитрий искал разработчика, способного быстро сделать сайт и нашёл мои контакты в интернете.
Проблемы
Основными проблемами Дмитрий обозначил:
- Есть сайт с устаревшим дизайном и неудобной навигацией.
- Посетителям сложно найти ближайший магазин и посмотреть сегодняшнюю скидку.
- Есть новый дизайн сайта, но он требует изменений.
- И, главное — сроки горят и необходимо сделать новый сайт до конца месяца!
Решение
Взвесив минусы и плюсы, решили с Дмитрием остановиться на следующем списке задач:
- Разработать новый сайт на CMS WordPress — это популярнейшая и удобная система управления контентом. К тому же старый сайт тоже на этой системе.
- Готовый дизайн взять за основу, но во время вёрстки внести в него изменения своими силами.
- Со старого сайта импортировать новости, справочные страницы и магазины.
- Настроить на сайте геотаргетинг. Автоматически определять город посетителей и дать возможность самостоятельно сделать выбор своего региона.
- Показывать посетителю только ближайшие магазины. Настроить связь между городом посетителя и магазинами.
- В каждом магазине отображать «Скидку дня». Написать скрипт, который будет определять размер сегодняшней скидки.
Итак, приступим.
Вёрстка
Во время вёрстки я парралельно вносил изменения в предоставленный дизайн. Частично поправил интерфейс и добавил элементы управления городом посетителя. Магазины Мегахенд находятся в 97 городах России, поэтому важно реализовать выбор города заметным и удобным.
Вёрстку сделал адаптивной под мобильные устройства. Таким образом, на смартфонах и планшетах сайтом пользоваться удобно, плюс поисковые системы, благодаря этому, повышают позиции сайта при поиске.
Страницы сайта я верстаю на фреймворке Bootstrap 4 – популярном инструменте включающем в себя HTML— и CSS-шаблоны оформления для типографики, веб-форм, кнопок, меток, блоков навигации и прочих компонентов веб-интерфейса. Благодаря этому фреймворку скорость вёрстки ускоряется в разы, так как не приходится каждый раз изобретать велосипед.
CMS WordPress
Заглянув в панель администратора старого сайта я почувствовал себя археологом — движок WordPress был настолько устаревший, что отказывался обновляться. В общем, с помощью магии мне удалось импортировать все данные на новую версию CMS и двинуться дальше.
Важно регулярно обновлять CMS для исправления ошибок системы и защиты от хакерских атак. Пренебрегая этим правилом вы рискуете однажды лишиться своего сайта.
На основе готовой вёрстки я сделал новую тему оформления и приступил к настройке геотаргетинга.
Геотаргетинг
Для мультирегиональных сайтов настройка геотаргетинга приносит большую пользу: Посетитель сразу понимает что попал на подходящий сайт, так как видит название своего города, местные контакты и уместную информацию.
Это именно то, что необходимо реализовать на сайте «Мегахенд».
Геолокацию и выбора города я сделал с помощью плагина 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 года, сайт был готов к приёму клиентов сети «Мегахенд»!
Ссылки по теме:
