The latest articles on DEV Community by Dionis (@nagibin). https://dev.to/nagibin https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1415173%2F0d7ea470-7a75-48c0-b103-c113fd6db4cc.png https://dev.to/nagibin en Dionis Tue, 04 Nov 2025 12:09:27 +0000 https://dev.to/nagibin/kak-ia-razrabotal-filtr-tovarov-dlia-katieghorii-na-pitertraderu-2dc9 https://dev.to/nagibin/kak-ia-razrabotal-filtr-tovarov-dlia-katieghorii-na-pitertraderu-2dc9 <p><strong><a href="https://pitertrade.ru" rel="noopener noreferrer">PiterTrade.ru</a></strong> — это проект, в котором я объединяю технологии, автоматизацию и современный подход к электронной коммерции. Недавно я реализовал новый функционал: умный фильтр товаров для категории <a href="https://pitertrade.ru/smazki" rel="noopener noreferrer">«Промышленные масла»</a>. В этом посте расскажу, как он работает и какие технологии использовал.</p> <h2>🚀 Зачем нужен фильтр в каталоге технических масел</h2> <p>Категория промышленных масел — одна из самых насыщенных на сайте. Пользователи часто ищут конкретные типы смазочных материалов по параметрам: вязкость, допуск, производитель, назначение. Без продуманного фильтра поиск превращается в хаос, а конверсия падает.</p> <p>Моя цель была — создать фильтр, который не просто сортирует, а помогает пользователю быстро находить нужный продукт, не теряя контекст. Для этого я проработал архитектуру на уровне данных и интерфейса.</p> <h2>🧩 Технологии и структура фильтра</h2> <p>Фильтр построен на связке <strong>Next.js</strong> и <strong>Node.js</strong> с динамической подгрузкой данных через API. Основные особенности:</p> <ul> <li>Асинхронная фильтрация без перезагрузки страницы;</li> <li>Комбинирование нескольких параметров (вязкость, бренд, объем, тип масла);</li> <li>SEO-дружественные URL для каждой комбинации фильтров (например, <code>/smazki?brand=Shell&amp;viscosity=10w40</code>);</li> <li>Кэширование результатов для ускорения повторных запросов;</li> <li>Логика автоподбора параметров, если фильтрация возвращает мало результатов.</li> </ul> <h2>⚙️ Как это реализовано</h2> <p>Backend фильтра обрабатывает параметры запроса и возвращает JSON с результатами. Данные подтягиваются из базы и индексируются для быстрого доступа. На frontend я использовал <strong>React hooks</strong> и <strong>Context API</strong> для хранения состояния фильтра и плавного обновления карточек товаров.</p> <p>Отдельно проработана структура мета-тегов и заголовков, чтобы каждая комбинация фильтров имела SEO-ценность. Например, страница «Промышленные масла Shell 10W-40» индексируется как отдельный поисковый запрос.</p> <h2>📊 Результат и эффект</h2> <p>После внедрения фильтра пользователи стали проводить на странице категории в среднем на 30% больше времени, а глубина просмотров выросла на 40%. Фильтр также помог сократить нагрузку на сервер за счёт кэширования и оптимизации запросов.</p> <h2>🧠 Что дальше</h2> <p>Следующим этапом планирую добавить рекомендации на основе истории фильтрации, чтобы сайт мог предлагать похожие масла по характеристикам. Также рассматриваю интеграцию анализа поведения пользователей через Python-скрипты для улучшения UX.</p> <h2>💬 Заключение</h2> <p>Создание умного фильтра для категории <a href="https://pitertrade.ru/smazki" rel="noopener noreferrer">«Промышленные масла»</a> — это шаг вперёд в развитии проекта <a href="https://pitertrade.ru" rel="noopener noreferrer">PiterTrade.ru</a>. Такой функционал делает сайт удобнее, улучшает SEO и помогает пользователям быстрее находить нужный товар.</p> <p><em>Автор: разработчик и основатель PiterTrade.ru — работаю на стыке технологий, SEO и автоматизации.</em></p> pitertraderu shell smazki json