Розробка таблиці розмірів одягу на 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, решту за кліком «Детальніше»

Терміни

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