Разрабатываю интернет-магазин с уникальной логикой
Недавно я решил сделать небольшой видео-обзор одного из моих проектов, которым занимаюсь на момент написания этой статьи около 5 лет. После того как я сделал видео, я решил сценарий для него конвертировать в статью для своего сайта. Здесь, в этой статье, я расскажу не о всех, а лишь о некоторых фишках этого проекта, но наиболее интересных.
В целом, эта статья является письменным изложением моего видео, так что можно просто посмотреть его:
Этото проект - интернет магазин бренда YOU, производителя женской модной одежды. Ко мне они обратились около 6 лет назад, когда у них была на руках полностью нерабочая и недоделанная версия сайта на битриксе, за которую было заплачено, кажется, около миллиона рублей.
Та версия отправилась на помойку и вместо нее было разработано достаточно простое на первых шагах решение, которое со временем превратилось в очень большой и интересный проект. Сначала я проведу небольшой обзор внешнего вида и публичных функций, а потом покажу административную панель.
Обзор возможностей интернет магазина
На главной странице у нас адаптивный слайдер с возможностью ставить видео-слайды. Видео конвертируется автоматически в оптимальные форматы. А заголовки на баннерах автоматически подгоняются и центрируются под размер экрана. Работу слайдера обеспечивает мой модуль баннеров.
На главной странице возможностью редактирования текстов лендинга администратором. Редактирование обеспечивает мой модуль правки произвольных блоков.
На сайте есть очень крутой поиск с учетом морфологии русского языка, по артикулам и описаниям. Например, от отлично ищет "синие платья" , "красная мини юбка" или "верхняя одежда".
Каталог товаров и продвинутые фильтры
В разделе каталога реализован бесконечный скролл, который работает очень быстро, не доставляя никакого дискомфорта. При этом, даже если мы находимся на условно пятидесятой странице этого каталога, то после перехода на страницу товара, мы возвращаемся на то же место, наша позиция не сбивается, а это очень важно.
В каталоге есть возможностью добавить в корзину прямо с карточки товара не заходя на отдельную страницу. Можно добавить в избранное, где интерфейс позволяет на лету формировать разные группы для избранного.
При наведении мыши есть возможность дополнительное фото, но оно отключено на мобильном, чтобы снизить объем трафика и увеличить скорость загрузки сайта. Кроме того, есть возможность поставить видео вместо первого или второго фото.
Особое внимание обращаю на повешенную юзабельность фильтров в каталоге. При выборе цвета или размера, сразу происходит фильтрация а выбранные параметры понятны и находятся виду. Есть возможность быстро сбросить все фильтры и вернуть все в начальное положение.
Карточка товара
В карточке товара есть хлебные крошки с микроразметкой (улучшает работу с поисковиками). Есть возможность быстро переключиться на вариант товара другого цвета. Если нужного размера нет в наличии, то можно оставить заявку на уведомление о поступлении этого товара на склад. А если товар есть в наличии в одном из магазинов, то есть возможность забронировать его в пару кликов не переходя на основную страницу чекаута. Также есть возможность оформить быстрый заказ, указав только номер телефона.
Все описания и доп информация об уходе, состав товара подтягивается из 1С с возможностью корректировки и добавления новых данных.
На странице товара есть еще пара виджетов с рекомендациями, за работу которых отвечает майндбокс.
Оформление заказа
На странице заказа первым делом происходит регистрация или авторизация пользователя по номеру телефона. В зависимости от настроек системы, товаров в корзине и выбранного типа доставки, меняется список возможных типов оплаты. Конечно, есть возможность применять промо коды.
Подсказка при вводе адреса осуществляется с помощью сервиса Дадата. А выбрать пункт выдачи заказов или магазин для получения товара можно с помощью интерактивной карты.
Быстро пробегусь по личному кабинету. Тут отображаются текущие заказы сайта и мобильного приложения, а также есть отдельно раздел с историей оффлайн заказов из физических магазинов. При изменении типа и адреса доставки, сразу же осуществляется ее расчет через внешнего партнера.
Личный кабинет
В личном кабинете клиента есть список текущих заказов пользователя и их статусов (и онлайн заказов, и заказов сделанных в офлайн магазине). Есть управление избранными товарами, просмотр истории начисления бонусных баллов и их расхода на заказы.
Кроме того, на сайте есть партнерская программа а в личном кабинете раздел, где ее участники могут видеть, какие заказы были оформлены по их партнерскому промокоду.
Конечно же есть редактирование профиля с дополнительными полями, настройки подписок.
Дополнительные имиджевые разделы интернет магазина
Еще на сайте есть раздел с готовыми образами и кампейнами, где можно формировать тематические мини-лендинги с разными товарами сайта. Эти лендинги могут быть разнообразную структуру и внешний вид, настраиваться из админки. Кроме этого, на сайте есть много разных тематических лендингов, статей и простых текстовых страниц.
Панель администрирования интернет магазином
Собственная система обработки заказов
В административной панели сосредоточены основные функции и фишки этого интернет-магазина. Его особенностью является наличие уникальной системы обработки заказов. Она была разработана специально для этого проекта и учитывает все тонкости процесса обработки, согласования и сборки заказа. Такой подход реально способствует повышению эффективности менеджеров, колл-центра, складов и всех остальных.
Сайт самостоятельно
- отслеживает состояние отправленных заказов в службе доставки
- делает частичные или полные возвраты средств клиенту по АПИ платежных систем
- создает и корректирует чеки через электронную кассу.
- оформляет перемещение товаров для заказа между складами для сборки
- определяет исходя параметров заказа лучший склад для его сборки и последующей отправки
В процессе обработки заказа система проводит его по четко описанным сценариям, где разные каждый сотрудник выполняет свою роль. Эти сценарии покрыты автоматическими тестами, которые запускаются при каждом обновлении сайта и в случае неудачи не выгружают опасные изменения в продакшн. При необходимости, бизнес-процесс корректируется: добавляются новые или удаляются больше ненужные события.
Все действия сотрудников при обработке заказа фиксируются, что позволяет при необходимости “откатить” какой-то из заказов на предыдущие состояния. Кроме того, система генерирует ряд отчетов, печатает листы сборки заказов, учитывает множество мелких нюансов и успешно справляется с потенциальными проблемными ситуациями, что делает ее реально ценным инструментом для управления интернет-магазином.
Интеграции с внешними сервисами
На данный момент сайт интегрирован с Клаудпейментс и системой Подели от Альфабанка, доставка осуществляется через Далли или Достависту. Расчеты заказов с системой лояльности производятся в майндбокс
С моей точки зрения, расчет заказов через внешнюю систему - не очень оправданое решение, когда под рукой уже такая гибкая система обработки заказов, которая могла бы выполнять большую часть тех же функций системы лояльности. Так как интеграция майндбокс оказывается настолько сложная и замороченная, чтобы она работала хорошо, что реально бывает проще добавить ее функции в систему заказов. Особенно это может быть выгодно на длительной дистанции. При этом интернет-магазин не находится на “игле” внешнего платного сервиса ) Нет зависимости от него.
Уникальная система управления товарами
Разделение товаров по цветам для интернет-магазина
Еще одной отличительной чертой проекта является раздел управления товарами. Изначально, в 1С, товары, которые отличающиеся цветом, были представлены как единый товар с различными характеристиками. Такой подход не подходит для интернет-магазина, где нужно показывать товары разных цветов отдельно, на отдельных страницах. Поэтому, на этапе импорта данных из 1С, происходит автоматическое разделение товаров по цветам. Потом в админке можно добавить фото для каждого цвета или распределять уже существующие фотографии между одинаковыми товарами разных цветов.
Гибкая система статусов и автоматического скрытия товара
Система также автоматически скрывает товары на сайте в случае возникновения каких-то проблем с ценами или другими критическими параметрами товара. Есть и архивный режим, позволяющий отображать товары на сайте, которые нельзя приобрести, несмотря на их наличие на складе.
Основные фишки работы с товарами:
- автоматическое разделение товаров по цветам при импорте из 1С
- автоматическая генерация уникальных текстов для мета тегов товара (например:)
- есть возможность задать массу товара для точного расчета стоимости доставки
- привязка товара одновременно к разным категориям, подобно тегам, что впоследствии позволяет очень гибко изменять структуру каталога на сайте
- возможность добавления видео к товару, или нескольких вперемешку с фото
- использование неограниченного кол-ва характеристик разных типов и единиц измерения, при этом есть наследование значений для более удобной работы фильтра в каталоге на сайте
- каждый склад из 1С может использоваться как склад для отправки заказов в доставку или как магазин, где товар можно бронировать и забирать физически.
В целом, весь интерфейс разработан с учетом удобства использования и способствует повышению эффективности управления ассортиментом.
Журналирование всех интеграций
Так как сервису приходится общаться по апи с многими внешними партнерами, то иногда возникают спорные ситуации, которые требуют логов. Для этого все запросы и ответы на внешние сервисы у меня логируются, сохраняются в Elasticsearch, при этом к ним добавляется контекс в виде номера заказа и номера клиента. Просматривать же и фильтровать эти логи можно прямо из админки.
Таким образом, можно за считанные минуты разобраться в проблеме посмотрев записи запросов в майндбокс или службу доставки по конкретному заказу, быстро устранить проблему или указать на нее партнерам. Это воистину отличная и уникальная особенность. Действия, совершенные пользователями админки тоже журналируются и могут быть проанализированы при возникновении спорных ситуаций.
Отправка СМС-сообщений одновременно через несколько шлюзов
Для обеспечения стабильной отправки уведомлений пользователям по СМС, система работает одновременно с несколькими СМС-шлюзами. В случае отказа одного из них, автоматически пытается отправить через другого. Есть возможность редактировать шаблоны СМС-сообщений клиентам, которые отправляются при смене статуса заказа.
Сайт как бэкенд для мобильного приложения
Помимо обработки собственных заказов, сайт также является бэкендом для работы мобильного приложения. Оно написано внешними партнерами и все необходимые для себя данные берёт на сайте. Для бекенд сайта предоставляет гибкое Рест-Апи для работы с бекендом мобильного приложения. Сайт производит для него расчет заказов и доставки, управляет баннерами и контентом мобильного приложения.
Любая структура каталога и сайта в целом с дружественным SEO
В этом интернет-магазине можно накрутить любую иерархию страниц, а в эти страницы помещать любые компоненты. Например, можно сделать раздел каталога с просмотром конкретной категории, а можно с просмотром синих юбок без скидки, которые остались в наличии на складах магазинов.
Можно создавать разделы со статьями, новостями, акциями, подключать заранее сделанные лендинги или другие уникальные компоненты и формы, разработанные для этого магазина. При этом данная система предоставляет полный контроль над СЕО: можно корректировать все виды заголовков и мета-тегов, добавлять тематические тексты на страницы категорий каталога и компонентов и тому подобное штуки. При этом на сайте это все отображается с качественной семантической версткой, загружается и рендерится быстро.
Кроме кастомных уникальных компонентов, сайт использует много моих универсальных модулей. Среди них:
- модуль для управления структурой сайта
- модуль баннеров
- модуль обратной связи
- модуль обработки файлов и графики
- модуль SEO и Opengraph
- модуль резервного копирования и восстановления.
Разработка с использованием Git, CI, автоматического тестирования
Вся разработка сайта ведется на gitlab, там же запускается автоматическая сборка и тестирование сайта после внесений любого изменения в код проекта. После внесения любого изменения в код проекта, запускается его автоматическое тестирование, которое проверяет работу основных функций сайта прежде чем отправить его на боевой сервер. Такой подход сильно минимизирует риски поломать сайт из-за оставленной запятой или случайно незакрытой скобкой в коде.
Полный список интеграций
На данный момент сайт имеет следующие интеграции:
- Google Analytics + Tag manager
- Яндекс.Метрика
- Segmel
- Admitad
- VK
- mail.ru
- cityADS
- Sentry для логов
- Cloudpayments
- Подели от Альфа банка
- 1С
- Dalli
- Fittin (моб приложение)
- Достависта
- Mindbox
Заключение
Исходя из описанного здесь проекта, а так же нескольких моих других аналогичных магазинов, можно сделать однозначный вывод, что использование кастомного подхода к реализации интернет-магазина с использованием современных веб-фреймворков более чем оправдано. Оно возволяет реализовать собственную логику системы обработки товаров, которая зависит от конкретного вида бизнеса и его особенностей, а не подстраиваться под универсальные процессы.
Если вам необходимо разработать интернет-магазин, который работает стабильно и обладает уникальными функциями и логикой, смело обращайтесь ко мне! У меня большой опыт в этом вопросе. Спасибо за внимание!)