Визуальный фильтр по цвету для каталога 1С-Битрикс
Интернет-магазин одежды теряет до 30% конверсии из-за того, что покупатель не может найти нужный оттенок. Текстовый список «Красный», «Синий», «Белый» не передаёт разницы между #E53935 и #D32F2F. Мы разрабатываем визуальный фильтр по цвету под ключ — с кружками-свотчами, HEX-кодами и фильтрацией по торговым предложениям. Опыт внедрения в 50+ проектах, сроки от 1 рабочего дня. HEX-код — основа точного отображения. Согласно официальной документации 1С-Битрикс, свойства типа «Список» позволяют хранить дополнительный XML_ID, что идеально для HEX-кодов.
Разница между галочкой с текстом и цветным кружком — это разница в продажах. Клиент видит точный оттенок и сразу переходит к покупке. Наша реализация учитывает кэширование тегированное, интеграцию с 1С и работу через Битрикс24 REST. Оценим ваш проект за 24 часа. Обращайтесь за разработкой под ключ, чтобы получить консультацию прямо сейчас.
Проблемы, которые решаем
Типичная боль — свойство цвета есть, но в фильтре отображается список названий. Пользователь не понимает, какой именно красный ему нужен. Вторая проблема — фильтрация по торговым предложениям не учитывает остатки: товар есть в цвете, но свотч не показывается. Третья — производительность: на каталогах с 10 000+ товаров запросы к инфоблокам без кэширования убивают сервер.
Мы решаем все три: визуальный UI, точная фильтрация по наличию и асинхронная подгрузка счётчиков через агенты. Гарантируем, что фильтр не упадёт при 100 000 товаров. Средняя стоимость такой доработки — от 25 000 до 40 000 ₽, а экономия на повторных обращениях клиентов достигает 30 000 ₽ в месяц.
Как правильно хранить HEX-коды цветов?
Два подхода — выбор зависит от количества и сложности цветов. Сравним их в таблице.
| Подход | Когда использовать | HEX-хранение | Производительность | Гибкость |
|---|---|---|---|---|
| Свойство-список | 5-20 цветов, однородные оттенки | XML_ID = HEX | Высокая (один запрос к справочнику) | Низкая (сложно добавить текстуру/градиент) |
| Отдельный инфоблок цветов | 50+ цветов, текстуры, паттерны | UF_HEX_CODE + PREVIEW_PICTURE | Средняя (дополнительный инфоблок) | Высокая (можно привязать картинку, описание, сортировку) |
Свойство-список
Самый простой путь для fashion-магазина с базовыми цветами. Значение свойства — читаемое название, XML_ID — HEX-код. Пример настройки: создаём свойство типа «Список» с кодом COLOR. Значения: «Красный» → XML_ID: #E53935, «Синий» → XML_ID: #1565C0, «Белый» → XML_ID: #FFFFFF. При отображении в фильтре используем XML_ID как цвет и VALUE как alt-текст. Подробнее о свойствах — в документации.
Отдельный инфоблок цветов
Для случаев, когда нужны свотчи с текстурой (металлик, матовый) или градиенты. Каждый цвет — элемент инфоблока с полем PREVIEW_PICTURE (изображение свотча) и UF-полем UF_HEX_CODE. Это сложнее, но даёт полный контроль.
Реализация UI фильтра и свотчей
Получение цветов и HTML-шаблон
// Получение цветов с HEX-кодами из XML_ID
$colors = [];
$res = CIBlockPropertyEnum::GetList(
['SORT' => 'ASC'],
['IBLOCK_ID' => $iblockId, 'CODE' => 'COLOR']
);
while ($color = $res->Fetch()) {
$colors[] = [
'id' => $color['ID'],
'name' => $color['VALUE'],
'hex' => $color['XML_ID'],
'xmlId' => $color['XML_ID'],
];
}
// Подсчёт товаров по цвету (через торговые предложения)
$colorCounts = getColorCountsFromOffers($iblockId, OFFERS_IBLOCK_ID);
<div class="filter-block filter-block--color">
<h3 class="filter-block__title">Цвет</h3>
<div class="color-swatches">
<?php $selectedColors = array_map('htmlspecialchars', (array)($_GET['COLOR'] ?? [])); ?>
<?php foreach ($colors as $color): ?>
<?php $isSelected = in_array($color['xmlId'], $selectedColors); ?>
<label class="color-swatch <?= $isSelected ? 'is-active' : '' ?>"
title="<?= htmlspecialchars($color['name']) ?>">
<input type="checkbox" name="COLOR[]" value="<?= htmlspecialchars($color['xmlId']) ?>" <?= $isSelected ? 'checked' : '' ?>>
<span class="swatch-circle" style="background-color: <?= htmlspecialchars($color['hex']) ?>;" aria-label="<?= htmlspecialchars($color['name']) ?>"></span>
</label>
<?php endforeach; ?>
</div>
</div>
CSS для свотчей
.color-swatch { display: inline-flex; flex-direction: column; align-items: center; cursor: pointer; margin: 4px; }
.color-swatch input[type="checkbox"] { display: none; }
.swatch-circle { width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; box-shadow: 0 0 0 1px rgba(0,0,0,0.15); transition: box-shadow 0.15s, transform 0.15s; }
.color-swatch.is-active .swatch-circle { box-shadow: 0 0 0 2px var(--accent-color, #2196f3); transform: scale(1.1); }
.color-swatch:hover .swatch-circle { transform: scale(1.05); }
Фильтрация по цвету через торговые предложения
Цвет обычно — свойство торгового предложения. Функция получает ID товаров по XML_ID цветов с учётом остатков.
function getProductIdsByColors(int $offersIblockId, array $colorXmlIds): array
{
if (empty($colorXmlIds)) return [];
// Получение ID значений свойства по XML_ID
$enumIds = [];
$res = CIBlockPropertyEnum::GetList([], ['IBLOCK_ID' => $offersIblockId, 'CODE' => 'COLOR', 'XML_ID' => $colorXmlIds]);
while ($row = $res->Fetch()) {
$enumIds[] = $row['ID'];
}
if (empty($enumIds)) return [];
$productIds = [];
$res = CIBlockElement::GetList(
[],
['IBLOCK_ID' => $offersIblockId, 'ACTIVE' => 'Y', '>CATALOG_QUANTITY' => 0, 'PROPERTY_COLOR' => $enumIds],
false, false, ['PROPERTY_CML2_LINK']
);
while ($row = $res->GetNext()) {
if ($row['PROPERTY_CML2_LINK_VALUE']) {
$productIds[] = intval($row['PROPERTY_CML2_LINK_VALUE']);
}
}
return array_unique($productIds);
}
Применение фильтра: $selectedColors = array_map('htmlspecialchars', (array)($_GET['COLOR'] ?? [])); if (!empty($selectedColors)) { $arFilter['ID'] = getProductIdsByColors(OFFERS_IBLOCK_ID, $selectedColors) ?: [0]; }
Отображение цветов в карточке товара
Для согласованности с фильтром — те же свотчи в миниатюрах каталога. Получить доступные цвета для товара можно аналогичным запросом через торговые предложения с учётом остатков.
Почему визуальный фильтр окупается?
Визуальный фильтр лучше текстового: конверсия выше на 15–30% для категорий, где цвет критичен (одежда, мебель, декор). Пользователи проводят в 2 раза больше времени на странице каталога. Окупаемость разработки — в среднем 2 месяца за счёт снижения отказов. Закажите внедрение, чтобы получить консультацию и точную оценку вашего проекта.
Процесс работы и состав услуги
Этапы разработки
- Аналитика — изучаем текущий каталог, структуру свойств, количество товаров.
- Проектирование — выбираем подход (список или инфоблок), проектируем UI свотчей.
- Разработка — реализуем хранение цветов, фильтрацию, кэширование счётчиков.
- Тестирование — проверяем на 3 браузерах, мобильных устройствах, нагрузку 100+ одновременных запросов.
- Деплой — выкатка на боевой сервер с мониторингом.
Что входит в работу
- Документация — схема свойств, описание API.
- Доступы — передача прав на администрирование фильтра.
- Обучение — инструкция для контент-менеджеров по добавлению новых цветов.
- Поддержка — 2 недели post-launch поддержки без доплат.
Типичные ошибки
| Ошибка | Последствия | Решение |
|---|---|---|
| Не кэшировать счётчики | Каждый запрос к фильтру считает остатки, убивая базу | Используйте агенты для асинхронного пересчёта |
| XML_ID не соответствует HEX | Фильтр сломается | Валидация регуляркой /^#[0-9a-fA-F]{6}$/ |
| Забыть про белый цвет | Свотч белого цвета не виден без рамки | Добавить обводку border: 1px solid #ccc |
Сроки выполнения
Цветовой фильтр через свойство-список — 1 рабочий день. Полная реализация с торговыми предложениями, свотчами в карточках, кэшированием счётчиков — 2–3 рабочих дня. Свяжитесь с нами для бесплатной оценки вашего проекта — получите консультацию прямо сейчас.