Вид значений в фильтре (выбор цвета картинкой)
Значение фильтра может выбираться не только по названию. Если в фиде у значения есть свой вид — маленькая картинка (образец цвета, ткани, принта) или код цвета, — фильтр показывает его рядом с названием:
Цвет
☐ ▣ Мультикам 42
☐ ▣ Спектр СКВО 18
☐ ▣ Олива 9
☐ Тан 4 ← у значения нет картинки: обычная строкаМеханика не привязана к слову «цвет». Картинка так же осмысленна у ткани, принта, вкуса, бренда — у любой характеристики, значение которой выглядит как-то само по себе. Название значения, счётчик товаров и поиск по значениям остаются на месте: картинка добавляется к списку, а не заменяет его.
Откуда берётся картинка
Основная форма: атрибут picture у <param>
Картинка указывается прямо на том теге, где лежит значение:
xml
<param name="Цвет" picture="https://example.com/swatch/multicam.webp">Мультикам</param>
<param name="Цвет" picture="#f5f0e6">Айвори</param>Так у одного товара может быть сколько угодно цветов сразу — какая картинка какому значению принадлежит, сказано разметкой:
xml
<offer id="5684" group_id="5652">
...
<param name="Цвет" picture="https://example.com/swatch/red.webp">красный</param>
<param name="Цвет" picture="https://example.com/swatch/beige.webp">бежевый</param>
</offer>Фид остаётся YML-совместимым
picture — дополнительный атрибут тега: значение характеристики по-прежнему лежит текстом внутри <param>, и системы, которые про этот атрибут не знают, читают фид как раньше. Имя атрибута настраивается в личном кабинете, если в вашей выгрузке оно занято.
Старая форма: парная характеристика
Многие выгрузки уже отдают картинку цвета соседним параметром — эта форма поддержана, переписывать выгрузку ради фильтра не нужно:
xml
<param name="Цвет">Мультикам</param>
<param name="Картинка цвета">https://example.com/swatch/multicam.webp</param>Связь здесь только по соседству, поэтому в расчёт идут товары ровно с одним значением и ровно одной картинкой. Товар с двумя цветами и двумя картинками пропускается: сказать, какая из них чья, нечем.
xml
<!-- ❌ в карту не попадёт: какая картинка какому цвету — неизвестно -->
<param name="Цвет">красный</param>
<param name="Цвет">бежевый</param>
<param name="Картинка цвета">https://example.com/a.jpg</param>
<param name="Картинка цвета">https://example.com/b.jpg</param>Если у вас есть возможность править выгрузку — переходите на атрибут: он снимает это ограничение целиком.
Код цвета вместо картинки
Там, где выкрасок нет, в том же поле можно отдать цвет кодом — #rrggbb или #rgb:
xml
<param name="Цвет" picture="#f5f0e6">айвори</param>
<param name="Цвет" picture="#333">графит</param>Фильтр нарисует цветной квадрат. Смешивать формы в одном каталоге можно: у одних значений картинка, у других код, у третьих ничего.
Требования к данным
| Требование | Почему так |
|---|---|
| Одному значению — одна картинка на весь каталог | Разные картинки у одного значения означают, что в параметр попало фото товара, а не образец. Такое значение останется без картинки, а в «Проблемах импорта» появится строка с числом вариантов. Угадывать «самую частую» картинку сервис не будет: на реальных фидах она с тем же успехом оказывается фотографией товара. |
| Один адрес в поле, не список через запятую | Картинка у значения одна. Список — это галерея товара, она живёт в <picture>. |
| Картинка должна быть маленькой | См. ниже — это самый дорогой пункт. |
| Одно написание значения на каталог | «Мультикам» и «Multicam» — два разных значения фильтра, и картинка нужна каждому. Сервис сам написания не схлопывает. |
| Характеристики — на торговом предложении | Если цвет указан только на карточке товара, у вариантов его нет, и фильтровать нечего. |
| Ссылка абсолютная, по HTTPS | Картинка грузится в браузере покупателя напрямую с вашего домена. |
Про размер картинки: считайте трафик
Сервис не уменьшает картинки и не хранит их у себя. Покупатель грузит ровно тот файл, ссылку на который вы дали в фиде, а в фильтре он рисуется 24×24.
Замер на реальном каталоге из 70 цветов:
| Что отдаёт фид | Вес всех 70 картинок |
|---|---|
| Оригиналы 200×200 PNG (как лежат в админке) | 2 684 КБ |
| Те же образцы 32×32 webp (ресайз сайта) | 20 КБ |
Разница — в 130 раз, на ровном месте. Оптимальный источник — уменьшенная копия 48×48 (запас для экранов с двойной плотностью) в webp или png. Если ваша CMS умеет ресайз при выгрузке — отдавайте в фид именно его адрес, а не оригинал.
Как включить
- В личном кабинете откройте карточку проекта → «Настройка выдачи» → таблица «Характеристики».
- У нужной характеристики (например, «Цвет») в колонке «Вид в фильтре» выберите источник: Из атрибута параметра или Из парного свойства.
- Кнопкой в конце строки откройте настройку: имя атрибута (по умолчанию
picture) или выбор парной характеристики. Там же — превью на ваших значениях: видно, образцы это или фотографии товаров. - Характеристика должна быть включена как фильтр (фасет) — иначе показывать картинки негде.
Настройка применяется сама: в течение минуты после последней правки сервис перечитает фид. До того как пройдёт первое обновление, фильтр остаётся обычным списком названий — это нормально.
Как проверить, что получилось
- Фильтр в витрине. Значения, у которых картинка нашлась, рисуются с ней или цветом; остальные остаются строками. Свёрнутый список показывает первые 8 значений — грузится восемь картинок, а не весь каталог.
- «Проблемы импорта» в карточке проекта. Здесь появятся:
- «У значения фильтра в фиде больше одной картинки» — значение осталось без картинки, в детали строки записано само значение и число вариантов;
- «Значений у фильтра слишком много» — картинки берутся у первой тысячи значений фасета, остальные остаются текстом.
- Если картинок нет ни у одного значения — проверьте, что имя атрибута в настройке совпадает с фидом, а парная характеристика выбрана та самая.
Что этот механизм НЕ делает
- Не меняет вид фильтра. Это по-прежнему список с галочками, счётчиком и поиском по значениям, просто со значками. Отдельной «плитки образцов» нет.
- Не уменьшает и не кэширует картинки у себя — адрес из фида уходит в браузер как есть.
- Не схлопывает дубли написаний. «Чёрный» и «Черный» останутся двумя значениями фильтра.
- Не режет значения по разделителям. «Чёрный / серый» — это одна двухцветная расцветка, а не два цвета.
Для интеграторов
Фасет со своим видом помечен в /config полем visual (image | color | null), а сами картинки отдаёт GET /facets/images. Признак выводится из наличия данных, а не из настройки, поэтому до первого успешного импорта его нет. Подробности и примеры запросов — в разделе «Подборки и витрины через API».