Настроили интеграцию WordPress с внешними сервисами

Система POSiFLORA создана специально для цветочного бизнеса. Она объединяет приложения для флористов и курьеров, веб-панель для владельцев бизнеса и администраторов магазинов.

Владельцы цветочных магазинов покупают подписку на POSiFLORA, и она помогает им организовать сразу все бизнес-процессы:

• Учет складских остатков и планирование закупок.
• Обработку заказов и анализ продаж.
• Курьерскую доставку букетов.
• Программу лояльности для покупателей.
• Учет рабочего времени флористов.

Проект был запущен в 2019 году. Тогда мы начали с разработки MVP: сделали приложение, в котором флористы вели учет офлайн-продаж.

Так выглядела покупка букета через MVP-версию POSiFLORA:

• Покупатель приходил в цветочный магазин и заказывал букет.
• Флорист вносил заказ в систему через приложение и принимал оплату картой через POS-терминал.
• Система автоматически списывала цветы и упаковку в количестве, нужном именно для этого букета.

Идея оказалась востребованной: приложение установило 30 компаний, через 3 месяца их число выросло до 100, еще через год у приложения было больше 1000 пользователей.

Со временем набор функций расширился: мы добавили приложение для курьеров, возможность планировать закупки, распределять смены между флористами, рассчитывать зарплату сотрудников. Одной из основных задач было подключить к системе онлайн-продажи.

Чтобы онлайн-заказы попадали в систему, нужно продумать интеграцию интернет-магазинов клиентов с системой POSiFLORA. Разрабатывать интеграцию с нуля под все возможные платформы долго и дорого. Мы решили ограничить варианты и разрабатывать интеграцию на базе готового, хорошо известного нам решения — CMS WordPress.

Мы выбрали WordPress по нескольким причинам:

• Это бесплатная, популярная платформа для создания сайтов.
• Для WordPress есть много плагинов — микросервисов, которые наделяют сайт дополнительными функциями. Например, WooCommerce — популярное семейство плагинов, которые превращают обычный текстовый блог в полноценный интернет-магазин.
• С помощью плагинов сайт на WordPress можно связать со сторонними сервисами, необходимыми интернет-магазину, например с платежными системами.
• Если существующих плагинов недостаточно, открытый исходный код позволяет дорабатывать сайты под задачи проекта.

У OrbitSoft огромный опыт разработки на WordPress. Команда знакома с возможностями CMS, со всеми готовыми плагинами и может написать собственный плагин — для интеграции сайта с системой POSiFLORA.

Мы решили разработать свой плагин. Он должен связать интернет-магазин с POSiFLORA и обеспечить обмен информацией:

• из системы в интернет-магазин выгружать список букетов, цветы и декор для которых есть на складе;
• из интернет-магазина в систему отправлять заказы, оформленные на сайте.

Для WordPress есть много плагинов, которые помогают кастомизировать сайт. Самый популярный плагин для онлайн-торговли — WooCommerce. В нем реализованы функции, необходимые для интернет-магазина: загрузка товаров, работа с остатками, настройка стоимости и корзины.

Мы скачали плагин в каталоге WordPress, установили и активировали его. На первом этапе создали базовые страницы: «Магазин», «Корзина», «Оформление заказа», «Профиль покупателя».

К основному плагину WooCommerce мы установили несколько дополнительных: они помогают настроить страницу оформления заказа, добавляют фильтры для поиска товаров и другие сервисы, необходимые для интернет-магазина.

Например, плагин Flexible Checkout Fields позволяет изменить поля на странице оформления заказа. Так как базовые настройки WooCommerce рассчитаны на американские магазины, при оформлении заказа покупатели должны указывать адрес для выставления счета. В России нет необходимости указывать эту информацию. Чтобы не вводить пользователей в заблуждение, мы убрали лишние поля.

Плагины-дополнения к WooCommerce

Название плагина	Для чего нужен
Flexible Checkout Fields	Настраивать поля на странице оформления заказа
PickPlugins Product Filter for WooCommerce	Ввести фильтры: по цене, тегам и другим критериям
WooCommerce Admin	Получить дополнительные настройки в административной части
WooCommerce Services	Добавить сервисы для интернет-магазина, например оформление доставки

Мы написали плагин WooCommerce and POSiFLORA Data Exchange. Это микросервисное приложение на PHP. Оно отвечает за обмен информацией между интернет-магазином и системой:

1. Плагин делает одностороннюю выгрузку товаров из POSiFLORA в интернет-магазин. Для этого учитывает актуальные складские остатки и информацию из раздела «Рецепты»: сколько цветов и упаковочных материалов есть в распоряжении флориста и сколько нужно для сборки каждого букета.

В результате на сайте отображаются только те букеты, которые флорист может собрать. Если материалов не хватает, покупатель не видит букет на сайте и не может его заказать.

2. Плагин получает заказы из интернет-магазина и добавляет их в систему:

• Раз в 5 минут направляет на сайт POST-запрос: «Есть ли новые заказы?»
• Сайт обращается к базе данных. Если новые заказы есть, данные через плагин отправляются в POSiFLORA.
• Система обрабатывает заказ: списывает со склада нужные для букета материалы, уведомляет флориста о том, что нужно собрать букет.

3. Плагин передает в интернет-магазин информацию о том, что букет собран и передан в доставку, чтобы сайт уведомил покупателя.

Чтобы покупатели могли оплачивать заказы онлайн, мы установили плагин для WordPress, который поддерживает оплату картой через Сбербанк.

Как мы подключали оплату через плагин:

• Запросили у банка доступ к тестовой среде, чтобы наладить взаимодействие сервиса и сайта и сделать пробные заказы.
• Доработали сайт под требования банка — добавили разделы с политикой конфиденциальности, условиями доставки, возврата и обмена.
• Получили от банка доступ к реальным операциям с картами и сделали заказы на небольшие суммы, чтобы убедиться, что все работает.

При оформлении онлайн-заказа сайт просит покупателя пройти SMS-верификацию: указать номер телефона и ввести SMS с кодом подтверждения.

Это нужно, чтобы цветочный магазин мог уведомить покупателя о состоянии заказа, связаться с ним, если возникла проблема. Также контакты покупателей нужны для маркетинговых целей. Магазин собирает клиентскую базу, ведет аналитику, делает рассылки об акциях и скидках.

Для SMS-рассылок мы выбрали сервис «Простор SMS» и разработали собственный шлюз, который с ним интегрируется. Это происходит так: шлюз по HTTP-протоколу отправляет GET- и POST-сообщения на сервер «Простора SMS», а он отправляет сообщения.

«Простор SMS» — платный сервис. Чтобы цветочный магазин мог сделать рассылку, на его балансе в сервисе должно быть достаточно денег.

Мы разработали дополнительный микросервис, чтобы клиентам POSiFLORA не приходилось проверять счет перед каждой рассылкой. Микросервис запрашивает у «Простор SMS» баланс. Если денег меньше, чем выставлено в настройках, он отправляет магазину сообщение о необходимости пополнить счет.

Внешний вид сайта мы настраивали с помощью визуального конструктора страниц — плагина Elementor. Он разбивает страницу на блоки, в каждый из которых можно добавить один из предустановленных элементов.

В библиотеке есть готовые шаблоны для сайтов. Мы взяли за основу один из таких шаблонов и создали на его основе свою структуру страницы.

Плагины-дополнения к Elementor

Название плагина	Для чего нужен
Granular Controls For Elementor	Улучшить интерфейс плагина Elementor
Slider Revolution	Создавать слайдеры
YITH и YITH WooCommerce Wishlist	Создавать списки желаний в WooCommerce-магазинах
Theme Editor	Редактировать файлы темы через административную часть WordPress
Unlimited Elements	Создавать собственные виджеты для Elementor

Дополнительные плагины для улучшения функциональности и юзабилити сайта:

Название плагина	Для чего нужен
Breadcrumb NavXT	Строить удобную навигационную цепочку, если на сайте много категорий и подкатегорий
Loco Translate	Переводить названия товаров, описаний и пунктов меню
Code Snippets	Вносить в плагины изменения, не заходя на сервер
Contact Form 7	Создавать формы на сайте, например форму регистрации
FileBird Lite	Создавать директории в медиабиблиотеке, чтобы файлы темы оформления не смешивались с изображениями товаров

• Создали сайты на WordPress для клиентов POSiFLORA. С помощью плагина WooCommerce и его дополнений сделали из них полноценные интернет-магазины. С помощью плагина Elementor настроили визуальное оформление.
• Подключили сторонние сервисы: платежный шлюз и сервис SMS-рассылок.
• Разработали собственный плагин интеграции, чтобы связать интернет-магазины с CRM-системой POSiFLORA.

WordPress — удобное решение с готовыми инструментами. На нем мы создали несколько интернет-магазинов и подключили к ним дополнительные сервисы. Когда число клиентов POSiFLORA выросло, на сопровождение сайтов, установку обновлений и исправление багов стало уходить слишком много времени. Мы поняли, что поддерживать столько интернет-магазинов невыгодно.

Мы решили отказаться от этого решения и разработали новое, полнофункциональное, но максимально облегченное — онлайн-витрины. О том, как они работают, мы расскажем в другой статье.