QUIET FOLD — интернет-магазин одежды.

QUIET FOLD — интернет-магазин одежды.
Тип
Интернет-магазин
Год
2025
Статус
Запущен

Задача

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

Решение

Начал с двух основных сценариев: покупателю нужно удобно выбрать одежду и оформить заказ, а администратору — управлять ассортиментом и обрабатывать покупки. Поэтому каталог, карточки товаров, корзина и административная панель стали основой проекта. Размеры и цвета реализовали как отдельные варианты товара с собственными остатками и ценами. Такой подход позволяет показывать доступные сочетания и учитывать наличие каждой позиции. Расчёт стоимости и проверку остатков вынесли на сервер, чтобы заказ создавался по актуальным данным. Для разработки выбрал PHP, SQLite и нативные JavaScript и CSS. Этот стек соответствует масштабу проекта, упрощает размещение и позволяет полностью контролировать интерфейс. Код разделил на контроллеры, модели, сервисы и валидаторы, чтобы облегчить поддержку и развитие магазина. Управление товарами, статьями и информацией о бренде вынес в административную панель. AI-инструменты предусмотрел как дополнительные помощники: они предлагают описание или размер, а окончательное решение остаётся за человеком.

Результат

Создан интернет-магазин QUIET FOLD с каталогом, корзиной, оформлением заказов и личным кабинетом. Ассортимент, заказы и контент управляются через административную панель. Результат в цифрах: - 3 раздела админ-панели: товары, заказы и контент. - 2 темы оформления: светлая и тёмная. - 2 подготовленных AI-инструмента: черновики описаний и рекомендации по размеру. - Учёт каждого варианта товара: отдельные размеры, цвета, цены и остатки. Интерфейс адаптирован для мобильных устройств. Реализованы экспорт заказов в CSV, подтверждение email и восстановление пароля.

Технологии

  • PHP 8.1+
  • SQLite
  • PDO
  • HTML5
  • CSS3
  • BEM
  • JavaScript ES Modules
  • Apache
  • OpenAI API

Техническое описание

О проекте Сайт разработан с нуля без использования конструкторов и сторонних UI-фреймворков — собственный код на PHP, JavaScript и CSS. Проект объединяет витрину бренда, каталог одежды, оформление заказов и административную панель. Реализованы варианты товаров по размерам и цветам, учёт остатков, регистрация покупателей и дополнительные AI-инструменты. Страницы сайта Публичная часть 🏠 Главная — hero-секция коллекции, категории одежды, подборка товаров, блок о бренде, статьи журнала и информация о шоуруме 🛍️ Каталог — поиск, фильтры по категориям, размерам, максимальной цене и наличию, сортировка и постраничная навигация 👗 Карточка товара — галерея изображений, описание, состав и уход, выбор размера и цвета, цена и доступные остатки 🛒 Корзина — добавление товаров, изменение количества, удаление позиций, расчёт стоимости и мини-корзина 📦 Оформление заказа — контактные данные, адрес курьерской доставки, комментарий, согласие на обработку данных и страница подтверждения с номером заказа ❤️ Избранное — сохранение понравившихся товаров для авторизованных покупателей 🧵 О бренде — история и концепция бренда с изображением ✍️ Журнал — список статей и отдельные страницы материалов 📍 Шоурумы — адреса, часы работы, контактные данные и фотографии 👤 Личный кабинет — данные пользователя и смена пароля 🔑 Регистрация и вход — подтверждение email, повторная отправка письма и восстановление пароля Административная панель Закрытая часть сайта для управления магазином без редактирования кода: 👗 Товары — создание и редактирование карточек, артикулов, категорий, обычных и акционных цен, описаний, состава и ухода 🎨 Варианты товаров — размеры, цвета, остатки и индивидуальная цена варианта 📥 Заказы — поиск и фильтрация, просмотр состава заказа, изменение статуса заказа и статуса оплаты 📊 Экспорт — выгрузка заказов в CSV и печатная форма заказа ✍️ Журнал — создание и редактирование статей, черновики, публикация и планирование по дате 🧵 Контент — редактирование секций главной страницы и информации о бренде 📍 Шоурумы — добавление и редактирование адресов, контактов, расписания и изображений Технологии и архитектура Backend Язык PHP 8.1+ База данных SQLite + PDO — подготовленные SQL-запросы, внешние ключи, режим WAL Архитектура MVC — собственная, без фреймворка Роутинг Единая точка входа index.php и диспетчеры отдельных модулей, поддержка размещения в подпапке Шаблоны .tpl-файлы с PHP, рендеринг через renderTemplate() Заказы Транзакции, проверка актуальных цен и остатков, защита от повторного создания заказа Почта Подтверждение email и восстановление пароля через PHP mail(); в режиме разработки — запись писем в локальный журнал AI Серверный HTTP-клиент на cURL, структурированные JSON-ответы и проверка результата Frontend JavaScript Нативный ES Modules — без фреймворков и этапа сборки CSS Нативный CSS + методология BEM Структура CSS base / layouts / blocks / sections / utils Дизайн CSS custom properties, адаптивные страницы, светлая и тёмная темы с сохранением выбора Интерактивность Мобильное меню, модальные окна, фильтры, вкладки, аккордеоны и выбор вариантов товара Изображения Локальные WebP-изображения, галереи товаров и SVG-заглушки Шрифты Локальные WOFF2 — Manrope и JetBrains Mono Редактор статей Обычный текст с разделением на абзацы, без внешнего визуального редактора Инфраструктура Веб-сервер Apache + mod_rewrite БД SQLite — файловая, отдельный сервер базы данных не требуется Конфигурация Переменные окружения для режима работы, разрешённых доменов, почты и AI Логирование Отдельные журналы ошибок приложения и почты Статика Кэширование изображений и шрифтов, ревалидация CSS и JavaScript AI-возможности 🤖 Описание товара — генерация черновика по данным карточки в административной панели; администратор проверяет текст и сохраняет его вручную 📏 Подбор размера — ориентировочная рекомендация по росту и обхвату груди с выбором только среди доступных размеров товара ⚙️ Режимы — отключённый, тестовый mock и подключение OpenAI Responses API. По умолчанию AI отключён; для работы с API нужны ключ и модель в настройках окружения 🛡️ Контроль — лимиты запросов, тайм-ауты, ограничение размера ответа и серверная проверка структуры и содержания результата Что намеренно не использовалось Проект обходится без избыточных для данной задачи инструментов: ✕ React / Vue ✕ jQuery ✕ Tailwind / Bootstrap / SCSS ✕ Laravel / Symfony / ORM ✕ MySQL как база данных магазина ✕ CDN / внешние UI-библиотеки / внешние шрифты ✕ npm-сборка frontend Архитектура приложения Структура кода 📁 Контроллеры — отдельные PHP-файлы для действий: просмотр, создание, редактирование и обработка форм 📁 Модели — функции для работы с товарами, вариантами, корзиной, избранным, заказами, пользователями и контентом через PDO 📁 Сервисы — оформление заказов, изменение статусов и остатков, экспорт CSV, работа с корзиной, почтой, токенами и AI 📁 Валидаторы — отдельная проверка фильтров, карточек товаров, заказов, учётных данных и контента до обработки и записи в базу 📁 Шаблоны — страницы витрины и административной панели, общие части и повторно используемые компоненты Логика магазина Стоимость заказа рассчитывается на сервере по актуальным данным товара. Заказ и его позиции сохраняются одной транзакцией; повторное подтверждение с тем же токеном возвращает уже созданный заказ. Остатки списываются при подтверждении заказа и возвращаются при отмене или переводе в статус, не требующий списания. Изменение статуса и остатков выполняется в одной транзакции. Оформление сохраняет заказ для последующего подтверждения сотрудником. Платёжный шлюз не подключён; статус оплаты изменяется в административной панели. Безопасность 🔒 Вывод данных — функция e() для экранирования, защита от XSS 🔒 Доступ — requireAuth() для личного кабинета и requireAdmin() для административных маршрутов 🔒 Формы — CSRF-токены для запросов, изменяющих данные 🔒 Пароли — одноразовые токены подтверждения email и сброса пароля 🔒 Сессии — обновление идентификатора при входе, контроль времени активности 🔒 Лимиты — ограничение попыток входа, запросов к AI и оформления заказов 🔒 SQL — подготовленные запросы и проверка входных данных 🔒 Паттерн PRG — после успешной обработки обычных форм выполняется редирект 🔒 Сервер — закрыт прямой доступ к конфигурации, базе данных, шаблонам и журналам; настроены CSP и защитные HTTP-заголовки