Визуальная фильтрация товаров по оттенку: разработка на 1С-Битрикс

Визуальный фильтр по цвету для каталога 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-коды цветов?

Два подхода — выбор зависит от количества и сложности цветов. Сравним их в таблице.

Свойство-список

Самый простой путь для 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 месяца за счёт снижения отказов. Закажите внедрение, чтобы получить консультацию и точную оценку вашего проекта.

Процесс работы и состав услуги

Этапы разработки

1. Аналитика — изучаем текущий каталог, структуру свойств, количество товаров.
2. Проектирование — выбираем подход (список или инфоблок), проектируем UI свотчей.
3. Разработка — реализуем хранение цветов, фильтрацию, кэширование счётчиков.
4. Тестирование — проверяем на 3 браузерах, мобильных устройствах, нагрузку 100+ одновременных запросов.
5. Деплой — выкатка на боевой сервер с мониторингом.

Что входит в работу

• Документация — схема свойств, описание API.
• Доступы — передача прав на администрирование фильтра.
• Обучение — инструкция для контент-менеджеров по добавлению новых цветов.
• Поддержка — 2 недели post-launch поддержки без доплат.

Типичные ошибки

Сроки выполнения

Цветовой фильтр через свойство-список — 1 рабочий день. Полная реализация с торговыми предложениями, свотчами в карточках, кэшированием счётчиков — 2–3 рабочих дня. Свяжитесь с нами для бесплатной оценки вашего проекта — получите консультацию прямо сейчас.