На чём собрано и почему
Разметка
Стили
Логика
Хостинг
Что это за продукт
FLEUR — это интернет-магазин доставки цветов в Казахстане. Клиент выбирает букет в каталоге, подбирает размер, добавляет открытку и оформляет заказ целиком онлайн, без звонка. Многостраничный сайт собран на чистом HTML, CSS и JavaScript, без фреймворков.
Корзина, фильтры каталога и расчёт стоимости работают на стороне браузера, а состояние сохраняется между страницами. Сайт мгновенно открывается с любого устройства и есть в русской и английской версиях.
Сделать покупку цветов простой
Нужен был магазин, который доводит клиента от витрины до оплаты сам: показывает букеты, считает стоимость с учётом размера и доставки и принимает заказ без переписки с менеджером. Всё это — быстро и аккуратно, на лёгком статичном сайте.
- показать каталог с удобными фильтрами и сортировкой
- дать выбрать размер букета с понятной разницей в цене
- считать сумму и доставку прямо в корзине
- оформить заказ онлайн с выбором способа оплаты
- сохранять выбор между страницами и работать на мобильном
Заказы шли через переписку
Раньше покупка букета начиналась с сообщения: клиент уточнял наличие, цену и сроки, ждал ответа и согласовывал детали вручную. Каталога с ценами, корзины и онлайн-оплаты не было.
Это теряло часть заказов, особенно в пиковые даты вроде 8 марта, когда отвечать каждому быстро невозможно, а клиент уходит туда, где можно оформить заказ сразу.
Магазин, который продаёт сам
Мы собрали сайт вокруг одной цели: клиент сам выбирает букет, видит итоговую сумму и оформляет заказ за минуту.
Находит букет за пару кликов
Каталог фильтруется по категориям и сортируется по цене или алфавиту с корректной русской локалью. Тулбар фильтров остаётся на виду при скролле, а счётчик результатов склоняется правильно.
- фильтр: Все, Букеты, Композиции, Сухоцветы, Подписка
- сортировка по цене ↑ ↓ и по алфавиту
- «1 букет», «3 букета», «12 букетов» — верное склонение
- sticky-тулбар фильтров при скролле
Корзина, которая не теряется
Товар добавляется с любой страницы и сохраняется в localStorage между переходами. Размеры S / M / L меняют цену, количество регулируется прямо в корзине, а сумма и доставка пересчитываются на лету.
- добавление с каталога, главной и карточки товара
- размеры S / M / L: 15 / 25 / 39 стеблей и разная цена
- бесплатная доставка от 25 000 ₸, иначе +2 000 ₸
- бейдж в хедере обновляется через CustomEvent
Всё о букете на одном экране
Галерея переключает фото по миниатюрам, блок с ценой и кнопкой остаётся закреплённым при скролле, а цена и заголовок вкладки меняются вместе с выбранным размером. Снизу — четыре похожих букета из каталога.
- галерея с переключением по миниатюрам
- sticky-блок с ценой и размером
- цена и <title> обновляются под размер
- хлебные крошки и блок «Похожие товары»
Заказ без звонка менеджеру
Форма собирает имя, телефон, адрес, дату не раньше сегодня, временной слот и текст открытки. Три способа оплаты, HTML5-валидация и экран подтверждения с уникальным номером заказа FL-XXXXXX.
- оплата: картой онлайн, Kaspi QR или наличными
- HTML5-валидация: required, type="tel", type="date"
- экран подтверждения с номером FL-XXXXXX
- экранирование ввода через esc() — защита от XSS
Что держит магазин лёгким и доступным
- Дизайн-токены в основе. Цвета, шрифты, отступы, радиусы и easing вынесены в CSS-переменные — единый стиль и лёгкая смена темы.
- Адаптив без брейкпоинтов. Все размеры на clamp(), а сетки на CSS Grid сами перестраиваются под экран — без резких переключений.
- Состояние без бэкенда. Корзина живёт в localStorage (fleur_cart_v2) и переживает переходы между страницами, а бейдж обновляется через CustomEvent.
- Доступность и защита. aria-label, aria-current, aria-pressed, loading="lazy" и экранирование пользовательского ввода через esc() против XSS.
Нужен такой же магазин?
YK Partnership собирает сайты, интернет-магазины и digital-продукты под ключ. Расскажите о задаче, предложим решение.