Интернет-магазин художественных товаров на Laravel (США)
О проекте и задаче
Sketchbar — это американский интернет-магазин художественных товаров и принадлежностей для рисования: маркеров, лайнеров, ручек-кисточек, альбомов и зарисовщиков. Sketchbar привлекает художников не только шоппингом, но и наличием настоящего художественного сообщества, где можно учиться и делиться своими работами.
Такой вид интернет-магазин получил после вмешательства команды Webnauts, а именно:
- интеграции систем оплаты и доставки;
- реализации системы использования промокодов;
- внедрение программ бухгалтерского учета и автоматического расчета налогов;
- интеграции с маркетинговой платформой для сотрудничества с инфлюенсерами;
- настройка триггерных email-рассылок и т. п.
Мы выполнили разработку интернет-магазина на Laravel с учетом специфики американского рынка и действующего законодательства. Как именно, рассказываем подробнее в новом кейсе.
Вёрстка интерфейса
Front-end часть интернет-магазина выполнена с помощью Twig — гибкого, быстрого и безопасного шаблонизатора для PHP. В сочетании с JavaScript-библиотекой jQuery мы получили удобный интерактивный интерфейс со слайдерами, формами обратной связи и другими элементами:
Страница с каталогом товаров отображает сразу 20 компактных карточек, предоставляя пользователю полный обзор ассортимента и опыт без лишних телодвижений:
Верстая товарную карточку, мы делали упор на функциональность, компактную композицию элементов, исчерпывающее описание (в частности об акциях и скидках) и адаптивность страницы под различные устройства:
Функциональность сайта
Laravel — мощный PHP-фреймворк, собравший вокруг себя целый отдел поклонников в Webnauts. Разработка нестандартных и высоконагруженных проектов со сложными функциями и сервисными интеграциями не обходится без этой технологии.
Наши клиенты, заказывавшие разработку на Laravel, тоже оценили удобство управления сайтом. Интуитивно понятная персонализированная админ-панель Laravel Nova позволяет легко редактировать контент и управлять продажами интернет-магазина:
Системная интеграция
Для полноценной работы интернет-магазина на Laravel мы осуществили несколько интеграций с международными и сугубо американскими сервисами. В первую очередь, начали с трех главных систем: платёжной, системы доставки и налогообложения. Без них невозможен любой интернет-заказ в США.
Платёжная система
Первой реализованной интеграцией стал сервис 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-рассылка
Для отслеживания деятельности посетителей сайта и создания автоматических e-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 вышел настоящий центр притяжения для художников, которые могут учиться, общаться и делиться работами, созданными с помощью приобретенных в интернет-магазине материалов: ручек, маркеров, лайнеров, чернил, скетчбуков и других товаров.
