Складна Backend-розробка для інтернет-магазину з продажу спортивних товарів

Проєкт: інтернет-магазин спортивних товарів, почали співпрацю в 2021 році, клієнту були потрібні кастомні функції

Особливості проєкту: в каталозі 20000+ товарів

На розробку функції знадобилось більше року. Sync-Hub — це комплекс який складається з двох компонентів: WP плагіну і AWS (Amazon Web System) системи. Він синхронізує сайти з системою Dynamics 365 Business Central від Microsoft. Розглянемо, як цей комплекс допомагає бізнесу з онлайн-продажів:

• Синхронізація товарів з Business Central до WordPress. Клієнт веде бізнес, використовуючи декілька інтернет-магазинів. Відповідно, продукти, представлені на одному сайті, дублюються на інших. Для забезпечення вірного стоку товарів завантажуються дані з Business Central. Замовлення товарів в інтернет-магазині на WooCommerce теж синхронізуються з Business Central, Sync-Hub збирає дані та оновлює інформацію на всіх прив’язаних сайтах. Крім цього, товари автоматично створюються та видаляються, оновлюється контент на сторінках.
• Автоматичне завантаження додаткової інформації про товари. Якщо позиції немає в наявності, система сповіщає користувача, коли вони з’являться. Замовлення на поповнення запасів надсилаються власнику сайту автоматично.
• Синхронізація контенту. Коли менеджер оновлює контент на основному сайті, на дочірніх теж змінюється вміст автоматично. 
• Синхронізація замовлень. З Business Central можна керувати замовленнями, що надходять з різних сайтів одного власника. Оскільки Business Central підключений до shipping-сервісу, який використовується на складах, то від моменту замовлення клієнта і до пакування проходять лічені хвилини.

Крім цього, залишок товарів розраховується автоматично, а система має безліч налаштувань, для гнучкої роботи під різні сайти.

Dynamics 365 Business Central від Microsoft — система, в якій не передбачено будь-які оновлення в сторонніх сервісах. Дані необхідно постійно підтягувати інтернет-магазину на WooCommerce, а це провокує навантаження на сервер. Саме тому цю роботу виконує AWS-система. Вона постійно моніторить зміни в Dynamics 365 Business Central і синхронізує їх з сайтом за допомогою плагіна. Також дані замовлень з сайту автоматично направляються в Dynamics 365 Business Central від Microsoft. Така система допомагає витримувати навантаження в період акцій та маркетингових кампаній, коли кількість покупок досягає пікових показників.

• API Gateway;
• Simple Queue Service;
• Amazon EventBridge;
• S3.

• кастомні API Endpoints;
• Action Scheduler, CRON для асинхронних та відкладених завдань;
• велика система логів;
• кастомні таблиці для збереження даних;
• функціональний та простий  у використанні UI/UX для адміністраторів;
• автоматизації (з оновлення даних з Business Central), за які відповідають вимикаємі WP actions в налаштуваннях адміністративної панелі;
• внутрішні системні інтеграції з плагіном трекінгу посилок, оформлення замовлення.

Ще одна особливість — перерахунок системи оподаткування. За покажчик використовується найбільше значення податку продукту в замовленні. Наприклад, якщо в замовленні є 5 продуктів, з них:

• два продукти — їжа з податком 15%;
• три продукти — взуття з податком 25%.

Програма порахує усі рядки замовлення з податковою ставкою 25% (бізнес потім відраховує податки згідно цього звіту по 25% по усіх рядках), що може зекономити щонайменше 100.000€ на рік.

Це cистема, яку наша команда разом продумала та впровадила для «бізнес-клієнтів», які купують оптом, наприклад, бутіки, магазини. Вона працює на основі таких технологій та конструкцій:

GraphQL — це сучасна мова запитів для API, яка дозволяє клієнтам запитувати лише ті дані, які їм потрібні, що підвищує ефективність взаємодії між frontend і backend. У контексті WordPress, плагін WPGraphQL надає розширювану GraphQL-схему та API для будь-якого сайту на WordPress. Це дозволяє розробникам створювати багаті JavaScript-додатки, використовуючи WordPress як CMS, а сучасні фреймворки, такі як Next.js, Gatsby, Astro та інші, для презентаційного шару.

Для інтеграції WooCommerce з GraphQL існує плагін WooGraphQL, який розширює можливості WPGraphQL, додаючи підтримку функціоналу WooCommerce. Це спрощує створення headless ecommerce сайтів, дозволяючи розробникам ефективно запитувати та змінювати дані про продукти, замовлення, купони та інше через GraphQL. WooGraphQL підтримує мутації, що дозволяє швидко обробляти замовлення та інші операції.

Наша команда розробників створила основний допоміжний плагін розширення функцій WooGraphQL — GraphQL. Він додає можливості розширення основного, використовуючи Wordpress-хуки з інших внутрішніх B2B плагінів, наприклад, додавання необхідних даних з суміжних плагінів до frontend, який у свою чергу автоматично розгортається з Git репозиторію на Vercel.

Vercel — це платформа для розгортання frontend-проєктів, яка підтримує serverless-функції та інтегрується з Next.js, React, Svelte, Vue та іншими фреймворками. Що забезпечує ця система?

• Автоматичне розгортання з GitHub, GitLab, Bitbucket;
• CDN (Content Delivery Network) для блискавичного завантаження;
• Serverless-функції для backend без серверів;
• Edge Functions — розподілені виконувані функції для мінімальної затримки.

Remix — це повноцінний фреймворк для React, який орієнтований на серверний рендеринг (SSR) та ефективну роботу з даними.

На відміну від Next.js, Remix робить акцент на:

• Серверному завантаженні даних без необхідності useEffect;
• Стрімінгу контенту та прогресивному завантаженню сторінок;
• Оптимізованій навігації без клієнтських Fetch-запитів.

На Vercel Remix можна запускати у serverless-режимі, де кожен запит обробляється окремою serverless-функцією, або через Edge Functions для ще швидшої роботи.

Vercel + Remix + React дозволяє створювати швидкі, масштабовані, безсерверні сайти та інтернет-магазини на WooCommerce, які працюють без зайвих клієнтських Fetch-запитів та з максимальною продуктивністю на сервері. Завдяки цьому інтернет-магазин нашого клієнта з високим потоком замовлень та широким асортиментом в каталозі працює на блискавичній швидкості.

• Гнучкість – WP використовується як CMS, а frontend має повну свободу в UI/UX.
• Швидкість – Vercel забезпечує кешування та CDN, а Remix мінімізує зайві запити.
• Оптимізація запитів – кастомний плагін допомагає прибрати зайві поля, покращити продуктивність.

Особливість цього проєкту — понад 115 плагінів, які наша команда створила. Основні інструменти, що ми розробили, та як вони допомогли нашому клієнту:

• AutomateWoo Improvements. Це розширення функціоналу AutomateWoo плагіну. Додаються різні тригери, дії, змінні, все що потрібно клієнту для зручної автоматизації процесів які може покрити AutomateWoo.
• Inventory Lists. Звіти про залишки товарів та інші дані створюються автоматично. Формується файл csv та посилання на нього відправляється в заданий канал в програмі Slack. Крім цього, зберігається додаткова інформація про час виконання, кількість оброблених товарів тощо. Передбачено налаштування для видалення застарілих файлів.
• Add to Cart Popup. Це розширення для кошика. При додаванні товару з каталогу з’являється вікно з даними про продукт, користувач може вибрати запропоновані варіанти.
• Blacklist. Дозволяє блокувати користувачів та скасовувати всі їх замовлення.
• Bundle Additional Info. Це мініплагін, який дозволяє виводити допоміжний контент на сторінці оформлення замовлення наборів продуктів, якщо їх додано до кошика.
• Bundle Auto Update Price. Ціна на набір продуктів оновлюється автоматично в залежності від зміни вартості товарів в ньому. Відсоток знижки можна коригувати.
• Charpstar. Інтеграція цього стороннього сервісу надає можливість додавати до галереї продукту 3D-моделі в різні позиції в слайдері.
• Delivery Promise. В залежності від налаштувань в адміністративній панелі, користувачу показується час, коли товар буде доставлено, якщо він замовить його прямо зараз в інтернет-магазині на WooCommerce.
• Export finance reports. Цей плагін працює в парі з AWS системою. Кожного місяця автоматично створюються фінансові звіти по роботі вибраних сайтів. Дані зберігаються в Google-таблицях, доступ до них обмежується для деяких людей. Після формування звітів в слак приходять повідомлення з посиланням на таблиці.
• Mini Cart. Плагін для мінікошика. Доступне редагування та кастомне налаштування.
• Product Enhanced Selects. Опції варіативних товарів кастомізація, можна додавати різні характеристики продуктів. Якщо продукту немає в наявності, то  можна вказати дату, коли він з’явиться для вибраної варіації.
• Tracking Engine. Плагін дозволяє користувачам відстежувати свої посилки. 
• Find My Size. Плагін, який розраховує по попереднім замовленням клієнта, які саме розміри товарів він купує в залежності від типу продукту.
• Draft Products. Продукти, яких немає в наявності, можна перенести в Draft, вони не будуть відображатись в каталозі інтернет-магазину на WooCommerce.

В результаті клієнт отримав швидкий і неймовірно функціональний сайт. Підсумки нашої розробки інтернет-магазину:

• Sync-Hub для повної синхронізації товарів, замовлень, контенту та автоматичного завантаження інформації;
• B2B-система для високої швидкості завантаження сайту, його гнучкості та оптимізації запитів;
• безліч плагінів для автоматизації бізнес-процесів та підвищення UX інтернет-магазину.

Всі технічні втручання були спрямовані на покращення продуктивності роботи інтернет-магазину на WooCommerce та автоматизації бізнес-процесів. В результаті адміністратору треба витрачати мінімум часу для додавання товарів, редагування інформації та інші процеси на різних сайтах.