Кейс: динамическая страница доставки в интернет-магазине
На примере нашего постоянного клиента – интернет-магазина “Летопись”, – мы расскажем, как добиться отображения нужного контента на странице, основываясь на геолокации пользователя.
Коротко о компании и задаче
https://letopise.com входит в число крупнейших интернет-магазинов православных товаров в России. Склад компании находится в Москве, но магазин работает по всей РФ, в него постоянно поступают заказы из регионов, начиная от Калининграда и заканчивая Владивостоком и Сахалином.
Разработка страницы “О доставке”
Изначально страница доставки была общей для всех городов и регионов. В ней описывались общие условия доставки.
Так как география продаж интернет-магазина очень обширная, было принято решение усовершенствовать страницу доставки и отображать только нужную информацию – соответствующую региону пользователя. Очевидно, что такой подход делает делает услуги значительно более прозрачными и понятными для потенциального покупателя. А значит – повышает конверсию интернет-магазина.
Геозависимый контент – информация на сайте, которая автоматически меняется в привязке к местоположению пользователя. Чаще всего геозависимый контент в интернет-магазине (на Битриксе или других CMS) используют для вывода информации о доставке, но тем же способом удобно отображать, например, контакты ближайшего регионального офиса или розничного магазина.
Определение местоположения пользователя по IP
Интернет-магазин “Летопись” работает на “движке” Битрикс, для которого существует множество модулей автоматического определения местоположения пользователя по IP. Один из таких мы и использовали при решении поставленной задачи. Для удобства посетителя автоматически определенный город выводится в шапке сайта, его легко изменить в пару кликов мыши:
Модуль довольно легко настраивается и имеет модальное окно с отображением наиболее часто выбираемых городов или регионов. В этом окне присутствует также удобный поиск по городам:
Этот же модуль подставляет местоположение покупателя при оформлении заказа, что значительно упрощает заполнение формы пользователем. Практически сразу он видит правильную цену и сроки доставки.
Динамические страницы “О доставке” на сайте интернет-магазина
Используя возможности модуля определения местоположения, мы создали динамическую страницу “О доставке”. Нужные данные загружаются только в том случае, если они действительно нужны пользователю – для каждого города индивидуально. Мы сделали 15 страниц для крупных городов, 2 страницы областей и одну общую страницу для всех остальных.
Если пользователь заходит на сайт из города, для которого мы разработали индивидуальную страницу, он видит максимально точные и полные данные о доставки в этот населенный пункт. Только реальные цены и сроки:
Если же населенный пункт не входит в 15 крупнейших, посетитель видит “общую” страницу “О доставке” интернет-магазина. На нём собрана обобщенная информация, актуальная для всех городов и регионов страны:
Карты пунктов самовывоза на странице “О доставке”
Виджет с выборов пункта самовывоза (ПВЗ) при оформлении заказа – это не новость. Но немногие используют карты ПВЗ на странице “О доставке”. Наша динамическая геозависимая страница делает это возможным, ведь мы показываем информацию для конкретного города, а значит – найти ближайший пункт забора заказов очень удобно.
Для реализации таких карт мы использовали модули БоксБерри и СДЭК. Они работают динамически и показывают только нужную информацию о пунктах выдачи заказов, не перегружая страницу. Модальное окно информативное и имеет карту с текущим городом, с которой вы можете взаимодействовать.
Карта ПВЗ Boxberry
Карта ПВЗ СДЭК
Вместо заключения
Динамические страницы доставки с геозависимым контентом – отличная возможность повысить удобство интернет-магазина для потенциального покупателя. Ваш клиент будет точно и заранее знать условия доставки товаров в свой город, а значит – с большей вероятностью сделает заказ. Без лишних вопросов, недоразумений, конфликтов и звонков в кол-центр.
Fatal error: Uncaught TypeError: array_column(): Argument #1 ($array) must be of type array, bool given in /home/olegfrol/webnauts.pro/www/wp-content/themes/webnauts/template-parts/aside-case.php:18 Stack trace: #0 /home/olegfrol/webnauts.pro/www/wp-content/themes/webnauts/template-parts/aside-case.php(18): array_column(false, 'term_id') #1 /home/olegfrol/webnauts.pro/www/wp-includes/template.php(772): require('/home/olegfrol/...') #2 /home/olegfrol/webnauts.pro/www/wp-includes/template.php(716): load_template('/home/olegfrol/...', false, Array) #3 /home/olegfrol/webnauts.pro/www/wp-includes/general-template.php(204): locate_template(Array, true, false, Array) #4 /home/olegfrol/webnauts.pro/www/wp-content/themes/webnauts/single-case.php(67): get_template_part('template-parts/...', 'case') #5 /home/olegfrol/webnauts.pro/www/wp-includes/template-loader.php(106): include('/home/olegfrol/...') #6 /home/olegfrol/webnauts.pro/www/wp-blog-header.php(19): require_once('/home/olegfrol/...') #7 /home/olegfrol/webnauts.pro/www/index.php(17): require('/home/olegfrol/...') #8 {main} thrown in /home/olegfrol/webnauts.pro/www/wp-content/themes/webnauts/template-parts/aside-case.php on line 18