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

Связали интернет-магазин на WordPress и WooCommerce с CRM-системой, сервисом SMS-рассылок и платежным шлюзом

Настроили интеграцию WordPress с внешними сервисами
  • 01
    Продукт

    POSiFLORA — система учета и контроля продаж в цветочном бизнесе. Клиенты системы: цветочные магазины, флористические лавки и мастерские

  • 02
    Задача

    Настроить интеграцию интернет-магазинов клиентов с системой POSiFLORA и другими сервисами

  • 03
    Решение

    Выбрать CMS WordPress в качестве платформы для интернет-магазинов, настроить интеграцию с помощью плагинов

  • 04
    Результаты
    • Создали для клиентов POSiFLORA интернет-магазины на базе WordPress с помощью плагина WooCommerce
    • Разработали собственный плагин для интеграции интернет-магазинов с системой POSiFLORA
    • Настроили интеграцию с платежным сервисом
    • Настроили интеграцию с сервисом SMS-авторизации и разработали утилиту автопроверки баланса для рассылок

Цветочные магазины ведут бизнес в системе POSiFLORA

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

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

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

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

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

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

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

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

Задача: связать систему POSiFLORA с интернет-магазинами

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

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

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

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

В кейсе «Разработка на WordPress» рассказываем, как создавали медиапортал для телеканала «Первый Ростовский» на базе этой CMS.

Решение: разработать плагин интеграции интернет-магазинов на WordPress с системой POSiFLORA

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

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

Подключили плагин WooCommerce

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

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

Скриншот2
Как настроить доставку по России в WooCommerce: выбираем в «Локации доставок» доставку в определенные страны, находим Россию, а после — переходим во вкладку «Доставка» и заканчиваем настройку

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

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

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

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

Настроили интеграцию с CRM-системой

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

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

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

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

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

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

Схема2

Подключили онлайн-платежи

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

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

  • Запросили у банка доступ к тестовой среде, чтобы наладить взаимодействие сервиса и сайта и сделать пробные заказы.
  • Доработали сайт под требования банка — добавили разделы с политикой конфиденциальности, условиями доставки, возврата и обмена.
  • Получили от банка доступ к реальным операциям с картами и сделали заказы на небольшие суммы, чтобы убедиться, что все работает.
Скриншот3
Чтобы подключить платежный шлюз в тестовом режиме, нужно получить в банке логин и пароль и добавить их в настройках плагина. Когда банк разрешит принимать платежи от покупателей, он пришлет новый логин и пароль. После этого нужно обновить настройки и отключить тестовый режим

Подключили сервис SMS-рассылок

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

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

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

Схема3
Покупатель оформляет заказ и регистрируется на сайте — указывает имя, почту, номер телефона. Сайт передает данные шлюзу, тот отправляет покупателю 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 выросло, на сопровождение сайтов, установку обновлений и исправление багов стало уходить слишком много времени. Мы поняли, что поддерживать столько интернет-магазинов невыгодно.

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

В чем бы вы ни нуждались, мы можем помочь!

Расскажите нам, с какими проблемами вы сталкиваетесь в своем бизнесе. Мы с нетерпением ждем вашего ответа.

Получите ответ по смс

Ваше сообщение успешно отправлено!
Представьтесь пожалуйста
Укажите номер, на который придет ответ
Нажимая на кнопку, вы даете согласие
на обработку персональных данных.