Интернет-магазин с онлайн-конструктором Brick Pic

Год:

2024–2025

Клиент:

Brick Pic — интернет-магазин персонализированных рамок с персонажами, которые покупатель собирает самостоятельно в онлайн-конструкторе.

Тип проекта:

Интернет-магазин с онлайн-конструктором, корзиной, личным кабинетом, онлайн-оплатой и интеграцией с CRM Bitrix24.

Платформа:

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

Задача

Создать интернет-магазин персонализированных подарков:

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

Реализовать онлайн-конструктор:

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

Настроить рамку и композицию:

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

Связать конструктор с оформлением заказа:

Передавать собранную композицию в корзину, рассчитывать стоимость, получать контактные данные, учитывать выбранный способ доставки и принимать онлайн-оплату.

Передавать заказ в производство:

Формировать данные по каждому персонажу, рамке, фону и расположению фигурок. Загруженные покупателем изображения должны сохраняться и быть доступны исполнителю при изготовлении заказа.

Интегрировать сайт с CRM:

Автоматически создавать сделку в Bitrix24, сохранять в ней параметры заказа и отправлять уведомления покупателю и ответственному сотруднику.

Подготовить сайт к развитию:

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

Решение

Переработали исходный шаблон:

От готового решения Bitrix24 сохранили только часть подходящих блоков. Заново разработали структуру сайта, визуальную систему, пользовательский сценарий и интерфейс конструктора.

Создали конструктор персонажей:

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

Добавили собственные изображения:

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

Реализовали настройку рамки:

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

Настроили работу с местами в композиции:

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

Добавили предпросмотр:

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

Разработали корзину и оформление заказа:

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

Интегрировали CRM Bitrix24:

После оформления заказа создаётся сделка в CRM. В неё передаются выбранные детали персонажей, рамка, фон, расположение фигурок и ссылки на пользовательские изображения.

Подготовили административное управление:

Администратор может расширять набор элементов конструктора: добавлять лица, причёски, одежду, аксессуары, питомцев, рамки, фоны и варианты расположения.

Создали основные страницы:

Реализовали главную страницу, онлайн-конструктор, корзину, оформление заказа, личный кабинет, галерею работ, новости с отдельными страницами и политику конфиденциальности.

Адаптировали сайт для мобильных устройств:

Перестроили сетку выбора элементов, управление предпросмотром, слайдеры, корзину и основные блоки под мобильные экраны.

Провели SEO-оптимизацию:

Собрали семантику, разработали структуру и тексты, настроили Title и Description, ЧПУ, canonical, robots.txt, sitemap.xml, Schema.org, Open Graph и редиректы, оптимизировали изображения.

Результат

Запустили интернет-магазин с онлайн-конструктором

В 2025 году запустили интернет-магазин Brick Pic на платформе Bitrix24. От исходного шаблона сохранилась только часть готовых блоков. Структуру, дизайн, интерфейс конструктора и логику оформления заказа разработали заново под продукт клиента.

Покупатель самостоятельно собирает персональный заказ

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

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

Конструктор связан с корзиной и CRM

Готовая композиция передаётся в корзину вместе с выбранными параметрами. При оформлении заказа пользователь указывает контактные данные, выбирает доставку и способ оплаты.

Система формирует информацию, необходимую для производства: состав персонажей, выбранные элементы, рамку, фон, расположение фигурок и ссылки на загруженные изображения. После оформления заказа система создаёт сделку в CRM Bitrix24 и отправляет данные ответственным сотрудникам.

Сайт можно развивать без переработки конструктора

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

Для сайта собрали семантику, разработали структуру и тексты, настроили Title и Description, ЧПУ, canonical, robots.txt, sitemap.xml, Schema.org, Open Graph и редиректы, оптимизировали изображения.

После запуска клиент продолжает развивать проект и заказывать новые функции.

Интернет-магазин персонализированных рамок с онлайн-конструктором