Розробка конвертера розмірів (RU/EU/US/UK) на 1С-Бітрікс

Розробка конвертера розмірів (RU/EU/US/UK) на 1С-Бітрікс

Конвертер розмірів — це інтерактивний інструмент, який дозволяє покупцю ввести відомий йому розмір (наприклад, US 8 або EU 42) і миттєво отримати еквівалент в інших системах. На відміну від статичної таблиці, конвертер вирішує конкретне завдання користувача: «я знаю свій американський розмір, скажіть мені російський». Це різні інструменти з різними сценаріями використання, хоча дані для обох беруться з одного джерела.

Сценарії використання конвертера

Сценарій 1: Конвертер на сторінці каталогу або категорії. Користувач ще не вибрав товар, хоче розібратися з розмірною сіткою. Окрема сторінка /rozmir/ або блок у сайдбарі.

Сценарій 2: Конвертер у модальному вікні на картці товару. Прямо при виборі розміру — зручніше за все, не відводить зі сторінки.

Сценарій 3: Inline-конвертер поруч із вибором торгових пропозицій. Компактний віджет «Не знаєте свій розмір? Введіть US/EU:» поруч з кнопками ТП.

Зберігання даних конвертера

Дані конвертації беруться з тих самих таблиць, що й для таблиці розмірів. Важливо, що конвертер працює в обидва боки: з будь-якої системи в будь-яку. Тому структура даних повинна це підтримувати — всі системи зберігаються в одному рядку:

-- Та сама таблиця, що для таблиці розмірів
SELECT size_ru, size_eu, size_us_m, size_us_w, size_uk, foot_length_mm
FROM b_shoe_size_rows
WHERE chart_id = ?
ORDER BY foot_length_mm ASC;

Конвертація — це пошук рядка за значенням в одній колонці та повернення значень з інших колонок. Ніякої складної математики не потрібно, потрібні лише правильні дані в базі.

Реалізація конвертера: клієнтська логіка

Для UX конвертер повинен працювати миттєво, без мережевих запитів. Дані завантажуються один раз при ініціалізації сторінки (або при відкритті модального вікна) і потім обробляються на JS:

// Дані передаються з PHP в JSON при завантаженні сторінки
const sizeData = <?= json_encode($arResult['SIZES'], JSON_UNESCAPED_UNICODE) ?>;

// Структура: [{size_ru: 40, size_eu: 40, size_us_m: 7, size_us_w: 8.5, size_uk: 6, ...}]

function convertSize(fromSystem, value, toSystem) {
    // Приводимо до числа для точного порівняння
    const numValue = parseFloat(value);

    // Шукаємо рядок, де значення у вихідній системі збігається
    const row = sizeData.find(r => {
        const fieldName = `size_${fromSystem}`; // 'size_ru', 'size_eu', etc.
        return parseFloat(r[fieldName]) === numValue;
    });

    if (!row) return null;
    return row[`size_${toSystem}`];
}

Форма конвертера:

<div class="size-converter">
    <select id="from-system">
        <option value="ru">RU</option>
        <option value="eu">EU</option>
        <option value="us_m">US (чол.)</option>
        <option value="us_w">US (жін.)</option>
        <option value="uk">UK</option>
    </select>
    <input type="text" id="size-input" placeholder="40">
    <button onclick="doConvert()">Конвертувати</button>

    <div id="conversion-result" hidden>
        <table class="result-table">
            <tr><th>RU</th><th>EU</th><th>US M</th><th>US W</th><th>UK</th></tr>
            <tr id="result-row"><!-- заповнюється JS --></tr>
        </table>
    </div>
</div>

function doConvert() {
    const from  = document.getElementById('from-system').value;
    const value = document.getElementById('size-input').value.trim().replace(',', '.');

    // Показуємо весь рядок конвертації
    const row = sizeData.find(r => String(r[`size_${from}`]) === value);
    if (!row) {
        document.getElementById('conversion-result').hidden = true;
        alert('Розмір не знайдено. Перевірте введене значення.');
        return;
    }

    document.getElementById('result-row').innerHTML = `
        <td>${row.size_ru}</td>
        <td>${row.size_eu}</td>
        <td>${row.size_us_m}</td>
        <td>${row.size_us_w}</td>
        <td>${row.size_uk}</td>
    `;
    document.getElementById('conversion-result').hidden = false;
}

Автодоповнення вводу

При введенні в поле конвертера з'являються підказки з доступними значеннями — це запобігає введенню неіснуючих розмірів:

const input = document.getElementById('size-input');
input.addEventListener('input', function() {
    const from = document.getElementById('from-system').value;
    const query = this.value;
    const suggestions = sizeData
        .map(r => String(r[`size_${from}`]))
        .filter(v => v.startsWith(query));
    renderSuggestions(suggestions);
});

Конвертер для одягу vs. взуття

Конвертери для одягу та взуття — різні компоненти з різними наборами даних. Ключова відмінність:

• Одяг: системи RU/EU/US/UK плюс літерні позначення (XS/S/M/L/XL/XXL). Літерні — не числа, їх не можна конвертувати за формулою, тільки за таблицею.
• Взуття: числові розміри плюс довжина стопи як зв'язуючий параметр.

Конвертер одягу додатково повинен обробляти питання «який літерний розмір відповідає RU 46»:

// Для одягу — окремий набір даних з літерними позначеннями
const clothingData = [
    { size_ru: 42, size_eu: 36, size_us: 6, size_uk: 10, label: 'XS' },
    { size_ru: 44, size_eu: 38, size_us: 8, size_uk: 12, label: 'S'  },
    // ...
];

Інтеграція з фільтром каталогу

Розширений кейс: конвертер інтегрується з розумним фільтром Бітрікс. Користувач вводить свій US 8, конвертер переводить у RU 40–41, фільтр автоматично встановлює значення «Розмір: 40, 40.5, 41» і показує лише відповідні товари.

function applyToFilter(sizeRu) {
    // Активуємо значення фільтра
    const filterCheckboxes = document.querySelectorAll(`[data-filter-size="${sizeRu}"]`);
    filterCheckboxes.forEach(cb => {
        cb.checked = true;
        cb.dispatchEvent(new Event('change'));
    });
}

Це вимагає доопрацювання шаблону розумного фільтра і додавання data-атрибутів до чекбоксів розмірів.

SEO конвертера

Окрема сторінка конвертера може залучати трафік за запитами «конвертер розмірів взуття», «перевести US розмір в український». Для цього сторінка повинна:

• Мати семантичну назву та опис
• Містити статичну таблицю розмірів (яку індексують пошуковики, на відміну від динамічно згенерованої через JS)
• Мати структуровані дані Table в Schema.org

Строки

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