Основные задачи
Весной 2023 года в Беларуси официально разрешили онлайн-торговлю фармацевтики. Тогда же клиентом было принято решение разработать интернет-магазин.
На сайте было важно предусмотреть:
-
Возможность принимать заказыЧтобы организовать первую в Беларуси доставку лекарств с постепенным расширением зоны доставки
-
Связь со складомСайт должен в режиме реального времени поддерживать связь с аптеками подгружать актуальную информацию о товарах и остатках из 1С-системы
-
Пригодность для продвиженияСайт должен иметь функционал и структуру, необходимые для успешного SEO
-
Удобство администрированияКонтент-менеджерам должно быть легко и просто наполнять сайт и управлять им
-
Умный поискКоторый работает по наименованию лекарства, МНН и действующему веществу лекарства
-
Места для рекламодателейСайт должен иметь баннеры для размещения рекламы своих партнёров
ЭТАП 1. Проектирование
На данном этапе была проведена большая работа по составлению структуры сайта и каталога, удобную для пользователя и соответствующую поисковому спросу. Структуру разрабатывали наши SEO-специалисты.
Таким образом, сайт на этапе проектирования состоял из главной страницы и 9 разделов* с подразделами: О нас, Каталог, Аптеки, Служба заботы, Производители, Блог, Покупателю, Личный кабинет и Служебные страницы.
*Позже на этапе доработок был добавлен дополнительный раздел Торговые марки. Он был спроектирован по подобию раздела Производители.
SEO-специалисты на основании спроса разработали структуру каталога из 16 крупных разделов с подкатегориями (вплоть до подкатегорий 4 уровня). Суммарно мы получили около 1000 категорий, на которые уже есть спрос в поисковых системах Google и Яндекс.
После создания структуры были разработаны прототипы будущих страниц сайта.
*В списке прототипов нет страницы личного кабинета. Было решено отложить его разработку на будущие итерации развития сайта.
Особенности прототипа сайта:
- Боковое меню с разделами каталога для быстрого доступа к ним.
- Места для баннеров на главной странице, в каталоге и его категориях, в карточке товара, на информационных страницах.
- Тестовые блоки для SEO-контента на всех страницах для посетителей сайта.
- Возможность добавлять товары на страницы блога (в акции, новости и полезные статьи).
ЭТАП 2. Дизайн и вёрстка
В начале работы над проектом клиент планировал позиционировать сайт как отдельный бренд, для которого мы разработали стилистику: выбрали цвета, логотип, шрифт, разработали дизайн-концепцию рекламных баннеров.
Позже клиент в силу юридических ограничений поменял концепцию и привязал сайт к имеющемуся бренду — Inlek. Поэтому стилистика претерпела изменения: мы поменяли цвета и логотип из брендбука Inlek.
В рамках верстки сайта мы адаптировали подготовленные прототипы ко всем типам устройств, браузерам и разрешениям экрана с упором на удобство использования сайта на смартфонах.
Вся логика на стороне фронта была написана с использованием JS библиотеки React. Это позволяет гарантировать быструю загрузку страниц и приятное взаимодействие интерфейса с пользователем.
ЭТАП 3. Программирование
Ядро сайта — профессиональный фреймворк Laravel, который позволил спроектировать необходимую архитектуру приложения и иметь возможность масштабировать ее в будущем.
Сайт был установлен на систему управления Evolution CMS. Её преимущества: она бесплатна, постоянно обновляется, легко кастомизируется и имеет большое русскоязычное комьюнити разработчиков.
Этап программирования можно разделить на три большие части работ:
- Реализация базового внутреннего функционала
- Наполнение каталога
- Интеграция с 1С и автоматизация процессов
В рамках первого части работ мы:
- обеспечили возможность загружать и менять контент на информационных страницах для посетителей сайта и создавать новые
- настроили функционал добавления баннеров* на сайт
*Для каждого баннера можно задать страницы сайта и категории каталога, где он будет показан. Также для каждого баннера предусмотрено два формата: для десктопной версии и мобильной.
- внедрили приём заказов с умной корзиной, которая подбирает аптеку, в которой есть все товары из корзины
- настроили умный поиск
- настроили все формы на сайте на корректную отправку данных на почты клиента и в админ-панель сайта
- с помощью конструктора карт Яндекса создали карту со всеми аптеками клиента, а также настроили автоматическое добавление новых точек при их появлении на сайте
Одной из ключевых задач на финальных этапах разработки было наполнение каталога. Клиент ранее не имел возможности продавать товары онлайн, поэтому не имел базы товаров с пригодными для сайта изображениями, текстовыми описаниями, инструкциями. Чтобы решить эту проблему мы спарсили товары с нескольких сервисов-агрегаторов лекарств.
Последним этапом провели интеграцию с 1С. Теперь сайт в режиме реального времени подгружает актуальную информацию о наличии и остатках товаров во всех аптеках. Благодаря этому пользователи сайта могут узнать наличие необходимого препарата онлайн в режиме реального времени.
Сразу после запуска сайта была сделана базовая SEO-оптимизация, что позволило в сжатые сроки отправить страницы сайта на индексацию и сразу же получить первый реальный поисковой трафик и заказы.