Разработали онлайн-витрину — упрощенную версию интернет-магазина
Продукт
POSiFLORA — система учета и контроля продаж в цветочном бизнесе. Клиенты системы: цветочные магазины, флористические лавки и мастерские
Проблема
На подключение к CRM-системе и регулярное обслуживание полноценных интернет-магазинов уходит слишком много ресурсов
Решение
Разработать упрощенную версию интернет-магазина:
- сохранить полную функциональность
- свести к минимуму сервисное обслуживание
- настроить интеграцию с CRM-системой и другими внешними сервисами
Результаты
- Создали альтернативу интернет-магазинам, которой пользуются более 150 клиентов POSiFLORA
- Настроили интеграцию с CRM-системой и платежными сервисами
- Команда не тратит ресурсы на обслуживание и обновление онлайн-витрин
POSiFLORA интегрируется с интернет-магазинами на WordPress
Систему POSiFLORA разработали в 2019 году специально для цветочного бизнеса. Ее идея в том, чтобы автоматизировать все бизнес-процессы: обработку заказов, сопровождение покупателей, учет складских остатков и управление персоналом.
Сначала система позволяла учитывать только офлайн-заказы:
- Покупатель приходит в цветочный магазин и заказывает букет.
- Флорист вносит заказ в систему через приложение и принимает оплату картой через POS-терминал.
- Система проводит платеж, автоматически списывает с остатков цветы и упаковку в количестве, нужном именно для этого букета.
Затем мы предусмотрели интеграцию с интернет-магазинами на WordPress, чтобы в систему попадали онлайн-заказы. Разрабатывать решение под все возможные платформы было долго и дорого, поэтому мы ограничились этой популярной и хорошо известной нам CMS.
Для обмена информацией между интернет-магазинами и CRM-системой мы написали собственный плагин. Так мы подключили к системе несколько сайтов. Подробнее про проект и интеграцию интернет-магазинов на WordPress с внешними сервисами мы рассказали в другой статье.
Проблема: на обслуживание сайтов на WordPress уходит много ресурсов
Со временем желающих работать с POSiFLORA становилось больше. Клиенты приходили со своими интернет-магазинами, которые разрабатывали разные команды на разных движках.
Каждый интернет-магазин нужно было пересоздать на базе WordPress, установить необходимые плагины, настроить интеграцию со сторонними сервисами, регулярно обновлять все компоненты и исправлять баги. С ростом количества клиентов это стало отнимать слишком много ресурсов.
Мы начали искать альтернативу интернет-магазинам. Решение должно было быть:
- Простым. Не перегруженным визуальными элементами, легко связываться с системой, не требовать регулярного обслуживания — чтобы разгрузить IT-команду.
- Функциональным. Отображать, какие букеты есть в наличии, давать возможность хозяину бизнеса продвигать свой магазин, а покупателям — оформлять и оплачивать заказ онлайн — выполнять все функции интернет-магазина.
- Унифицированным — единым для всех клиентов POSiFLORA. Это позволит подключать к системе сколько угодно витрин для любого количества клиентов.
Решение: разработали универсальный продукт — онлайн-витрину
Онлайн-витрина — это тот же интернет-магазин, только с более простой структурой и типовым дизайном. Цель онлайн-витрины — обмен информацией с POSiFLORA:
- Витрина подгружает товарные остатки из системы, соотносит их с рецептами букетов и показывает, какие букеты флорист может собрать прямо сейчас.
- Если ингредиентов для букета нет, предлагает пользователю оформить на него заявку.
- После оплаты передает заказ в систему, откуда он попадает к флористу для сборки букета и к курьеру для доставки.
Витрины решили разрабатывать сами: так не придется зависеть от плагинов или переписывать чужой сайт. Для разработки выбрали Angular — JavaScript-фреймворк с открытым исходным кодом. Мы использовали его при разработке самой POSiFLORA, а значит, витрины на Angular проще интегрировать с системой.
Было важно выпустить новый продукт как можно быстрее, чтобы у клиентов POSiFLORA не останавливались онлайн-продажи. В Angular много инструментов, которые сокращают сроки разработки. Например, CDK — основа для разработки кастомных UI-компонентов. С ее помощью мы разработали собственную библиотеку UI-компонентов для POSiFLORA и переиспользовали ее в этом проекте.
Как выглядит онлайн-витрина
Из всего внешнего оформления интернет-магазина для покупателя решающее значение имеют крупные, качественные и информативные фото букетов. Поэтому онлайн-витрины имеют минималистичный дизайн, основное пространство на сайте занимают товарные позиции.
Так выглядит онлайн-витрина салона «Клевер»
Как онлайн-витрина привлекает покупателей
Покупателей цветочных магазинов чаще всего приводит реклама в соцсетях, поисковики и маркетплейсы вроде FlowWow, Florist.ru, «Авито». Поэтому онлайн-витрины индексируются поисковиками, интегрируются с соцсетями и маркетплейсами.
Витрина салона «Клевер» индексируется поисковыми машинами: «Яндекс» выдает результат на второй строке
Витрина автоматически выгружает букеты в раздел «Товары» в соцсетях. Покупатель приходит по таргетированной рекламе на страницу магазина, смотрит товары и переходит по shopping tag в каталог букетов в онлайн-витрине. Если он что-то покупает, информация об актуальных букетах обновляется не только в витрине, но и в каталоге товаров в соцсети.
В этом коротком видео можно увидеть процесс покупки цветов в интернет-магазине в POSiFLORA.
Как покупатели оплачивают заказ
Основная цель интернет-магазина — дать пользователю возможность оплатить товар онлайн. Оформляя заказ в онлайн-витрине, покупатель может выбрать оплату при получении или картой — в этом случае покупка пройдет через платежный шлюз Сбербанка, Тинькофф или CloudPayments.
Онлайн-оплата через платежный шлюз Сбербанка
Как онлайн-витрина обменивается информацией с CRM-системой
Онлайн-витрина — это собственная разработка OrbitSoft. Она не работает со сторонними интеграционными решениями, такими как плагины для WordPress. Чтобы связать ее с POSiFLORA, мы разработали свой сервис интеграции — это микросервис на PHP в отдельном Docker-контейнере.
Микросервис выгружает из базы данных POSiFLORA товары, которые нужно отобразить на витрине:
- Сайт через микросервис отправляет запрос в базу данных.
- Чтобы найти в базе данных, какому клиенту принадлежит эта витрина и чьи данные выгружать, используется сервис Consul — децентрализованное хранилище данных в формате пар «ключ — значение». С помощью Consul микросервис понимает, с каким именно клиентом сейчас работает витрина, получает из хранилища ключ и обращается в API этого клиента.
- Информация о складских остатках для каждого букета выгружается на сайт — если цветов и декора достаточно для составления букета, он отображается в магазине.
Создать и настроить онлайн-витрину можно прямо из CRM-системы POSiFLORA меньше чем за 5 минут. Весь доступный ассортимент загружается в нее автоматически исходя из товарных остатков, стоимость букетов пересчитывается в зависимости от закупочных цен на цветы и декор в системе.
Чтобы внести изменения в сайт, не нужна помощь разработчиков. Управление настройками происходит через веб-панель системы — изменения сразу отображаются на сайте.
Клиент загружает логотип, вводит название, адрес, телефон магазина, стоимость доставки, указывает способы сортировки и отображения товаров и точку продаж, к ассортименту которой привязывается онлайн-витрина
Результат
Мы создали альтернативу интернет-магазинам, которой пользуются более 150 клиентов POSiFLORA, — онлайн-витрины на базе Angular. У витрин есть полный набор функций, присущих интернет-магазинам, но более простая структура и типовой дизайн. Преимущества решения:
- Клиенты POSiFLORA могут быстро и без помощи IT-команды запустить онлайн-магазин, который автоматически синхронизируется со складом, CRM-системой и офлайн-магазином. До онлайн-витрин разработка и интеграция каждого интернет-магазина на WordPress занимала около месяца.
- Онлайн-витрины индексируются поисковиками, автоматически интегрируются с соцсетями для онлайн-продвижения.
- Пользователи оплачивают покупки через платежный шлюз Сбербанка, Тинькофф и CloudPayments.
- Витрины обмениваются информацией с CRM-системой через микросервис на PHP. Из-за простоты решения интеграция проходит бесшовно, в отличие от предыдущего варианта — интеграции с WordPress-магазинами через плагин.
- У администратора нет доступа к онлайн-витрине напрямую — он управляет контентом через POSiFLORA. Это уменьшает количество ошибок.
- Команда OrbitSoft не тратит ресурсы на обслуживание и обновление онлайн-витрин.