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

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

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

Сценарии использования конвертера

Сценарий 1: Конвертер на странице каталога или категории. Пользователь ещё не выбрал товар, хочет разобраться с размерной сеткой. Отдельная страница /razmer/ или блок в сайдбаре.

Сценарий 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

Сроки

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