Розробка сайту квіткового магазину на 1С-Бітрікс

Розробка сайту квіткового магазину на 1С-Бітрікс

Квіткова крамниця онлайн — це не просто каталог з кошиком. Покупець вибирає не товар, а емоцію. Половина замовлень — подарунки, де важливі точна доставка, листівка з текстом та оформлення. Друга половина — клієнти, які хочуть зібрати букет самі, комбінуючи квіти за своїм смаком. Конструктор букета — конкурентна перевага, яка перетворює сайт з вітрини на інструмент.

На 1С-Бітрікс проект будується на торговому каталозі з SKU для готових букетів, кастомному конструкторі на Highload-блоках, модулі sale з розширеними службами доставки та CRM-інтеграції для повторних продажів.

Каталог букетів та композицій

Готові букети — товари торгового каталогу. Ключова особливість — торгові пропозиції за розміром. Один букет «Весняний настрій» існує у трьох варіантах: S (5 тюльпанів), M (11 тюльпанів), L (21 тюльпан). Кожен SKU — своя ціна, своє фото, свій склад.

Властивості елемента інфоблоку «Букети»:

• Категорія — розділ інфоблоку: букети, композиції в коробці, кошики, монобукети, весільні
• Повід — множинна властивість-довідник: день народження, весілля, юбілей, без повода, 8 березня, 14 лютого
• Основні квіти — множинна властивість-довідник: троянди, тюльпани, півонії, хризантеми (для фільтрації)
• Кольорова гама — множинна: червона, біла, рожева, мікс, пастельні
• Стійкість — числова властивість (днів), відображається як «стоять від X днів»
• Наявність — оновлюється щодня, тому що квіти — швидкопсувний товар

Для торгових пропозицій (розміри S/M/L) задаються:

• Ціна
• Детальне фото (різний розмір букета — візуально відрізняється)
• Склад — текстовий опис («7 червоних троянд, 3 гілки евкаліпту, фетр, стрічка»)

Фільтрація через CIBlockSmartFilter: за повідом, видом квітів, кольоровою гамою, ціновим діапазоном. Сортування: популярні (за кількістю замовлень — поле оновлюється агентом), новинки, дешевше/дорожче.

Конструктор букета

Центральний елемент сайту. Клієнт вибирає квіти, задає кількість кожної, вибирає оформлення — і бачить візуалізацію з підсумковою вартістю. Це не шаблонна функція Бітрікс — кастомна розробка на Highload-блоках та JS-компоненті.

HL-блок «Квіти для конструктора»:

HL-блок «Оформлення»:

Логіка роботи конструктора:

1. Вибір квітів. Інтерфейс у два стовпці: ліворуч — каталог доступних квітів з фільтром за категорією та сезоном, праворуч — кошик конструктора. Клієнт натискає «+» / «−» у кожної квітки або вводить число. Мінімальна кількість стебел для оформлення в букет — 3 (валідація на клієнті та сервері).

2. Вибір оформлення. Карточки з фото: тип обгортки (крафт, фетр, сітка, без упаковки) та тип завязки (стрічка, мотузка, без). Для коробок та кошиків — окрема секція з обмеженням за кількістю стебел (UF_COMPATIBLE містить max_stems).

3. Візуалізація. Тут два підходи залежно від бюджету проекту:

   Варіант A (оптимальний): Передзаготовлені шаблони візуалізації. Для кожної комбінації «розмір букета × тип оформлення» є базове зображення. Вибрані квіти відображаються іконками-превью поруч із візуалізацією, а не всередину неї. Достатньо для 90% клієнтів — їм важливо бачити склад та загальну стилістику.

   Варіант B (розширений): Canvas-рендер. Зображення квітів (UF_RENDER_IMAGE) з прозорим фоном розміщуються на canvas за алгоритмом: центральні квіти — більші, бічні — під кутом, зелень — на задньому плані. Оформлення рисується як нижній шар. Результат — унікальна візуалізація для кожної комбінації. Вимагає якісних рендерів усіх квітів у єдиному стилі.

4. Листівка. Текстове поле до 200 символів. Клієнт вводить текст, бачить превью на шаблоні листівки (вибір з 4–5 дизайнів). Текст листівки зберігається як властивість замовлення sale.

5. Розрахунок вартості:

Разом = Σ(ціна_квітки × кількість) + вартість_оформлення + листівка (фіксована) + вартість_доставки

Розрахунок — серверний, через AJAX-контролер. Клієнтський JS показує приблизну суму для миттєвої зворотного зв'язку, але фінальна ціна завжди приходить з сервера.

6. Оформлення замовлення. Конфігурація букета зберігається в JSON й додається в кошик sale як товар з довільною ціною (використовується CSaleBasket::Add з параметрами PRICE та CUSTOM_PRICE = Y). Властивості елемента кошика включають конфігурацію — вона відображається в листі підтвердження та в адміністративній панелі при обробці замовлення.

Онлайн-замовлення з доставкою

Доставка квітів — критично залежна від часу. Стандартний обробник sale.delivery розширюється кастомною логікою.

Служби доставки:

• Стандартна — вибір 2-годинного вікна (10:00–12:00, 12:00–14:00, ..., 20:00–22:00). Доступна при замовленні мінімум за 4 години до початку вікна
• Терміна — доставка протягом 90 хвилин. Надбавка задається у налаштуваннях служби доставки. Доступна з 09:00 до 20:00
• До точного часу — вища надбавка, допуск ±15 хвилин. Для VIP-замовлень (юбілеї, пропозиції)
• Самовивіз — з магазину, без надбавки

Вибір дати реалізується кастомним календарем. Доставка доступна «сьогодні» (якщо є часові вікна) та на 14 днів уперед. Святкові дати (8 березня, 14 лютого) помічаються в інтерфейсі — «високий попит, рекомендуємо замовити заздалегідь». У ці дні надбавка за термінову доставку збільшується автоматично через обробник OnSaleDeliveryServiceCalculate, який перевіряє дату за довідником свят у HL-блоці.

Анонімне замовлення. Квіти часто замовляють як сюрприз. Передбачений чекбокс «Не повідомляти відправника» — у цьому випадку в даних доставки відображається лише одержувач.

CRM-інтеграція та нагадування

Квітковий бізнес живе повторними продажами. Клієнт, який замовив букет дружині на день народження, з високою ймовірністю зробить це знову через рік. CRM Бітрікс24 фіксує кожне замовлення як угоду з полями: одержувач, повід, дата.

За 7 днів до річниці замовлення клієнту відправляється email-нагадування: «Рік назад ви замовляли букет для [ім'я одержувача]. Хочете повторити?» Механізм — агент, який щодня вибирає угоди з UF_DATE = поточна дата + 7 днів − 1 рік та ініціює відправлення через messageservice.

Для реалізації нагадувань у карточці замовлення додаються властивості: ім'я одержувача, повід, дата події. Ці дані заповнюються клієнтом при оформленні (поля «Кому доставити» та «Повід» вже є в формі замовлення — потрібно тільки зберегти їх у CRM).

Технічні деталі

Композитний кеш — для каталогу готових букетів та статичних сторінок. Конструктор, кошик, доставка — AJAX. Мікроразметка Product та AggregateOffer для появи в товарній видачі пошукових систем. Інтеграція з Яндекс.Маркет/Google Merchant через стандартний експорт торгового каталогу Бітрікс у YML/XML.