Інтернет-магазин художніх товарів на Laravel (США)
Про проєкт і задачі
Sketchbar — це американський інтернет-магазин товарів для малювання: маркерів, лайнерів, ручок-пензликів, альбомів і замальовників. Sketchbar приваблює художників не тільки шопінгом, а й наявністю справжнього мистецького ком’юніті, де можна навчатися та ділитися своїми роботами.
Такий вигляд інтернет-магазин отримав після втручання команди Webnauts, а саме:
- інтеграції систем оплати й доставки;
- реалізації системи використання промокодів;
- впровадження програм бухгалтерського обліку та автоматичного розрахунку податків;
- інтеграції з маркетинговою платформою для співпраці з інфлюенсерами;
- налаштування тригерних email-розсилок тощо.
Ми реалізували інтернет-магазин, враховуючи специфіку американського ринку та чинного законодавства. Як саме, розповідаємо докладніше в новому кейсі.
Верстка інтерфейсу
Front-end частина інтернет-магазину виконана за допомогою Twig — гнучкого, швидкого й безпечного шаблонізатора для PHP. У поєднанні з JavaScript-бібліотекою jQuery ми отримали зручний інтерактивний інтерфейс із слайдерами, формами зворотного зв’язку та іншими елементами:
Сторінка з каталогом товарів відображає одразу 20 компактних карток, надаючи користувачу повний огляд асортименту та досвід без зайвих тілорухів:
Верстаючи товарну картку, ми робили наголос на функціональності, компактній композиції елементів, вичерпному описі (зокрема про акції та знижки) й адаптивності сторінки під різні пристрої:
Функціональність сайту
Laravel — потужний PHP-фреймворк, який зібрав навколо себе цілий відділ прихильників у Webnauts. Розробка нестандартних і високонавантажених проєктів зі складними функціями та сервісними інтеграціями не обходиться без цієї технології.
Наші клієнти, які замовляли розробку на Laravel, теж оцінили зручність управління сайтом. Інтуїтивно зрозуміла персоналізована адмін-панель Laravel Nova дозволяє легко редагувати контент і керувати продажами інтернет-магазину:
Системна інтеграція
Для повноцінної роботи інтернет-магазину ми здійснили декілька інтеграцій з міжнародними та суто американськими сервісами. Насамперед розпочали з трьох головних систем: платіжної, системи доставки та оподаткування. Без них неможливе будь-яке інтернет-замовлення в США.
Платіжна система
Першою реалізованою інтеграцією став сервіс Braintree, що забезпечує безпечні та швидкі онлайн-платежі через декілька систем: PayPal, Google Pay, Apple Pay та ін. У процесі інтеграції ми використали PHP-бібліотеку та JavaScript-модуль для коректної й надійної передачі платіжної інформації.
Система доставки
Окей, товар оплачено. Прийшов час впровадити функцію доставки. Для цього ми інтегрували інтернет-магазин із системою ShipStation, яка дозволяє:
- оформлювати доставку через популярні сервіси DHL, UPS і USPS;
- розраховувати точну вартість доставки в різні куточки США;
- відстежувати місцеперебування посилки;
- друкувати штрих-коди поштових відправлень тощо.
ShipStation має більш якісно спроєктований API в порівнянні з іншими програмами (зокрема із сервісом Shipworks, який не пройшов наше випробування).
Система оподаткування
Система оподаткування в США передбачає наявність Sales Tax — споживчого податку на деякі товари у вигляді невеликого відсотка. З огляду на це ми інтегрували інтернет-магазин із сервісом автоматизації оподаткування Avalara. Ця програма допомагає автоматично розрахувати податок залежно від типу товару та місцеперебування покупця, адже податкові ставки відрізняються за розміром на рівні штату, міста, району і навіть округу.
Сторінка замовлення
Відмінність систем українського та американського оподаткування впливає на інтерфейс і функціональність checkout-сторінки. Ми написали її за допомогою JavaScript-бібліотеки jQuery та технології AJAX. Окрім того, ми створили невеличкий односторінковий застосунок Single-page application (SPA), який взаємодіє з усіма наявними інтеграціями та дозволяє користувачам зручно обрати сервіс доставки, миттєво дізнатися про розмір податку та безпечно оплатити покупку:
Бухгалтерська програма обліку
Коли ми поставили інтернет-магазин на рейки, постало питання обліку товарів і продажів. Наш клієнт уже мав досвід використання програми QuickBooks, причому не вебверсії, а desktop-додатка. Це не було легко, але ми інтегрували інтернет-магазин саме з desktop-версією звичної для клієнта системи обліку товарів.
Окрім цього, сервіс мав доволі застарілу технологію обміну інформацією — SOAP (Simple Object Access Protocol), яка використовує XML-документи та здійснює обмін між сервером і клієнтом за запитом. У результаті інтеграції ми створили таку систему обміну інформацією, яка кожної години перевіряє сайт на наявність нових замовлень і надає інформацію про усі товари на складі. Все відбувається автоматично або за бажанням користувача, який будь-коли може натиснути кнопку в додатку QuickBooks і запустити синхронізацію.
Автоматична email-розсилка
Для відстежування діяльності відвідувачів сайту та створення автоматичних еmail-розсилок ми інтегрували інтернет-магазин художнього приладдя із сервісом Klaviyo. Зокрема, налаштували кастомні події, які не тільки слугують тригерами для автовідправлення email-листів, а й допомагають краще зрозуміти інтереси користувачів. Так, майже кожен рух на сайті відбувається під наглядом Klaviyo: вебдодаток надсилає інформацію про різноманітні події, такі як оформлення замовлення, відвідування певних сторінок сайту, відправлення товару до кошика чи його видалення тощо.
Реалізація системи купонів
Практика використання промокодів і купонів — ефективний спосіб для підвищення лояльності клієнтів і продажів інтернет-магазину.
Як і на всіх e-commerce сайтах, застосувати купон на Sketchbar можна при оформленні замовлення: просто зазначте код в окремому полі та миттєво дізнайтесь нову вартість покупки.
А тепер розповімо, як це працює зсередини.
Створити купон на сайті можна 3-ма способами:
- Вручну. Для цього ми розробили фільтр-меню з декількома параметрами: тривалість акції (дата початку та закінчення), кількість товару (група або один екземпляр), кількість людей, які можуть використати купон. Знижковий код купона у вигляді 1 слова можна використати лише раз.
- Автоматично. Тут не обійшлося без вищезгаданого сервісу Klaviyo. На сайті інтернет-магазину ми створили правило автоматичної генерації коду з тими ж фільтрами, що й при ручному способі. Як тільки користувач заповнить форму та створить запит у Klaviyo — купон генерується й автоматично надсилається на вказану електронну пошту. Передбачено разове застосування купона з одного облікового запису.
- Код купона у спливному вікні. На вебсайті з’являється форма, після заповнення якої генерується купон і автоматично надсилається на вказаний e-mail. Його можна одразу ж застосувати в кошику, проте він теж разовий і має термін придатності. В майбутньому за отриманим купоном ми плануємо надсилати на пошту цифровий продукт у вигляді pdf-файлу. Це може бути каталог, електронна книга чи гайд з малювання.
Інтеграція системи для контролю статистики й оплати реклами у блогерів
Для просування інтернет-магазину художніх товарів власник Sketchbar вирішив залучити блогерів. Щоб спростити контроль за ефективністю реклами та автоматизувати процес винагороди за роботу інфлюенсерів, ми інтегрували інтернет-магазин з афілійованою маркетинговою платформою ShareASale. Отже, партнерам інтернет-магазину буде автоматично нараховуватися комісія за рефералів — людей, які прийшли на сайт від блогера за посиланням, згенерованим сервісом ShareASale.
Найперше, ми налаштували JavaScript-бібліотеку, яка після оформлення замовлення отримує від PHP певний набір даних і відправляє його до ShareASale, де формується статистика покупок за рекомендаціями інфлюенсерів. Далі ми налаштували функціонал промокодів, за яким кожен блогер отримує свій унікальний код, що надає право «його» покупцям отримати знижку на сайті.
Звісно, існують й інші способи, щоб отримати промокод: підписка на розсилку, святкові акції, реєстрація тощо. Для цього ми налаштували на сайті відповідні унікальні події, кількість яких в майбутньому буде тільки зростати. Як і раніше, автоматична email-розсилка здійснюється за допомогою вбудованого сервісу Klaviyo. Так, під час спрацювання певної події на сайті ми надсилаємо до Klaviyo event з прикріпленим до нього кодом і даними користувача. Далі відвідувач сайту отримує поштою промокод на миттєву знижку в інтернет-магазині.
Купони можна налаштовувати за терміном і кратністю використання, кількістю товарів або типом знижки (у відсотках або доларах). В майбутньому плануємо розширювати функціонал даного модуля, що дасть змогу користувачам отримувати подарунки, безплатну доставку та інші плюшки.
Підсумки
Мінімалістичний і адаптивний, із потужною Laravel-начинкою та безліччю інтегрованих сервісів — саме таким вийшов американський інтернет-магазин художніх товарів, розробку якого здійснила наша компанія. Швидка та безпечна оплата, автоматичний розрахунок доставки та споживчого податку Sales Tax, бухгалтерська програма обліку, система купонів і партнерська програма з блогерами — це далеко не всі реалізовані функції інтернет-магазину. Sketchbar вийшов справжнім осередком для художників, які можуть навчатися, спілкуватися та ділитися роботами, створеними за допомогою придбаних в інтернет-магазині матеріалів: ручок, маркерів, лайнерів, чорнил, скетчбуків та інших товарів.
