Фильтр товаров интернет-магазина: разработка каталога с нуля

Разработка фильтра товаров интернет-магазина - это не чекбокс сбоку от каталога, а часть логики, от которой зависит, купит человек товар или закроет вкладку через 10 секунд. На практике вижу одну и ту же картину: заказчик просит «фильтр по цене и категории», а после первого релиза выясняется, что нужны ещё фильтры по 10-15 параметрам, сортировка по популярности и счётчики «осталось 3 шт.», и всё это должно отрабатывать без перезагрузки страницы.

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

Зачем каталогу нормальный фильтр товаров

В магазине на 30-50 товаров фильтр не критичен - покупатель пролистает весь каталог за минуту. Как только ассортимент переваливает за пару сотен позиций, без фильтра человек листает 3-4 страницы пагинации и уходит к конкуренту, у которого можно сразу отсеять товары по цене и наличию. Я работал с каталогами на WooCommerce, где после добавления фильтра по цене, размеру и наличию заметно снижалась доля людей, открывающих карточку товара и тут же жмущих «назад»: покупатели быстрее находили нужное, вместо того чтобы листать товары наугад.

Второй момент - фильтр снимает нагрузку с поддержки. Если менеджер магазина каждую неделю отвечает на вопросы вроде «а где у вас товары дешевле 3000 рублей», это сигнал, что фильтр либо не работает, либо не покрывает нужные параметры каталога.

Какие типы фильтров нужны каталогу магазина

Набор фильтров зависит от товарной категории, но есть база, которая закрывает большинство запросов покупателей:

• Чекбоксы по категориям и брендам - множественный выбор, самый частый тип фильтра.
• Диапазон цены - слайдер или два поля «от» и «до».
• Радиокнопки или переключатель для параметров с одним значением: в наличии / под заказ, самовывоз / доставка.
• Теги и атрибуты - цвет, материал, назначение, обычно приходят из характеристик товара в CRM или 1С.
• Сортировка - по цене, по популярности, по новизне; технически не фильтр, но всегда идёт с ним в связке.

Где считать фильтрацию: на клиенте или на сервере

Это архитектурное решение, от которого зависит скорость работы каталога. Если товаров немного и все они уже загружены на страницу в виде JSON, фильтрацию можно считать прямо в браузере: скрипт проходит по массиву и скрывает карточки, которые не подходят под условия. Такой подход работает быстро и без обращений к серверу, но годится для каталогов примерно до 300-500 позиций - дальше страница долго грузится сразу целиком.

Для крупных каталогов фильтрация уходит на сервер: запрос к базе с условиями WHERE, либо поисковый движок вроде Elasticsearch или Meilisearch, если нужен полнотекстовый поиск вместе с фасетами. Здесь важны индексы:

SELECT id, title, price
FROM products
WHERE category_id = 12
  AND price BETWEEN 1000 AND 5000
  AND in_stock = 1
ORDER BY price ASC;

CREATE INDEX idx_products_filter
  ON products (category_id, price, in_stock);

Без составного индекса на каталоге в 10 000+ товаров выборка по фильтру из 3-4 условий может уходить в полный перебор таблицы и грузить страницу 2-3 секунды вместо 100-200 мс. На стороне интерфейса результат отдаётся через AJAX: фронтенд подгружает новый набор карточек без перезагрузки, а параметры фильтра пишутся в URL через history.pushState, чтобы отфильтрованную выдачу можно было сохранить в закладки или отправить ссылкой.

Фильтр для WooCommerce: плагины и кастомная доработка

Готовые плагины и их пределы

JetSmartFilters, WooCommerce Product Filter, YITH WooCommerce Ajax Filter закрывают типовой случай: чекбоксы по таксономии, диапазон цены, фильтр по атрибутам товара. Для магазина с одной категорией товаров и стандартной структурой их обычно достаточно.

Когда нужен кастомный код

Плагины начинают буксовать на нетиповых сценариях: остатки на нескольких складах, цена за единицу измерения («м²», «за 100 г»), совместный фильтр по параметрам и полнотекстовому поиску по артикулу. В таких случаях пишу фильтр поверх WP_Query с tax_query и meta_query напрямую, а счётчики товаров по каждой комбинации кэширую через transients, чтобы значения не пересчитывались на каждый запрос заново.

Если стандартный плагин не тянет логику конкретного каталога, разработку кастомного фильтра под такую задачу обычно веду отдельным модулем, не трогая структуру темы - это безопаснее при последующих обновлениях WooCommerce. Если фильтр нужен как часть нового сайта на WordPress, закладываю его в общий бюджет разработки, который стартует от 60 000 ₽.

Фильтр для Tilda: кастомный скрипт поверх каталога

Что умеет встроенный фильтр Tilda

Блок «Магазин» в Tilda фильтрует по категории и цене штатными средствами, но без счётчиков «сколько товаров останется», без комбинации из нескольких атрибутов сразу и без подгрузки без перезагрузки страницы. Для простого каталога на 50-100 товаров этого хватает.

Что даёт кастомный скрипт

Когда нужен фильтр по нескольким параметрам сразу или собственная логика подсчёта, пишу скрипт, который читает данные товаров из JSON-выгрузки Tilda, строит интерфейс фильтра динамически на основе уникальных значений атрибутов и перерисовывает сетку карточек без перезагрузки блока. Простая доработка, например добавить фильтр по одному дополнительному параметру к существующему блоку - от 3 000 ₽. Комплексный фильтр с несколькими критериями, диапазоном цены и AJAX-подгрузкой - это уже кастомная интеграция, от 40 000 ₽.

На Tilda отдельно стоит проверять мобильную версию: верстка блоков часто ломается при динамическом изменении количества карточек в сетке, особенно если в теме заданы фиксированные высоты.

Производительность и SEO страниц с фильтрами

Каждая комбинация параметров фильтра технически создаёт свой URL: /catalog/kroliki/?color=pink&size=m&instock=1. На каталоге с десятком атрибутов таких комбинаций тысячи, и поисковый робот, наткнувшись на них, тратит краулинговый бюджет на почти одинаковые страницы вместо действительно нужных.

Решается это на уровне разметки и структуры URL:

• Canonical на основную страницу категории для служебных комбинаций фильтра.
• robots.txt или meta noindex, follow для параметров, которые не несут отдельного смысла.
• Отдельная «чистая» страница вместо параметра фильтра для действительно популярных запросов - например, /catalog/kroliki/rozovye/ вместо ?color=pink, если у этого сочетания есть свой спрос в поиске.
• Кэширование счётчиков фасетов на стороне сервера, чтобы пересчёт не нагружал базу при каждом переключении чекбокса.

Без этих мер фильтр из инструмента продаж превращается в источник дублей контента, а сервер начинает тормозить на пике посещаемости именно из-за пересчёта фасетов при каждом клике.

Частые вопросы

Сколько стоит разработать фильтр товаров для интернет-магазина?

Зависит от платформы и сложности логики. Простая доработка фильтра на Tilda, один-два параметра - от 3 000 ₽. Комплексный фильтр с AJAX-подгрузкой и несколькими критериями на Tilda - от 40 000 ₽. Если фильтр разрабатывается как часть нового интернет-магазина под ключ, он входит в общий бюджет проекта, который стартует от 80 000 ₽.

Можно ли сделать фильтр на Tilda без разработчика?

Базовый фильтр по категории и цене в блоке «Магазин» настраивается штатными средствами конструктора. Как только нужна логика вроде фильтра по нескольким атрибутам сразу, счётчиков «сколько товаров останется» после выбора условий или подгрузки без перезагрузки страницы, штатных настроек не хватает и требуется кастомный скрипт.

Как фильтр влияет на SEO каталога?

Каждая комбинация параметров технически создаёт отдельный URL, и поисковик может проиндексировать тысячи почти одинаковых страниц как дубли. Решается через canonical на основную страницу категории, noindex для служебных комбинаций и отдельные чистые URL только для реально популярных сочетаний параметров.

Нужен ли Elasticsearch, если товаров в каталоге немного?

При каталоге до 5-10 тысяч товаров обычный SQL с составными индексами по полям фильтрации справляется без проблем, а выборка укладывается в десятки миллисекунд. Elasticsearch или Meilisearch есть смысл подключать, когда нужен полнотекстовый поиск вперемешку с фильтрами и подсчёт фасетов в реальном времени на десятках тысяч позиций.