Виджет способов доставок для латвийского интернет-магазина одежды Kokos

*Kokos - офлайн и онлайн магазин одежды из Риги, а также производитель сосбственной одежды под одноимённым брендом, выпускающий широкую линейку товаров: от костюмов и рубашек до платьев и джинс.

Какая задача перед нами стояла?

Компания разработала свой интернет-магазин на базе платформы Shopify. Несмотря на все плюсы системы - простоту использования, большой каталог интеграций и прочие фичи, Кокосу не хватало функционала системы.

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

В чём была сложность?

Мы уже рассказывали как нам приходилось справляться с ограничениями платформы при реализации синхронизации с внешней системой Aizel. При разработке виджета для Кокоса было не меньше костылей и веселья.

Казалось бы, что это достаточно простой функционал, ведь есть уже готовая реализация на странице чекаута. Но есть проблема: чекаут - это самая некастомизируемая часть интернет-магазинов на базе Shopify, особенно на момент наших работ в начале 2022 года.

У нас не было API, который бы позволял средствами Shopify реализовать весь функционал виджета нативно. Несмотря на это, мы смогли найти решение.

Что из себя представляла разработка

С точки зрения архитектуры - это было классическое приватное Shopify приложение с SPA на React и монолитным back-end'ом на Flask с публичным API для получения способов доставки, расчёта стоимости доставки, условий, а также адресов ПВЗ и постаматов.

Front-end собирался в один JavaScript файл при помощи Webpack, включая изображения, закодированные в base64, загружался в папку ассетов Shopify и вставлялся на страницу через язык разметки Liquid, добавляя глобальному объекту "window" метод для инициализации виджета в том элементе, в котором нужно.

Реализация виджета индентична той, что мы применили в будущем на проекте CarCraft. 

Наши костыли и прочие атрибуты госпиталя

Не будем рассказывать про стандартные CRUD операции, которые были в приложении, это слишком банально и все про это уже много раз читали. Лучше расскажем как мы обходили ограничения на проекте.

У Shopify есть нативный выбор способа доставки, который будет отображаться в панели администратора именно как способ доставки. Но на момент разработки нашего виджета, до момента чекаута, который почти нельзя кастомизировать, нельзя было выбрать способ доставки. Для этого просто не было API.

Мы решили пойти на хитрость - заменить нативную доставку товаром. Необходимо было заранее создать бесплатные виртуальные товары в Shopify с названиями доставок: Omniva, DPD, курьерская доставка и самовывоз. После выбора способа доставки, "товар" добавлялся в корзину (благо для этого API был). Да, формально мы реализовали выбор способа доставки через виртуальные товары.

Но нативная доставка тоже была. На моменте, когда покупатель попадал на этап её выбора, наш back-end получала вебхук, проверяла какой товар был выбран, к какому способу доставки он относится и возвращала в ответе соответствующий способ доставки с корректной ценой и сроками, которые либо получались через API службы доставки (Omniva, DPD), либо задавались вручную в админ-панели (доставка курьером магазина, самовывоз).

Передача деталей доставки

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

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

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

Итог

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

Нам удалось реализовать уникальный функционал, который на момент разработки не встречался ни в одном другом магазине на базе Shopify, и сократить время, необходимое на оформление заказа примерно на 1.5-2 секунды, оставляя пользователям меньшее окно возможностей для отказа от покупки.

*Сайт находится в иностранной юрисдикции и не подчиняется законам России. На нём могут присутствовать материалы организаций, которые Российская Федерация считает экстремистскими.