Интернет-магазины

Архитектура

Статичная файловая структура без СУБД и шаблонизатора: каждый товар — отдельная папка со своим index.php и изображениями, цены вынесены переменными в один общий PHP-файл, категории (смесители, душевые системы, комплектующие, аксессуары) — каталог из вложенных папок, общие блоки (шапка, меню, футер) подключаются инклюдами. Подход осознанно топорный, но прозрачный и надёжный для статичного ассортимента.

Каталог и товары

Карточка товара: галерея с зумом, выбор цвета переключением между вариантами, счётчик количества с пересчётом цены на лету, хлебные крошки с микроразметкой Schema.org. Корзина — на стороне клиента (localStorage), со скидочными купонами и бесплатной доставкой от пороговой суммы.

Заказы и оплата

Заказы хранятся в файловой структуре: на каждый создаётся папка со статусом, данными клиента и сгенерированной страницей заказа. Онлайн-оплата картой и через СБП по эквайрингу Тинькофф (платёжная сессия через API, редирект на оплату, авто-смена статуса при успешной оплате); альтернативно — по реквизитам (QR + PDF) или наличными. Клиент получает трек-код и страницу отслеживания статуса.

Админка

Предельно простая: единый лог всех заявок, где каждая строка снабжена ссылками-действиями «оплачен / выполнен / закрыт». Менеджер обрабатывает заказы прямо из лога — подтверждает оплату, меняет статус, закрывает. Ровно столько функций, сколько нужно для обработки потока, без СУБД и тяжёлого интерфейса.

Отзывы

Импорт отзывов с маркетплейсов (Ozon, Wildberries): парсер разбирает сохранённые страницы, отбирает отзывы с высокой оценкой, чистит и дедуплицирует, складывает в единый список с подгрузкой по мере прокрутки. Ссылки ведут на исходные карточки маркетплейсов.

Уведомления

При оформлении заказа клиент получает письмо и SMS с номером заказа и трек-кодом.

SEO

Уникальные title/description на страницах, человекочитаемые URL по структуре каталога, хлебные крошки с микроразметкой, sitemap.xml, robots.txt, favicon — базовый, но осмысленный технический минимум.

Чем интересен проект

Ранний этап «с нуля по макету, без CMS и фреймворков», собранный вручную примерно за неделю (ещё до эпохи AI-инструментов) — и при этом рабочий магазин с реальной онлайн-оплатой и обработкой заказов. Тот же заказчик позже сделал ребрендинг в Wergrauf уже на зрелой data-driven архитектуре — по двум проектам виден рост подхода.

Архитектура

Намеренно лёгкая «безбазовая» архитектура: вместо CMS и SQL — файловое хранилище и интеграция с Google Sheets как удобной панелью наполнения.

• Источник данных — Google Sheets API: одна таблица, отдельный лист на категорию. PHP-скрипт синхронизации тянет данные через API и сохраняет в JSON — контент-менеджер ведёт ассортимент в привычной таблице, на сайте всё обновляется по кнопке.
• Локализация изображений: при синхронизации внешние фото товаров скачиваются на сервер, конвертируются в WebP и переименовываются по slug. Идемпотентно, с фолбэком при сбое.
• Слой оверрайдов: поверх данных из таблицы накладываются ручные правки из админки (метатеги, скрытие товаров, порядок) — таблица остаётся источником истины, но любое поле можно переопределить локально.
• Серверный рендеринг каталога для корректной внутренней перелинковки и SEO; клиентский JS отвечает только за фильтры и сортировку.

Ключевые функции

Каталог и товары: 9 категорий, единый серверный шаблон карточки и каталога; карточки с галереей, переключением фото, характеристиками и блоками «похожие товары» и «из этой коллекции»; клиентская фильтрация по цене (двойной слайдер), модели, цвету, коллекции и сортировка.

Корзина, заказ, оплата: корзина на стороне клиента (localStorage), оформление и покупка «в один клик», онлайн-оплата через Ozon СБП, страница статуса заказа с поллингом оплаты, уведомления о новых заказах в Telegram через бота.

Отзывы: форма с загрузкой до 4 фото и трёхуровневой антиспам-защитой (honeypot + проверка времени заполнения + арифметическая капча), хранение в JSON, модерация через админку.

Подписка на новинки с сохранением базы подписчиков и просмотром в админке.

Кастомная админ-панель

Полностью самописная, авторизация на PHP-сессиях.

• Дашборд со статистикой по категориям.
• Ручная синхронизация с Google Таблицами в один клик, с логом результатов.
• Просмотр и редактирование товаров каждой категории, включая метатеги (title/description) для SEO.
• Добавление ручных товаров поверх синхронизированных и редактирование контента главной страницы.
• Модерация отзывов, просмотр подписчиков, лог синхронизаций.
• Сервисные инструменты: пакетная оптимизация изображений, очистка системного мусора.

Производительность (PageSpeed Insights)

Сайт доведён до 90–100 баллов Performance на десктопе и мобильных.

• Адаптивные размеры изображений: для каждого товарного фото при синхронизации генерируются производные размеры (карточка ~600px, превью ~160px) поверх оригинала для галереи — товарные изображения легче на 65–70%, превью под главным фото с ~65 КБ до ~2 КБ.
• WebP везде — товары и логотипы (через <picture> с фолбэком).
• Устранение Cumulative Layout Shift: явные width/height на всех изображениях.
• Приоритизация загрузки: fetchpriority на главном изображении (LCP), lazy-load остального, preconnect к домену аналитики, defer на скриптах.
• Оптимизация контраста, заголовков и шрифтов под мобильные.

SEO

• Schema.org / JSON-LD: Product + Offer (динамическое наличие и priceValidUntil), BreadcrumbList на карточках, Organization + WebSite на главной.
• Канонические URL, keyword-first title-теги, корректная иерархия заголовков, <main>-лендмарки, семантическая разметка.
• Автогенерируемые sitemap.xml и robots.txt.
• YML-фид для Яндекс.Директа (товарные кампании, смарт-баннеры), который сам обновляется после синхронизации каталога.
• Accessibility: ARIA-метки, контраст по WCAG, доступная навигация.

Аналитика

Полная e-commerce-аналитика на Яндекс.Метрике: цели и dataLayer на ключевые действия (добавление в корзину, заказ, покупка в один клик, успешная оплата, подписка), защита от двойного срабатывания целей, webvisor, clickmap. Покупка отслеживается с защитой от дублей при поллинге оплаты.

Чем интересен проект

• Нулевые зависимости от тяжёлой инфраструктуры: ни CMS, ни SQL, ни фреймворка — при этом полноценный магазин с оплатой, аналитикой и админкой.
• Google Sheets как backend наполнения — нетривиальная, но удобная для заказчика интеграция.
• Производительность как осознанный приоритет: оптимизация изображений встроена в пайплайн данных, а не прикручена постфактум.
• Полный цикл одним человеком: архитектура, бэкенд, фронтенд, интеграции, SEO, деплой и поддержка.