Кейс: Каталог косметики
Введение и концепция проекта
Independent Partner — независимый партнер, осуществляющий продажу косметики в странах СНГ. Требовался современный сайт-каталог, чтобы пользователи могли детально ознакомиться с ассортиментом: изучить состав, преимущества, инструкции и противопоказания. Изначально заказчик рассматривал CMS WordPress, но в ходе обсуждения архитектуры мы приняли решение разрабатывать проект на фреймворке Laravel. Это было обусловлено необходимостью создания кастомного CURL-парсера для автоматического наполнения сайта товарами.
Разработка CURL-парсера и AJAX-фильтрация
Первым этапом я написал парсер, который автоматически импортирует товары с сайта поставщика. Поскольку поставщик не мог предоставить выгрузку в формате XML/JSON, сбор данных реализован напрямую из верстки. Вывод категорий в каталоге работает без перезагрузки страницы: при выборе категории отправляется асинхронный AJAX-запрос, мгновенно обновляющий контент. Асинхронность реализована на фронтенде с помощью Vue.js. Добавление товаров в корзину также работает без перезагрузки страницы. Данные корзины сохраняются в сессии браузера до 20 дней, что крайне удобно для возвращающихся пользователей.
Динамическая карточка товара и обход блокировок
Контент карточки товара автоматически подгружается и структурируется через CURL-парсер. Сайт-источник работает на CMS OpenCart и не использует защиту Cloudflare, однако структура его верстки была хаотичной (большое количество вложенных div без классов и ID). Для точного извлечения данных я реализовал парсинг по DOM-дереву, привязываясь к ближайшим родительским классам. Примечание: для более защищенных проектов с жесткими блокировками я успешно применяю интеграцию с сервисом ZenRows для стабильного сбора данных.
Интерактивный блок отзывов и Webhook-уведомления
На текущем этапе отзывы модерируются через панель администратора, а контент взят из реальных переписок клиента в мессенджерах. В архитектуру заложена будущая интеграция с Google Business Profile API для автоматической выгрузки. Чтобы заказчик мгновенно узнавал о новых действиях на сайте, я настроил интеграцию через Webhook: уведомления о добавлении отзывов или заявок приходят клиенту в мессенджер в ту же секунду.
Оптимизированная корзина и стек технологий
Быстрая и минималистичная корзина с возможностью нативного изменения количества и удаления товаров без перезагрузки страницы. Скорость загрузки по Google PageSpeed Insights составляет высокие 75%+ для мобильных. На бэкенде логика связей реализована через связи Many-to-Many (многие ко многим). В качестве реляционной базы данных используется MySQL (SQL), а проект развернут на веб-сервере Apache.
Управление контентом и безопасность Middleware
Вся текстовая информация и баннеры на странице «О нас» управляются динамически через кастомную админ-панель. Доступ к панели администрирования надежно защищен с помощью Laravel Middleware (посредников), что исключает несанкционированный доступ. Для максимального ускорения сайта все графические элементы были конвертированы в современный оптимизированный формат AVIF, что снизило вес картинок без потери качества.
Контакты и адаптивная верстка (Mobile-First)
Страница контактов выполнена в лаконичном стиле с кликабельными номерами телефонов (tel:) и email (mailto:) для быстрой связи в один клик. Интерфейс полностью адаптивен: верстка проектировалась под базовый контейнер 1440px, но плавно масштабируется под любые разрешения смартфонов и планшетов, обеспечивая идеальный UX/UI на всех устройствах.
