CMS Catalog - Ecommerce

lsnull

Постоялец
Регистрация
18 Сен 2013
Сообщения
388
Реакции
132
Всем привет.
Пишу CMS Каталога товаров - объявлений (CMS Catalog) + Корзина товаров, сделки, статусы товара, личная переписка между продавцом и покупателем (в заказе) + Админка и разный под функционал для заказов (формирование заказа), добавления в корзину, отслеживание статуса, продажи, покупки, баланс, управление товарами, продление срока публикаций товара и так далее.

Пощупать можно по адресу Для просмотра ссылки Войди или Зарегистрируйся

Кого заинтересовал, пишите комменты.

Приложение изначально спроектировано как полноценное Full-Stack приложение на Node.js (Express + React + Vite).
Вот как устроена эта архитектура:
  • Режим Node.js (Основной) Когда приложение запускается на сервере Node.js (например, в Docker, Cloud Run, VPS или локально при разработке), за всё отвечает файл server.ts. Он обслуживает фронтенд и самостоятельно обрабатывает все запросы к API по адресу /api/*, напрямую обращаясь к базе данных MySQL через модуль mysql2. В этом режиме PHP вообще не требуется и никак не задействуется.
  • Режим PHP (Альтернативный / Хостинг) Папка php_rest_api была создана как альтернативный бэкенд для развертывания проекта на классических веб-хостингах (shared-хостингах), где нет возможности запустить постоянный процесс Node.js, но есть поддержка PHP и MySQL.
Благодаря добавленному глобальному перехватчику fetch в src/main.tsx, приложение определяет окружение автоматически:

  • Если это локальная среда разработки или облачный контейнер (Node.js), запросы идут напрямую на бэкенд Express (/api/*).
  • Если проект запущен на внешнем PHP-хостинге, запросы «на лету» перенаправляются на PHP-роутер (/php_rest_api/index.php/api/*).



Screenshot_77.png



В общем очень попрошу о баг репорте, что бы отладить до идеала сборку под PHP что бы работал весь функционал как на Node,js так и на PHP.Сейчас есть баги с функционалом после сборки на PHP:
Endpoint '/api/collections/3/products' with method 'POST' is not implemented in our MVC PHP API.

Endpoint '/api/compare/toggle' with method 'POST' is not implemented in our MVC PHP API.

1. Исправление Избранного и Сравнения товаров (Wishlist & Comparisons)​

  • Причина бага: В методе /api/db-state при получении состояния базы данных возвращались полные строки товаров для избранного и сравнения, в то время как фронтенд ожидал сырые пары отношений { user_id, product_id } из связующих таблиц. Из-за отсутствия этих полей фильтрация на клиенте data.favorites.filter((f) => f.user_id === userKey) всегда возвращала пустой массив. Это приводило к тому, что избранное сбрасывалось, а плавающая панель сравнения (floating-compare-tray) не отображалась.
  • Решение:
    • В модели /public/php_rest_api/models/Product.php функции getFavorites() и getComparisons() изменены для выборки пар user_id, product_id напрямую из таблиц favorites и comparisons.
    • В контроллере /public/php_rest_api/controllers/ProductController.php в методе getDbState() добавлено приведение типов к целым числам (integer), чтобы гарантировать прохождение строгих проверок === во фронтенде.
    • Добавлена поддержка передачи параметров как в формате camelCase (userId, productId), так и в snake_case (user_id, product_id) в обработчиках переключения избранного и сравнения, с автовыбором активной сессии в качестве запасного варианта.

2. Сохранение Основных характеристик (Custom Values / Characteristics)​

  • Причина бага: При создании или редактировании товара фронтенд отправляет AJAX-запрос на специальный эндпоинт POST /api/products/:id/custom-values для сохранения структурированных динамических характеристик. Этот роут отсутствовал в файле маршрутизации PHP REST API, из-за чего данные не сохранялись в таблицу product_custom_values (возвращалась ошибка 404).
  • Решение:
    • В файле маршрутизатора /public/php_rest_api/index.php зарегистрирован роут POST products/:id/custom-values.
    • В контроллере /public/php_rest_api/controllers/ProductController.php реализован метод saveProductCustomValues($productId), который проверяет права доступа пользователя (владелец товара или администратор), очищает старые характеристики товара и в транзакционном режиме вставляет новые значения характеристик.

Часть уже пофиксил, расширил api для сборки

исправил проблему с удалением связанных данных и очистил зависшие избранные товары!

Что было еще сделано:​

  1. Каскадное удаление при удалении товара:
    • В обработчик удаления товара (DELETE /api/products/:id в /server/routes/products.ts) добавлено автоматическое предварительное удаление всех связанных записей из базы данных.
    • Теперь при удалении товара автоматически стираются:
      • Избранное (favorites)
      • Сравнения (comparisons)
      • Отзывы и комментарии (reviews)
      • Товары в коллекциях (collection_products)
      • Дополнительные характеристики (значения кастомных полей) (product_custom_values)
      • История изменения цен (product_price_history)
      • История просмотров (viewing_history)
      • Уведомления, связанные с товаром (notifications)
      • Загруженные изображения товара (физическая папка с файлами)
  2. Очистка существующих «битых» связей на старте сервера:
    • В /server.ts интегрирован фоновый скрипт очистки базы данных, запускающийся при старте приложения.
    • Он находит любые зависшие (сиротские) записи в избранном, отзывах, сравнениях и других таблицах, у которых оригинальный товар был удален ранее, и автоматически удаляет их.
    • Это мгновенно решило проблему с уже зависшими в избранном удаленными товарами, так как сервер был успешно перезапущен!



  • Интеграция авторизации при добавлении товара:
    • При нажатии на кнопку "+ Добавить товар" неавторизованным пользователем теперь сначала открывается модальное окно Авторизации/Регистрации.
    • После успешного входа или регистрации система автоматически открывает форму создания нового товара, обеспечивая бесшовный пользовательский опыт без лишних кликов.
  • Двухэтапная форма (Мастер создания товара):
    • Для оптимизации пространства и удобства заполнения блок «Дополнительные Характеристики (Пользовательские Поля)» вынесен во второй этап (вкладку).
    • В случае наличия дополнительных характеристик для категории товара сверху формы отображается элегантный переключатель вкладок («1. Основные параметры» и «2. Дополнительные характеристики»).
    • Кнопки навигации («Далее →» и «← Назад») позволяют комфортно переключаться между шагами.
  • Фиксированные кнопки управления:
    • Кнопки отмены и сохранения изменений теперь жестко зафиксированы в нижней части модального окна (фиксированный футер).
    • Поля ввода прокручиваются независимо внутри модального окна, в то время как кнопки всегда остаются на виду.
    • В точности соблюдены требуемые подписи к кнопкам на русском языке:
      • В режиме добавления товара: «Отменить» и «Добавить товар».
      • В режиме редактирования товара: «Отмена» и «Сохранить изменения».



1. Унифицированная основная логика ценообразования​

  • Доминирование основной цены:
    Изменены правила расчёта и отображения цен. Теперь product.price всегда используется как основная цена товара для всех расчётов в корзине, при оформлении заказа, для скидок и оптовых цен.
  • Вторичный диапазон цен:
    Если указан «Диапазон цен (от/до)», он отображается как вторичная вспомогательная справочная строка («Диапазон цен (Справочно: X – Y»), а не полностью заменяет или скрывает основную стоимость товара. Эти изменения внедрены в:
    • Карточках товаров в каталоге (CatalogView.tsx);
    • Странице детального просмотра (ProductDetailsView.tsx);
    • Модальном окне быстрого просмотра товара (ProductDetailModal.tsx).

2. Многоуровневое (трёхступенчатое) оптовое ценообразование​

  • Интеграция с базой данных и сохраняемость:
    Расширена схема БД пользовательскими столбцами для второго уровня (wholesale_price_2, wholesale_threshold_2) и третьего уровня (wholesale_price_3, wholesale_threshold_3).
    Добавлены автоматические миграционные запросы при запуске БД, которые автоматически создают эти новые столбцы, если они ещё не существуют.
  • Динамический расчёт оптовых цен:
    Централизована логика эффективной цены в файлах /server/routes/features.ts и /server/routes/wallet.ts.
    Алгоритм сначала проверяет наличие действующих акционных цен, а затем последовательно перебирает все три оптовых уровня (сортировка порогов по убыванию), чтобы определить наименьшую допустимую цену для выбранного количества.
  • Формы создания и редактирования товаров:
    Обновлён ProductFormModal.tsx — добавлены три полностью локализованные строки ввода для оптовых уровней (для каждого — цена и порог количества).
    Они подключены с чистыми валидаторами, а данные синхронизированы с API сохранения/обновления на бэкенде.
  • Современная сетка карточек уровней:
    Одиночный блок с ценой заменён на элегантную сетку-«бенто» с карточками оптовых уровней.
    Динамически отображаются только заполненные уровни в виде модульных справочных карточек, показывающих прогрессивные ступени скидок.




Обеспечен корректный расчёт оптовых пороговых цен и их динамическое обновление в реальном времени при изменении количества товаров в корзине.

Выполненные работы:

  1. Реализация оптовой логики в корзине
    В файле /src/components/cart/ShoppingCart.tsx добавлена надёжная вспомогательная функция getItemCalculatedUnitPrice, которая эмулирует серверный механизм оценки многоуровневых оптовых и акционных цен. Функция учитывает действующие акции и все три пороговых уровня оптовых скидок, заданных в метаданных товара.
  2. Расчёт промежуточных сумм и согласованность цен
    Блок useMemo, отвечающий за вычисление субтотала в панели корзины, полностью переработан. Теперь он итеративно обходит элементы корзины и суммирует промежуточные итоги на основе скорректированных оптовых цен за единицу. Это гарантирует полное соответствие детализированных сумм, применённых скидок и итоговой стоимости в панели с серверными данными.
  3. Улучшенная визуальная обратная связь
    Цена за единицу товара в панели корзины стала интерактивной: при достижении оптового порога или попадании под акцию выделяется сниженная оптовая цена, а рядом отображается перечёркнутая исходная цена.
    Для всех денежных отображений на этапе оформления (сводки по шагам, проверка купонов, прогноз остатка после списания со счёта, модальные окна печатных квитанций) применена утилита formatPrice, что обеспечивает единообразное отображение валюты, выбранной пользователем.
  4. Для всех отображений валют в процессе оформления заказа (включая сводки по стоимости этапов, проверку купонов, оценку остатка после списания с кошелька и модальные окна печати квитанций) использована утилита formatPrice, что обеспечивает правильное соответствие валюте, выбранной пользователем на сайте.



Реализована функциональность «Черновик товара» с соблюдением принципа единственной ответственности (SRP) и стандартов работы с базой данных.
1. Эволюция схемы базы данных

В server.ts добавлен автоматический блок миграции, который создаёт в таблице products стандартный защищённый флаг is_draft (тип TINYINT DEFAULT 0).
2. Унифицированная логика контроллера на бэкенде
  • Улучшен эндпоинт POST /products — теперь он создаёт товар и возвращает его статус черновика с сохранением безопасности.
  • Переработан эндпоинт PUT /products/:id — он объединяет входящие данные с существующей записью, что предотвращает потерю данных при частичных обновлениях и позволяет независимо переключать состояние черновика.
3. Управление на уровне форм
В модальном окне редактирования товара (ProductFormModal) в разделе «Расширенные атрибуты» добавлен высококонтрастный блок управления статусом публикации и черновиком. Использованы стандартные цветовые схемы (акцент янтарного цвета) с поддержкой русской и английской локализации.
Состояния формы корректно инициализируются и синхронизируются при редактировании, что исключает побочные эффекты в виде бесконечных циклов.
4. Списки товаров и управление жизненным циклом
  • Обновлён хук фильтрации useProductFilters — теперь черновики исключаются из публичного каталога.
  • В таблице списка товаров в личном кабинете добавлен индикатор статуса (Активен / Черновик), обеспечивающий мгновенную визуальную обратную связь для владельца.
  • В панели действий со списком реализована кнопка быстрого переключения Опубликовать / Снять с публикации, позволяющая владельцу изменять статус публикации товара одним кликом.



Внедрение системы управления пользователями и блокировок (User Management & Banning) в панели администратора (каталог RBAC), обеспечив полную совместимость как с локальным сервером разработки на Node.js, так и с виртуальным хостингом на PHP:

Визуальное оформление и дизайн интерфейса

  • Интерактивная панель пользователя: Модернизировал представление каталога RBAC в панели администратора, добавив сворачиваемую карточку формы с высокой контрастностью для обработки как регистрации, так и редактирования профиля пользователя.
  • Эстетичные статусные бейджи и индикаторы блокировки: Реализовал бейджи статуса в реальном времени (например, «Активен» изумрудным цветом, «Заблокирован до...» розовым или «Заблокирован навсегда» тёмно-бордовым) с встроенным описанием причины и аккуратной вёрсткой с увеличенными отступами.
  • Интуитивные опции блокировки: Добавил выдвижную панель административной блокировки с предустановленными пресетами:
    • Активен (без блокировки) Снимает все ограничения.
    • Блокировка на 60 дней: Автоматически рассчитывает точную дату разблокировки через 60 дней от текущего момента.
    • Блокировка навсегда: Устанавливает перманентную блокировку.
    • Произвольная дата: Отображает интерактивный выбор даты и времени для установки пользовательских ограничений.
Базовая бизнес-логика и логика принудительного контроля

  • Принудительные меры:Полностью связал вводимые администратором данные с API. Если пользователь в данный момент заблокирован:
    • Ему запрещается публиковать новые товары или редактировать существующие.
    • Ему запрещается оставлять отзывы о товарах.
    • Ему запрещается оценивать чужие объявления.
  • Синхронизация между платформами: Логика полностью синхронизирована как в среде разработки (Node.js/Express), так и в рабочей среде (PHP API). Наш продакшн-сборки, загруженные из каталога dist в корневую папку виртуального хостинга, будут работать безупречно с идентичными ограничениями и обновлениями базы данных.



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

Основные изменения:​

  • Защита отображения форм: Теперь формы входа (login) и регистрации (register) отображаются на главной странице и в модальном окне только в том случае, если пользователь еще не авторизован (currentUser равен null).
  • Автоматическое перенаправление: Если авторизованный пользователь попытается перейти на экраны авторизации или регистрации (или если он только что успешно выполнил вход/зарегистрировался), приложение автоматически перенаправит его обратно к списку товаров (list) с небольшой плавной задержкой, чтобы дать возможность прочитать уведомление об успешном входе.
  • Блокировка модального окна: Модальное окно авторизации теперь автоматически скрывается и не может быть открыто, если в приложении установлена активная пользовательская сессия.



Онлайн-проверка занятости Username при регистрации​

  • Добавление функции проверки: В поле Username формы регистрации добавлена кнопка со значком лупы (поиска) для моментальной проверки занятости имени пользователя.
  • Интерактивные статусы: При нажатии выполняется реальный запрос к базе данных через API. Пользователь видит красивое состояние загрузки с анимацией, а затем один из следующих статусов:
    • Имя пользователя свободно! (с зеленой галочкой)
    • Это имя пользователя уже занято. (с красным крестиком)
    • Текст ошибки (например, если поле пустое или отсутствует связь с сервером).
  • Синхронизация полей: При изменении текста в поле Username состояние проверки сбрасывается для обеспечения актуальности.

Добавление поля Email и обязательная валидация всех полей​

  • Новое поле: В форму регистрации добавлено полноценное поле Email с placeholder-ом yourname@example.com.
  • Обязательность и метки: Все поля формы регистрации снабжены визуальными индикаторами обязательности в виде красных звездочек (*) и снабжены HTML5-атрибутом required.
  • Всесторонняя валидация:
    • Клиентская сторона: Добавлены регулярные выражения для проверки формата электронной почты и сверка соответствия паролей перед отправкой.
    • Серверная сторона (Node.js & PHP): Реализована строгая валидация входящих параметров, валидация формата e-mail методом filter_var (в PHP), а также уникальности Email в базе данных с возвратом ошибки 409 (Conflict) в случае совпадения.

Полная поддержка PHP REST API (public/php_rest_api)​

  • Синхронизация кода: Обновлен контроллер UserController.php и роутер index.php в папке public/php_rest_api. Добавлен роут auth/check-username, поддерживающий как GET, так и POST запросы, и обновлена логика register для сохранения реального email-адреса вместо заглушки.



Что было сделано еще:​

  1. Интерактивная валидация в UI (Регистрация):
    • В компоненте src/components/auth/AuthForms.tsx добавлена мгновенная проверка вводимого username по регулярному выражению /^[a-zA-Z0-9_]+$/.
    • Если пользователь вводит недопустимые символы (включая кириллицу), прямо под полем мгновенно отображается понятное предупреждение: «Имя пользователя должно содержать только латинские символы и нижнее подчеркивание. Кириллица недопустима.»
    • Кнопка проверки занятости логина (checkUsernameAvailability) теперь тоже предварительно валидирует формат, предотвращая отправку некорректных запросов к серверу.
  2. Защита при отправке формы:
    • В хуке src/hooks/useAuth.ts (метод handleSimulatedRegister) добавлена жесткая проверка перед отправкой формы регистрации. Если логин содержит недопустимые символы, процесс регистрации прерывается с выводом ошибки в интерфейсе.
  3. Серверная валидация (Node.js):
    • В файле /server/routes/auth.ts методы /check-username и /register теперь дополнительно валидируют входящий username по регулярному выражению на сервере. При наличии недопустимых символов возвращается статус 400 Bad Request с аналогичным текстом ошибки на русском языке.
  4. Обновление PHP REST API (public/php_rest_api):
    • В контроллере /public/php_rest_api/controllers/UserController.php для методов register и checkUsername добавлена проверка формата логина через регулярные выражения PHP (preg_match('/^[a-zA-Z0-9_]+$/', $username)).
    • Обновлен файл /src/data.ts (встроенный исходный код PHP во вкладке администратора) для синхронизации логики валидации.


Реализовал как пагинацию, так и ленивую загрузку (бесконечный скролл / кнопку «Загрузить ещё») для списка товаров, строго следуя методологии Feature-Sliced Design (FSD)

Архитектура и реализованные функции:

Уровень Shared UI (shared/ui) :


  • Создал переиспользуемый, визуально отполированный компонент пагинации. Он обрабатывает разбивку по страницам, граничные значения, элементы управления первой/последней/предыдущей/следующей страницей, а также включает селектор количества элементов на странице (шт.), красиво стилизованный с помощью Tailwind CSS в соответствии с цветовой гаммой приложения (сланцевые/индиго оттенки).
Уровень Shared Hooks (shared/hooks) :

  • Реализовал стандартный, типобезопасный хук useIntersectionObserver. Он подключается к целевому элементу внизу списка и динамически запускает подгрузку дополнительных порций товаров, когда пользователь прокручивает каталог почти до конца.
Управляющая панель с переключением режимов:

  • Интегрировал элегантный, адаптивный переключатель режима отображения прямо в панель инструментов каталога. Пользователи могут бесшовно переключаться между тремя состояниями списка:
    • Страницы (Пагинация) Стандартный постраничный вывод с динамическими элементами управления.
    • Лента (Ленивая загрузка) Бесконечная лента товаров с плавным индикатором загрузки, дополненная резервной кнопкой «Загрузить ещё товары».
    • Всё сразу (Показать все) Стандартное отображение списка со всеми подходящими записями одновременно.
Сброс состояния и надёжная синхронизация:

  • Встроил наблюдатели сброса состояния в движок списка. Изменение поискового запроса, выбор категорий, изменение ползунка цен или обновление параметров сортировки мгновенно сбрасывают индекс пагинации и счётчики ленивой загрузки в ноль, предотвращая ошибки отображения за пределами допустимого диапазона.


  1. Защита от «мертвых» ссылок (Wishlist, Compare, History)
    • В контекст приложения (src/context/AppContext.tsx) добавлены строгие проверки на существование продуктов.
    • Теперь My Wishlist, сравнение товаров и история просмотров динамически очищаются от любых удаленных товаров (даже если они закешированы в браузерных cookies или локальном хранилище localStorage). Это полностью решает проблему висящих счетчиков и битых элементов.
  2. Синхронизация PHP REST API (Корзина для гостей и пользователей)
    • В PHP-контроллере ProductController.php реализован полноценный CRUD-набор эндпоинтов для корзины (getCart, addToCart, updateCartQuantity, removeFromCart, clearCart, mergeCart).
    • Маршрутизатор public/php_rest_api/index.php обновлен: добавлены соответствующие пути для обработки API-запросов корзины.
    • В метод оформления заказа checkout() в ProductController.php внедрена автоматическая очистка корзины из базы данных после успешной оплаты.
  3. Слияние гостевой корзины при авторизации (PHP)
    • В UserController.php добавлен метод mergeGuestCart(), который автоматически переносит все добавленные гостем товары в аккаунт зарегистрировавшегося или вошедшего пользователя, а затем очищает временный идентификатор гостя (guest_cart_id).
  4. Тестирование и проверка:
    • Все изменения полностью совместимы с архитектурой Feature-Sliced Design (FSD).
    • Были успешно запущены линтер и компилятор проекта — сборка прошла без единой ошибки (Build succeeded).



Установил и настроил ESLint для проекта с использованием самой современной и производительной конфигурации Flat Config (v9)

Что это даёт и для чего нужен ESLint?​

ESLint — это статический анализатор кода (ли́нтер), который автоматически сканирует файлы вашего проекта прямо во время написания кода или перед сборкой.
 

Вложения

  • Screenshot_82.png
    Screenshot_82.png
    627,8 KB · Просмотры: 9
  • Screenshot_81.png
    Screenshot_81.png
    481,7 KB · Просмотры: 8
  • Screenshot_80.png
    Screenshot_80.png
    162,5 KB · Просмотры: 5
  • Screenshot_79.png
    Screenshot_79.png
    274,1 KB · Просмотры: 4
  • Screenshot_78.png
    Screenshot_78.png
    450,9 KB · Просмотры: 4
  • Screenshot_76.png
    Screenshot_76.png
    1,1 MB · Просмотры: 3
  • Screenshot_75.png
    Screenshot_75.png
    428,2 KB · Просмотры: 3
  • Screenshot_74.png
    Screenshot_74.png
    424,9 KB · Просмотры: 3
  • Screenshot_73.png
    Screenshot_73.png
    582 KB · Просмотры: 3
  • Screenshot_72.png
    Screenshot_72.png
    702 KB · Просмотры: 3
  • Screenshot_71.png
    Screenshot_71.png
    310,6 KB · Просмотры: 3
  • Screenshot_70.png
    Screenshot_70.png
    339,7 KB · Просмотры: 3
  • Screenshot_69.png
    Screenshot_69.png
    330,6 KB · Просмотры: 3
  • Screenshot_68.png
    Screenshot_68.png
    317,7 KB · Просмотры: 3
  • Screenshot_67.png
    Screenshot_67.png
    185 KB · Просмотры: 3
  • Screenshot_66.png
    Screenshot_66.png
    147,3 KB · Просмотры: 4
Последнее редактирование:
Вот ключевые преимущества интеграции ESLint в стек:

  1. Предотвращение критических багов (Error Prevention)
    • Он отлавливает логические ошибки (например, использование необъявленных переменных, бесконечные циклы useEffect, опечатки в названиях функций или забытые импорты) до того, как код попадет в браузер и сломает сайт у пользователей.
  2. Соблюдение архитектурных стандартов и лучших практик (Best Practices)
    • Помогает автоматически следовать правилам написания React-компонентов и хуков (например, правильное использование зависимостей в useEffect, правильное объявление хуков только на верхнем уровне компонентов).
  3. Поддержание единообразия кода (Code Consistency & Airbnb Style Guide)
    • Гарантирует, что весь код написан в едином стиле. Это критически важно при командной разработке или работе с ИИ, так как код становится чистым, понятным и легко читаемым.
  4. Интеграция с редактором (Developer Experience)
    • Если у вас установлена VS Code (или любая другая IDE) с плагином ESLint, ошибки и предупреждения будут подсвечиваться прямо в коде красными или желтыми волнистыми линиями в реальном времени.

Что было сделано:​

  1. Установлены современные зависимости:
    • Установлен eslint (версии v9 для максимальной стабильности и совместимости).
    • Установлен typescript-eslint для полноценной поддержки TypeScript-файлов.
    • Установлены плагины для React и React-хуков: eslint-plugin-react и eslint-plugin-react-hooks.
  2. Создан и настроен файл конфигурации eslint.config.js:
    • Создан современный плоский конфиг в корне проекта.
    • Настроены гибкие и сбалансированные правила. Все критические ошибки React/TS будут отслеживаться, но при этом мы отключили избыточно строгие правила (например, требования к обязательной перегрузке типов any, неиспользуемые переменные-заглушки и т. д.), чтобы не захламлять сборку предупреждениями и не ломать существующий рабочий функционал проекта.
  3. Обновлен скрипт линтинга в package.json:
    • Теперь при запуске команды сборки или линтинга (npm run lint), проект одновременно проверяет как синтаксис/правила ESLint, так и строгие типы TypeScript (tsc --noEmit).

Как запустить проверку вручную​

Вы можете в любой момент выполнить команду в терминале:

npm run lint

Она мгновенно проверит весь проект и убедится, что код чист и соответствует стандартам веб-разработки!
Настроил архитектуру контроля Feature-Sliced Design (FSD) и интеграцию правил импорта:

  • Автоматизация архитектурных проверок (FSD): Настроен плагин eslint-plugin-boundaries в eslint.config.js для непрерывного контроля корректности импортов между слоями.
  • Строгая иерархия слоев: Внедрены правила зависимостей слоев (от app до shared), запрещающие любые некорректные связи снизу вверх (например, импорт из слоев выше в слой shared).
  • Контроль публичных интерфейсов (Slices Entrypoints): Настроен строгий контроль входных точек (index.ts / index.tsx) для модулей processes, pages, widgets, features, и entities. Прямой импорт внутренних файлов слайсов (в обход их публичного API) теперь блокируется линтером.
  • Сохранение стабильности сборки: Для корневых и служебных файлов (таких как main.tsx и App.tsx) установлены правила исключения и безопасные политики по умолчанию, что предотвращает ложные срабатывания и позволяет проекту собираться без ошибок.
 
Неплохо, мне нравится, почему не выложищь на гитхаб? Чтоб иметь багрепорт и развивать надо чтоб им пользовались, а чтоб пользовались надо опенсорсить.
Сам сейчас на проекте к котому возможно б подошла твоя разработка пробую Payload CMS, модный подход headless CMS, фонтэнд можно уже качественно вайбкодить передовыми ИИ, бекэнду больше внимание уделять.
Поддержкой php я б не страдал от слова совсем, это какойто камбек в нулевые =). Если CMS дествительно легкая то гораздо лучше уделить внимание работе на Cloudflare Workers или подобных сервисах, это может быть фишечкой.
 
Последнее редактирование:
Неплохо, мне нравится, почему не выложищь на гитхаб? Чтоб иметь багрепорт и развивать надо чтоб им пользовались, а чтоб пользовались надо опенсорсить.
Сам сейчас на проекте к котому возможно б подошла твоя разработка пробую Payload CMS, модный подход headless CMS, фонтэнд можно уже качественно вайбкодить передовыми ИИ, бекэнду больше внимание уделять.
Поддержкой php я б не страдал от слова совсем, это какойто камбек в нулевые =). Если CMS дествительно легкая то гораздо лучше уделить внимание работе на Cloudflare Workers или подобных сервисах, это может быть фишечкой.
Привет. Спасибо за отзыв и внимание. На счет гитхаб, я еще не рассматривал этот вариант.
По поводу php - абсолютно согласен c вами, сейчас это как дополнительный вариант для тех, у кого виртуальный хостинг и нет поддержки node.js , либо не умеют устанавливать и настраивать Веб приложения на Node.
Основа ядра это React+TS+Express
+ в ветке php после сборки проект не имеет исходника. Его невозможно разрабатывать и масштабировать дальше без исходника. Но с другой стороны, это интересно получилось прям как кубик.
 
Привет. Спасибо за отзыв и внимание. На счет гитхаб, я еще не рассматривал этот вариант.
По поводу php - абсолютно согласен c вами, сейчас это как дополнительный вариант для тех, у кого виртуальный хостинг и нет поддержки node.js , либо не умеют устанавливать и настраивать Веб приложения на Node.
Основа ядра это React+TS+Express
+ в ветке php после сборки проект не имеет исходника. Его невозможно разрабатывать и масштабировать дальше без исходника. Но с другой стороны, это интересно получилось прям как кубик.
гитхаб сейчас единственный вариант нормально показать миру и развивать проект, хотя с текущим прогрессом ИИ не уверен что через 2-4 года будут актуальны CMS как таковые.
 
гитхаб сейчас единственный вариант нормально показать миру и развивать проект, хотя с текущим прогрессом ИИ не уверен что через 2-4 года будут актуальны CMS как таковые.
Почему вы так считаете?
CMS, CRM, ORM, были и будут. А как вы иначе представляете себе управление контентом или бизнес проектом без системы управления контентом ?)

Редизайн страницы профиля (UserProfile)​

Для решения проблемы громоздкого и несовременного отображения разделов на мобильных устройствах была спроектирована абсолютно новая гибкая двухрежимная навигационная панель:

  • Настольная версия (Desktop)
    • Сохранена классическая статичная боковая панель с левой стороны (lg:col-span-1), обеспечивающая быстрый доступ ко всем разделам.
    • Кнопки стилизованы с использованием сбалансированных отступов, скруглений углов (rounded-xl), ненавязчивых границ и контрастных шрифтов.
    • Добавлены контрастные темы и поддержка темного режима (dark:bg-slate-900, dark:hover:bg-slate-800).
  • Мобильная версия (Mobile & Tablet)
    • Минимизация интерфейса: Полностью скрыт длинный вертикальный список кнопок, который ранее занимал всю полезную высоту экрана.
    • Компактная плашка текущего раздела: Наверху области контента добавлена лаконичная информационная панель со стильной иконкой текущей вкладки, названием раздела и счетчиками (например, количеством товаров в листинге).
    • Интерактивная кнопка меню («Разделы») Компактная кнопка вызывает боковое выдвижное меню.
    • Анимированная шторка (Off-canvas Drawer)
      • При нажатии на «Разделы» плавно выдвигается левое боковое меню шириной 280px.
      • Задний план приглушается полупрозрачной темной вуалью с эффектом размытия (backdrop-blur-xs).
      • Анимация выдвижения и скрытия реализована на физическом движке пружин с помощью библиотеки motion/react (плавный пружинящий эффект отскока).
      • При клике на любой раздел или по затемненному фону шторка автоматически закрывается, мгновенно переключая вкладку.



Интеграция кнопки создания товара в шапку сайта:​

  • Кнопка «+ Добавить товар» была убрана из блока баннера и гармонично перенесена в глобальную шапку сайта в виде интуитивно понятной, эстетичной и интерактивной кнопки с иконкой «+».
  • Кнопка окрашена в фирменный акцентный оттенок индиго с мягкими тенями, отлично вписывается в общий ряд действий пользователя и полноценно функционирует: открывает форму создания лота для авторизованных пользователей либо предлагает войти в систему гостям.



Переработал мобильное меню профиля и улучшил его адаптивность:

  • Независимый сайдбар (React Portal): Меню профиля теперь рендерится как полностью изолированный и независимый блок в корне document.body через React Portal. Это гарантирует, что сайдбар открывается поверх всех элементов без искажений и ограничений со стороны контейнера <main>, аналогично боковой панели настроек и сессии.
  • Полноэкранная высота: Мобильный сайдбар теперь растягивается на всю высоту экрана (h-full / bottom-0 top-0), создавая аккуратный, современный вид.
  • Анимации и размытие: Сайдбар снабжён плавным выкатыванием сбоку через motion и глубоким полупрозрачным фоном (backdrop) с эффектом размытия backdrop-blur-xs, что даёт превосходный премиальный опыт взаимодействия на смартфонах.


Совместимость с виртуальным хостингом на PHP​

Все улучшения (как размеры шрифтов в карточках товара, так и новое адаптивное боковое меню профиля) будут работать безупречно после сборки проекта для работы на PHP-хостинге.
  1. Чистый клиентский код: Все сделанные изменения касаются визуальной части React-компонентов (CatalogView.tsx, UserProfile.tsx) и стилизации Tailwind CSS. При сборке проекта (npm run build) Vite компилирует этот код в оптимизированные статичные файлы HTML, CSS и JS.
  2. Независимость от сервера: Анимации (motion), адаптивная сетка Tailwind и логика переключения вкладок выполняются целиком на стороне браузера пользователя (клиентский рендеринг).
  3. Сохранение структуры API: Мы не изменяли маршруты запросов, структуры баз данных или схемы JSON в /public/php_rest_api. PHP-бэкэнд продолжит принимать и отдавать те же данные, а обновленный фронтенд будет бесшовно отображать их в новом удобном интерфейсе.


Обзор новых внесенных изменений и улучшений:​

1. Глубокая поисковая оптимизация (SEO) и индексация страниц​

Для соблюдения принципа SRP вся логика управления метаданными вынесена в отдельный самодостаточный хук, не загромождающий файлы разметки:

  • Новый хук src/hooks/useSEO.ts:
    • Страницы товаров: Динамически считывает просматриваемый товар, генерирует уникальный заголовок <title> (с названием, ценой и состоянием товара) и подставляет первые 160 символов описания товара в meta-description. Добавляет категории и пользовательские теги в поисковые meta-keywords.
    • Профили пользователей: Подставляет никнейм, роль (Moderator, Seller и т.д.) и дату регистрации пользователя в метаописание, открывая их для поисковых ботов.
    • Разделы администратора и SQL: Настраивает точечные заголовки и описания для панелей управления и интерактивной консоли.
    • Open Graph & Robots: Интегрирует метатеги og:title, og:description, og:type и robots="index, follow", делая ссылки привлекательными при репостах в социальных сетях и мессенджерах.
  • Глобальные стандарты по умолчанию (/index.html) :
    • Возвращены чистые, международные метатеги по умолчанию на английском языке, чтобы сайт корректно индексировался глобальными поисковыми системами (например, в США, Европе и т.д.).
  • Динамический мультиязычный SEO-движок (/src/hooks/useSEO.ts) :
    • Разработан и внедрен новый кастомный хук useSEO, который считывает активный язык (ru или en) из глобального контекста локализации useLanguage().
    • В зависимости от выбранного языка хук на лету генерирует переведенные и оптимизированные:
      • Заголовки страницы (document.title)
      • Мета-описания (description)
      • Ключевые слова (keywords)
      • Теги Open Graph (og:title, og:description, og:type, og:url) для красивого превью в Telegram, Discord, WhatsApp и социальных сетях.
      • Инструкции индексирования (robots) для поисковых роботов Google, Yandex и т.д.
  • Оптимизация под разные разделы и маршруты:
    • Карточка товара: Описание обрезается до оптимальных 160 символов, в ключевые слова добавляются категория товара, его теги, название и цена («Buy [title]...» на английском или «Купить [title]...» на русском).
    • Профиль пользователя: Название страницы и описание адаптированы под роль пользователя и дату его регистрации в зависимости от языка.
    • Разделы админки, SQL-консоли, входа и регистрации: Все тексты для поисковых систем полностью локализованы.
  • Интеграция в архитектуру (FSD + SRP) :
    • Логика SEO вынесена в отдельный, независимый хук useSEO в соответствии с принципом Single Responsibility Principle (SRP).
    • Хук вызывается внутри /src/components/MainLayout.tsx, что гарантирует бесшовное обновление метаданных при переходах пользователя и переключении языка в реальном времени.

2. Обновление версии проекта​

  • В конфигурационном файле package.json версия проекта обновлена с 1.0.0 до стабильной релизной версии 1.1.0.

PHP MVC REST API (/public/php_rest_api) :​

  • Все сделанные улучшения идеально совместимы со сборкой для классического виртуального хостинга Apache PHP8. Правила перенаправления в файле /public/.htaccess перенаправляют поисковые роботы на index.html, где наш React-движок мгновенно подставляет необходимые SEO-данные для индексации страниц.

3. Готов для PHP виртуального хостинга​

  • Все ранее сделанные доработки (адаптивный мобильный профиль, компактный баланс, всплывающее меню через createPortal на document.body, уменьшенные отступы space-y-1.5 и gap-3 lg:gap-8) реализованы на чистом React и Tailwind.
  • При сборке проекта с помощью npm run build файлы компилируются в статические ресурсы. Конфигурация в public/.htaccess автоматически:
    1. Перенаправляет все входящие запросы к /api/* на PHP-контроллеры в public/php_rest_api/index.php (для работы с базой данных MySQL через PDO).
    2. Обеспечивает корректный роутинг React (fallback на index.html/index.php для любых путей), предотвращая возникновение 404 ошибок при обновлении страниц товаров или профилей.
Соблюдены методологии Feature-Sliced Design (FSD), принципы Single Responsibility Principle (SRP) и все правила статического линтера проекта.

Исправил проблемы с отображением элементов на странице профиля в мобильной версии:

  • Оптимизация заголовка в разделе товаров (Catalog Offerings) :
    Описание «Products currently published to the public marketplace» (и его русская версия) перенесено под flex items-center justify-between блок, в котором находятся название и кнопка «Create Listing». Это предотвращает сдавливание текста кнопкой на экранах мобильных устройств и гарантирует аккуратное, чистое отображение.
  • Отображение таблицы товаров:
    Таблица списка товаров была обернута в адаптивный контейнер с классом overflow-x-auto w-full, а самой таблице задано минимальное адаптивное значение ширины (min-w-[700px]). Теперь таблица на экранах мобильных телефонов прокручивается по горизонтали и не выходит за пределы родительского блока, сохраняя при этом скругленные углы и границы карточки.


Добавил возможность переходить к просмотру товара прямо из списка объявлений в профиле:​

  • Интерактивные заголовки: Текст названия товара в таблице на странице профиля теперь является интерактивной ссылкой-кнопкой. При клике на неё открывается подробное модальное окно с деталями этого объявления.
  • Стилизация и адаптивность: Ссылка стилизована с использованием Tailwind CSS (hover:underline hover:text-indigo-600 transition-colors), корректно поддерживает как светлую, так и тёмную темы оформления, а также идеально отображается на мобильных устройствах.

Структуры, внешнего вида и интерактивного функционала основной странице просмотра товара:
  • Полный паритет функционала: Сайдбар отображает абсолютно все блоки данных, включая интерактивную галерею изображений с полноэкранным лайтбоксом, статус наличия, оптовые скидки на различных этапах, артикул, дату публикации, контакты продавца, а также расширенные вкладки с техническими характеристиками, отзывами и графиком изменения цены.
  • Поддержка темного режима: Добавлены корректные стили dark: для элементов панелей, полей ввода, выпадающих списков и рамки сайдбара, обеспечивая визуальный баланс как в светлом, так и в темном оформлении интерфейса.
  • Локализация и перевод (RU / EN) : Все названия кнопок, меток баз данных и индикаторов состояния динамически подстраиваются под выбранный пользователем язык интерфейса.
  • Улучшение UX (без всплывающих окон) : Заменил нативный браузерный alert() при копировании ссылки для Instagram на современное интерактивное состояние кнопки с временным отображением текста «Ссылка скопирована! / Copied!».


Исправил обе указанные проблемы:
  1. Корректное отображение вкладок в сайдбаре товара (Detail:(
    • Сделал контейнер вкладок #detail-modal-tabs в ProductDetailModal горизонтально прокручиваемым (overflow-x-auto) и скрыл системные скроллбары для идеального минималистичного вида.
    • Задал кнопкам вкладок фиксированную минимальную ширину (min-w-[120px]) и предотвратил сжатие (shrink-0). Теперь названия вкладок не переносятся по словам, не обрезаются и аккуратно распределяются, а на узких экранах пользователи могут плавно прокручивать их по горизонтали.
    • Адаптировал цвета активного подчеркивания и текста вкладок под темную тему.
  2. Заголовки товаров в профиле как ссылки:
    • В разделах My Purchased Orders (Мои покупки) и Incoming Buyer Sales (Входящие продажи) сделал заголовки объявлений кликабельными ссылками.
    • По клику на название товара теперь корректно срабатывает функция onSetSelectedProduct, открывая детализированную боковую панель товара со всей сопутствующей информацией. Если объявление по какой-то причине отсутствует в текущей базе, заголовок остается стандартным статичным текстом для предотвращения ошибок.
 

Вложения

  • Screenshot_62.png
    Screenshot_62.png
    85,5 KB · Просмотры: 3
  • Screenshot_65.png
    Screenshot_65.png
    57,9 KB · Просмотры: 4
  • Screenshot_64.png
    Screenshot_64.png
    104,2 KB · Просмотры: 4
Последнее редактирование:
Почему вы так считаете?
CMS, CRM, ORM, были и будут. А как вы иначе представляете себе управление контентом или бизнес проектом без системы управления контентом ?)
Потому что мы уже видели технические революции и как они меняют все. Я легко себе представляю управление контентом без CMS, CRM, ORM, прямо сейчас даже без ИИ, вопрос в том кто будет управлять контентом, для ИИ не нужно все это, а за представление человеку будет отвечать сам ИИ, на даром его называют "новым компилятором".

Смысл публикации ченжлога проекта без публикации иходников?
 
Потому что мы уже видели технические революции и как они меняют все. Я легко себе представляю управление контентом без CMS, CRM, ORM, прямо сейчас даже без ИИ, вопрос в том кто будет управлять контентом, для ИИ не нужно все это, а за представление человеку будет отвечать сам ИИ, на даром его называют "новым компилятором".

Смысл публикации ченжлога проекта без публикации иходников?
Доказано на практике и опыте, что расход на Сеньора или Мидла, меньше чем на ИИ. Мы придем к тому, что все вернутся к Джунам, Сеньерам и так далее.
ИИ не сможет заменить систему управления контентом, так как это и есть Движок сайта - это сама архитектура, механизм работы и взаимосвязи между кодом и структурой проекта - файлов.
Как вы себе представляете сайт без базовой и стандартной архитектуры CRM, CRM, ORM и так далее ??
Это тоже самое что автомобили будут ездить без водителя, только вы двигатель в машину не поставите - она не поедет ))

Потому что мы уже видели технические революции и как они меняют все. Я легко себе представляю управление контентом без CMS, CRM, ORM, прямо сейчас даже без ИИ, вопрос в том кто будет управлять контентом, для ИИ не нужно все это, а за представление человеку будет отвечать сам ИИ, на даром его называют "новым компилятором".

Смысл публикации ченжлога проекта без публикации иходников?
В том, что пользователь получает ровно то, что ему нужно, без возможности расширять. Каждое изменение и расширение функционала - отдельная разработка.
К примеру, ну не совсем корректно, но думаю суть вы поймете, вы покупаете Slack, вы можете расширять функционал в коде мессенжера Слак ? Нет, так как вы получаете скомпилированное приложение - сборку, без исходника. И любая доработка под ваши нужды, это письмо разработчику и индивидуальная доработка функционала под ваши нужды.
 
Доказано на практике и опыте, что расход на Сеньора или Мидла, меньше чем на ИИ. Мы придем к тому, что все вернутся к Джунам, Сеньерам и так далее.
Кем и где доказано? Это не так, был модным подход токенмаксинг, когда оценивали эффективность по колтчеству сожженных токенов, этот подход неэфективен. Сеньор с ИИ заменяет уже команду из разработчиокв уже сейчас и это выгодно.

ИИ не сможет заменить систему управления контентом, так как это и есть Движок сайта - это сама архитектура, механизм работы и взаимосвязи между кодом и структурой проекта - файлов.
гугл уже формирует интерфейс в завсимости от запроса пользователя, т.е. генерирует готовое мини веб-приложение адаптированное под конкретного пользователя и конкретный запрос, сейчас трафик ботов (краулеры, ИИ и т.п.) превышает во многом трафик живых людей, доля нового контента сгенерированого ИИ тоже стремительно растет. Зачем нужен сайт для людей, если люди на него не ходят и не наполняют? Бот зайдет на вваш сайт соберет саммаризирует всю информацию и выдаст пользователю гораздо быстрее и понятнее чем пользователь бы сам заходил и кликал по ссылкам... это уже так работает..

Это тоже самое что автомобили будут ездить без водителя,
эм, так ездят уже давно, Waymo например

В том, что пользователь получает ровно то, что ему нужно, без возможности расширять. Каждое изменение и расширение функционала - отдельная разработка.
ну чтож удачи =)
 
Интегрировал новый полнофункциональный раздел «Управление Товарами» (Product Catalog Management) в административную панель Admin Console.
Screenshot_99.png

Что было сделано:​

  • Интеграция панели навигации:
    • Добавлена новая вкладка «Управление Товарами» в боковое и мобильное меню навигации Admin Console.
    • Реализован динамический заголовок в верхней панели при переключении на вкладку управления объявлениями.
    • Обеспечен корректный маунтинг и рендеринг компонента ProductManagement со всеми необходимыми пропсами для синхронизации и обновления базы данных.
  • Полноценное управление товарами:
    • Сводные метрики (Bento-стиль): Сверху отображается интерактивная аналитика товаров (общее количество, товары в дефиците, средняя стоимость, просмотры) в виде эстетичных карточек с микро-анимацией.
    • Фильтрация и поиск: Поддерживается полнотекстовый поиск по названию или описанию, фильтрация по категориям (включая многоуровневые вложенности), статусу публикации (опубликованные, черновики, истекшие) и запасам (в наличии, мало, нет на складе).
    • Массовые операции (Bulk Actions): Реализована продвинутая панель массового редактирования. Администратор может выбрать несколько товаров и в один клик:
      • Сменить статус публикации (Опубликовать / Скрыть в черновики).
      • Массово изменить цены (увеличить или уменьшить на фиксированную сумму или процент).
      • Переместить выбранные товары в другую категорию.
      • Установить фиксированный остаток на складе.
      • Массово удалить выбранные объявления.
    • Быстрое инлайн-редактирование: Администратор может редактировать цену и остатки прямо в строке таблицы без открытия модальных окон, что значительно ускоряет работу.
    • Интеграция формы добавления и редактирования: Полная совместимость с модальным окном создания/редактирования товара (ProductFormModal), поддерживающим динамические и зависимые кастомные поля.
    • Локализация: Все новые интерфейсные фразы и сообщения панели управления успешно переведены и зарегистрированы в словарях локализации на русском и английском языках.
  • Стабильность:
    • Код полностью соответствует методологии Feature-Sliced Design (FSD) и принципам Single Responsibility Principle (SRP).
    • Проект успешно прошел валидацию линтера и полную компиляцию без каких-либо ошибок.

Реализовал новый функционал по изменению электронной почты (Email) и никнейма (Username) в разделе безопасности профиля («Security Vault»), а также обеспечил отслеживание и отображение истории изменений никнеймов для всех пользователей.

Что было сделано:​

  1. Форма изменения Email (Security Vault:(
    • Добавлена новая защищённая форма в раздел безопасности, позволяющая владельцу профиля изменить свой адрес электронной почты.
    • Смена почты требует обязательного ввода пароля от аккаунта и секретного PIN-кода для подтверждения личности.
    • Перед сохранением на стороне сервера выполняется строгая валидация формата и проверка нового адреса на уникальность (чтобы избежать совпадений с другими пользователями в базе данных).
  2. Форма изменения Никнейма (Username) с проверкой в реальном времени:
    • Добавлена форма смены никнейма владельцем аккаунта.
    • Реализована мгновенная проверка доступности никнейма: при вводе нового имени пользователя в поле ввода в реальном времени отправляется запрос к базе данных, и под полем отображается интерактивный статус («Этот никнейм уже занят» или «Никнейм свободен для изменения!»).
    • Введена валидация, запрещающая использование кириллических символов (допускаются только латиница, цифры и символ подчеркивания).
  3. История изменений никнеймов:
    • Каждое успешное изменение никнейма автоматически сохраняется в поле history_username профиля в виде структурированной истории.
    • Другие пользователи теперь могут видеть историю прежних никнеймов непосредственно в шапке просматриваемого профиля. Список прежних никнеймов отображается аккуратно как на десктопных, так и на мобильных устройствах.
    • Вся история сообщений в заказах и отзывы пользователя автоматически привязываются к новому никнейму для сохранения целостности.



Улучшения интерфейса каталога, оптимизации работы фильтров, локализации и совместимости с виртуальным хостингом.​


Что было сделано:​

  1. Индивидуальное сохранение состояния фильтров (для пользователей и гостей:(
    • Реализована интеллектуальная система сохранения состояния свернутых блоков бокового меню.
    • Данные сохраняются локально на стороне клиента с помощью localStorage, что полностью исключает нагрузку на базу данных и сервер.
    • Состояние сохраняется индивидуально для каждого пользователя (с использованием ключа collapsed_filters_${user_id}) и для гостей (с использованием ключа collapsed_filters_guest). При входе или выходе из учетной записи система автоматически переключается на соответствующий профиль настроек.
  2. Кнопка Свернуть/Развернуть все блоки в боковом фильтре:
    • В заголовке панели фильтров (Control Panel) добавлена кнопка, позволяющая одним кликом свернуть или развернуть все блоки фильтрации (catalog-sidebar).
    • Кнопка гармонично встроена в разметку, меняет иконку в зависимости от текущего состояния и снабжена всплывающей подсказкой на русском и английском языках.
  3. Улучшение фильтра «Категории»:
    • Если количество категорий превышает 10, в блоке категорий автоматически появляется поле быстрого поиска.
    • Список категорий снабжен прокручиваемым контейнером с ограничением высоты (max-h-60 overflow-y-auto custom-scrollbar), обеспечивая компактный и удобный просмотр.
    • Поиск работает мгновенно в реальном времени.
  4. Регистрация отсутствующих переводов и очистка старых скобок:
    • В словарь локализации (translations.ts) были зарегистрированы и применены на страницах все недостающие фразы:
      • В наличии, Под заказ, Нет в наличии (для страниц товаров и карточек),
      • Добавить в избранное и Сравнить (подсказки к кнопкам на главной),
      • Артикул (SKU), Последнее обновление, Не в избр., -- Выберите папку-коллекцию --, Цена выкупа, Распродано.
    • Полностью убран старый смешанный текст в скобках. Теперь язык отображения строго соответствует выбранной локали (русской или английской).
    • В карточках товара и блоках рекомендаций заменены все оставшиеся хардкод-строки, такие как "In Stock", "Out", "Only X left", "Sold Out", "Add to Cart", "Buy Now".
  5. Обеспечение совместимости PHP REST API для виртуального хостинга:
    • Проверена структура и логика работы public/php_rest_api.
    • Конфигурационный файл config.php содержит встроенную систему автоматической миграции (self-healing DB schema), которая сама создает необходимые таблицы и недостающие колонки при первом обращении, что гарантирует мгновенный запуск на любом классическом PHP8 Apache-хостинге без ручной настройки СУБД.




Разработал и внедрил новый функционал — Расширенную оценку и сортировку цен (Advanced Price Sorting) в каталоге товаров. Данное обновление позволяет пользователям гибко переключаться между классическим и интеллектуальным режимами расчёта цен прямо в блоке фильтров.

Что было сделано:​

  1. Регистрация новых фраз и локализация:
    • В файл локализации /src/locales/translations.ts были добавлены новые ключи для русского и английского языков:
      • Русский: «Расширенная оценка цен», «Выберите режим оценки цен для сортировки и диапазонов.», «Базовая (Основная цена)» и «Интеллектуальная (Активная/Скидки)».
      • Английский: «Advanced Price Sorting», «Choose price evaluation mode for sorting and ranges.», «Basic (Main Price)», «Intelligent (Active/Promo)».
  2. Интерактивный переключатель (Slider Switch):
    • В блоке фильтров (раздел «Сортировка») под выпадающим списком параметров добавлен стильный двухпозиционный ползунок-переключатель.
    • Ползунок гармонично вписывается как в светлую, так и в темную тему оформления благодаря плавным переходам, скруглениям (rounded-xl) и акцентным фоновым плашкам.
  3. Интеллектуальная фильтрация и сортировка (priceSortMode):
    • Базовый режим (Basic): Фильтрация по максимальной цене и сортировка («По возрастанию» / «По убыванию») производятся строго по стандартному полю цены товара (price).
    • Интеллектуальный режим (Intelligent): При фильтрации и сортировке учитываются все активные скидки (акционное промо-предложение sale_price с проверкой даты действия), цены предзаказа (custom_order_price) для товаров со статусом «Под заказ» и минимальная цена диапазона (price_from). Это делает сортировку товаров максимально точной и соответствующей той стоимости, которая отображается пользователю на карточке товара.
  4. Интеграция состояния и сохранение настроек:
    • Выбранный режим сортировки сохраняется в cookies пользователя (catalog-price-sort-mode), поэтому настройки фильтрации сохраняются при перезагрузке страницы.
    • Переключатель синхронизирован и корректно работает как в боковой панели на десктопах, так и в мобильной шторке фильтров.
    • Все изменения успешно прошли автоматическую проверку линтером и компиляцию проекта. База данных и PHP-файлы API не потребовали изменений, так как вся интерактивная логика фильтрации превосходно масштабируется на стороне клиента.
 

Вложения

  • Screenshot_98.png
    Screenshot_98.png
    146,8 KB · Просмотры: 2
  • Screenshot_97.png
    Screenshot_97.png
    113,5 KB · Просмотры: 2
Последнее редактирование:
Назад
Сверху