01
Оформление
Выбор дизайна карты с фиксацией выбранного варианта в общем состоянии конфигуратора.
Разработка подарочных карт для WooCommerce — Plantis
Подарочные
карты
карты
Кастомный JavaScript-конфигуратор подарочной карты внутри Plantis: три шага настройки, собственный фронтенд, оформление через WooCommerce и отдельная страница готового сертификата.
ПроектPlantis
ТипПодарочный сертификат
BackendWooCommerce + YITH
FrontendПолностью кастомный
Сценарий покупки
Три шага — один JS-сценарий
Пользователь проходит собственный пошаговый интерфейс, а JavaScript управляет переходами, выбранными параметрами и состоянием карты. К моменту оформления все данные уже собраны в единый объект будущего сертификата.
02
Номинал
Выбор номинала с динамическим обновлением параметров будущего сертификата.
03
Получатель
Данные покупателя и получателя, персональные параметры и финальная проверка перед оформлением.
04
Страница сертификата
После оплаты создаётся готовый сертификат со своими данными и отдельной страницей, которую можно открыть по уникальной ссылке.
Что реализовано
Главная часть — собственная механика на JavaScript
Плагин не диктует пользовательский сценарий. Весь интерфейс покупки собран отдельно: от переключения шагов и хранения состояния до подготовки данных для создания заказа.
JS-конфигуратор
Переходы между шагами, выбранный дизайн, номинал и данные получателя управляются на клиенте как единое состояние, а не как набор независимых форм.
Состояние без перезагрузки
При переходе вперёд и назад уже выбранные значения сохраняются. Интерфейс в каждый момент понимает, на каком шаге находится пользователь и какие данные уже заполнены.
Динамические параметры
Изменение дизайна, номинала и персональных данных сразу меняет состояние будущего сертификата. JavaScript собирает итоговую конфигурацию ещё до передачи данных в WooCommerce.
Своя логика заказа
Стандартный сценарий создания заказа значительно переработан, чтобы корректно провести дополнительные данные подарочной карты через корзину, checkout и создание сертификата.
Страница сертификата
После успешной покупки создаётся самостоятельный сертификат со своими параметрами и отдельной страницей, доступной по уникальной ссылке.
Использование в магазине
Созданная карта остаётся связана с e-commerce системой и дальше используется как подарочный сертификат при оплате следующих заказов.
Техническая часть
YITH на backend, frontend полностью свой
В проекте используется YITH Gift Cards, но от плагина фактически взята backend-механика сертификатов: хранение, баланс и базовая интеграция с WooCommerce.
Покупательский frontend плагина не используется — интерфейс выбора и оформления карты разработан с нуля на JavaScript под дизайн и UX Plantis.
Отдельно существенно переписана логика создания заказа: дополнительные параметры карты нужно корректно провести через покупку, связать с заказом и использовать при создании итогового сертификата.