Разработка таблицы размеров одежды на 1С-Битрикс

Разработка таблицы размеров одежды на 1С-Битрикс

Главная причина возвратов в fashion-ритейле — несоответствие размера. Таблица размеров на карточке товара снижает возвраты на 20–40% в зависимости от категории. Но стандартной таблицы размеров в 1С-Битрикс нет. Её нужно проектировать и разрабатывать — с учётом того, что одна и та же одежда может продаваться в размерах RU, EU, US, UK одновременно, а размерные данные различаются у каждого бренда.

Архитектура хранения размерных данных

Неправильный подход — жёстко вшить таблицу размеров в шаблон компонента. Через месяц появится второй бренд с другой размерной сеткой, и всё нужно переделывать.

Правильный подход — хранить таблицы размеров как сущности в базе данных с привязкой к брендам и категориям.

Кастомные таблицы:

CREATE TABLE b_size_charts (
    ID          SERIAL PRIMARY KEY,
    NAME        VARCHAR(255) NOT NULL,  -- "Мужские футболки Nike"
    CATEGORY    VARCHAR(100),           -- 'tops', 'bottoms', 'outerwear', 'underwear'
    BRAND_ID    INT,                    -- ссылка на инфоблок брендов
    GENDER      VARCHAR(10),            -- 'male', 'female', 'unisex', 'kids'
    ACTIVE      BOOLEAN DEFAULT TRUE
);

CREATE TABLE b_size_chart_rows (
    ID          SERIAL PRIMARY KEY,
    CHART_ID    INT NOT NULL REFERENCES b_size_charts(ID),
    SIZE_RU     VARCHAR(10),  -- 42, 44, 46...
    SIZE_EU     VARCHAR(10),  -- XS, S, M, L...
    SIZE_US     VARCHAR(10),  -- 6, 8, 10...
    SIZE_UK     VARCHAR(10),
    CHEST_CM    NUMERIC(5,1), -- обхват груди, см
    WAIST_CM    NUMERIC(5,1),
    HIPS_CM     NUMERIC(5,1),
    HEIGHT_FROM SMALLINT,     -- рост от, см
    HEIGHT_TO   SMALLINT,     -- рост до, см
    SORT        INT DEFAULT 100
);

Привязка таблицы к товару

Товар в каталоге Битрикс получает свойство SIZE_CHART_ID типа «Число» — ID нужной таблицы размеров. Это позволяет:

• Разным брендам иметь разные таблицы
• Разным категориям (верх/низ/обувь) использовать разные таблицы
• Одному товару — конкретную таблицу, отличную от категорийной по умолчанию

Если SIZE_CHART_ID у товара не задан, компонент ищет таблицу по умолчанию для раздела (инфоблока). Это делается через свойство раздела b_iblock_section:

// В component.php таблицы размеров
$chartId = $arResult['PROPERTIES']['SIZE_CHART_ID']['VALUE'];
if (!$chartId) {
    // Берём таблицу по умолчанию для раздела или бренда
    $chartId = SizeChartTable::getDefaultForSection($arResult['IBLOCK_SECTION_ID']);
}

Компонент таблицы размеров

Компонент custom:catalog.size.chart — модальное окно или вкладка на карточке товара:

component.php — выборка данных:

$chart  = SizeChartTable::getByPrimary($chartId)->fetch();
$rows   = SizeChartRowTable::getList([
    'filter' => ['=CHART_ID' => $chartId, '=ACTIVE' => true],
    'order'  => ['SORT' => 'ASC'],
])->fetchAll();

$this->arResult = ['CHART' => $chart, 'ROWS' => $rows];
$this->IncludeComponentTemplate();

template.php — вывод таблицы:

echo '<table class="size-chart">';
echo '<tr><th>RU</th><th>EU</th><th>US</th><th>Грудь (см)</th><th>Талия (см)</th><th>Бёдра (см)</th></tr>';
foreach ($arResult['ROWS'] as $row) {
    echo '<tr>';
    echo '<td>' . htmlspecialchars($row['SIZE_RU']) . '</td>';
    echo '<td>' . htmlspecialchars($row['SIZE_EU']) . '</td>';
    // ...
    echo '</tr>';
}
echo '</table>';

Кеширование компонента: таблица размеров меняется редко, кеш на 24 часа:

if ($this->StartResultCache(86400, 'size_chart_' . $chartId)) {
    // ...
    $this->EndResultCache();
}

Интерактивная подсветка выбранного размера

Когда пользователь выбирает торговое предложение (размер) на карточке товара, соответствующая строка в таблице размеров подсвечивается. Это требует синхронизации между компонентом выбора торговых предложений и таблицей размеров.

Торговое предложение в Битрикс хранит размер как свойство SIZE_VALUE. Это значение передаётся в JS:

// При выборе ТП
document.querySelectorAll('[data-offer-id]').forEach(btn => {
    btn.addEventListener('click', function() {
        const sizeValue = this.dataset.sizeValue; // '44' или 'M'
        highlightSizeInChart(sizeValue);
    });
});

function highlightSizeInChart(size) {
    document.querySelectorAll('.size-chart tr').forEach(row => {
        row.classList.remove('highlighted');
        if (row.dataset.sizeRu === size || row.dataset.sizeEu === size) {
            row.classList.add('highlighted');
        }
    });
}

Советник по размеру

Простой калькулятор: пользователь вводит свои мерки и получает рекомендованный размер.

function recommendSize(chest, waist, hips) {
    const chartData = window.sizeChartData; // прокидывается из PHP в JSON
    for (const row of chartData) {
        if (chest >= row.chest_min && chest <= row.chest_max &&
            waist >= row.waist_min && waist <= row.waist_max) {
            return { sizeRu: row.size_ru, sizeEu: row.size_eu };
        }
    }
    return null; // нет подходящего размера
}

Форма советника — три поля ввода (грудь, талия, бёдра) + кнопка «Подобрать размер». Результат — выделение рекомендованной строки в таблице и автовыбор соответствующего торгового предложения.

Управление таблицами в админке

Для контент-менеджеров нужен удобный интерфейс управления таблицами размеров без прямого редактирования БД. Реализуется через кастомный раздел в /bitrix/admin/:

/bitrix/admin/size_charts.php       — список таблиц
/bitrix/admin/size_chart_edit.php   — редактирование таблицы и строк

Или через инфоблок с нестандартной структурой — если хочется использовать стандартный интерфейс Битрикс, но это менее гибко для табличных данных.

Мобильная версия

На мобильном устройстве таблица с 6–8 колонками не помещается. Решения:

• Горизонтальная прокрутка таблицы с overflow-x: auto — минимальное усилие
• Карточный формат — каждый размер как отдельная карточка с ключевыми параметрами
• Сворачиваемые строки — показывать только столбцы RU/EU, остальные по клику «Подробнее»

Сроки

Таблица размеров — это не контентный блок, а конверсионный инструмент. Правильно реализованная, она окупается через снижение возвратов уже в первый месяц после запуска.