Development of a size converter (RU/EU/US/UK) on 1C-Bitrix

Developing a Size Converter (RU/EU/US/UK) for 1C-Bitrix

A size converter is an interactive tool that lets a buyer enter a known size (e.g. US 8 or EU 42) and instantly receive the equivalent in other systems. Unlike a static chart, the converter solves a specific user problem: "I know my American size — tell me my Russian one." These are different tools with different usage scenarios, even though both draw data from the same source.

Converter Usage Scenarios

Scenario 1: Converter on a catalogue or category page. The user has not yet chosen a product and wants to understand the size grid. A dedicated /size/ page or a sidebar block.

Scenario 2: Converter in a modal window on a product card. Right when selecting a size — most convenient, keeps the user on the page.

Scenario 3: Inline converter next to trade offer selection. A compact widget "Don't know your size? Enter US/EU:" next to the TO buttons.

Storing Converter Data

Conversion data is taken from the same tables used for the size chart. Importantly, the converter works in both directions: from any system to any other. The data structure must support this — all systems are stored in a single row:

-- The same table as for the size chart
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;

Conversion is a matter of finding a row by a value in one column and returning values from other columns. No complex mathematics is needed — only correct data in the database.

Converter Implementation: Client-Side Logic

For UX, the converter must work instantly, without network requests. Data is loaded once on page initialisation (or when the modal opens) and then processed in JS:

// Data is injected from PHP into JSON on page load
const sizeData = <?= json_encode($arResult['SIZES'], JSON_UNESCAPED_UNICODE) ?>;

// Structure: [{size_ru: 40, size_eu: 40, size_us_m: 7, size_us_w: 8.5, size_uk: 6, ...}]

function convertSize(fromSystem, value, toSystem) {
    // Convert to number for exact comparison
    const numValue = parseFloat(value);

    // Find the row where the value in the source system matches
    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}`];
}

Converter form:

<div class="size-converter">
    <select id="from-system">
        <option value="ru">RU</option>
        <option value="eu">EU</option>
        <option value="us_m">US (men's)</option>
        <option value="us_w">US (women's)</option>
        <option value="uk">UK</option>
    </select>
    <input type="text" id="size-input" placeholder="40">
    <button onclick="doConvert()">Convert</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"><!-- filled by JS --></tr>
        </table>
    </div>
</div>

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

    // Show the full conversion row
    const row = sizeData.find(r => String(r[`size_${from}`]) === value);
    if (!row) {
        document.getElementById('conversion-result').hidden = true;
        alert('Size not found. Please check the entered value.');
        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;
}

Input Autocomplete

As the user types in the converter field, suggestions with available values appear — this prevents entry of non-existent sizes:

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);
});

Converter for Clothing vs. Footwear

Converters for clothing and footwear are separate components with different data sets. The key difference:

• Clothing: RU/EU/US/UK systems plus letter designations (XS/S/M/L/XL/XXL). Letter sizes are not numbers; they cannot be converted by formula — only by lookup table.
• Footwear: numeric sizes plus foot length as the linking parameter.

The clothing converter additionally needs to handle the question "which letter size corresponds to RU 46":

// For clothing — a separate data set with letter designations
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'  },
    // ...
];

Integration with the Catalogue Filter

An advanced use case: the converter integrates with the Bitrix smart filter. The user enters US 8, the converter translates it to RU 40–41, and the filter automatically sets "Size: 40, 40.5, 41" and shows only matching products.

function applyToFilter(sizeRu) {
    // Activate the filter value
    const filterCheckboxes = document.querySelectorAll(`[data-filter-size="${sizeRu}"]`);
    filterCheckboxes.forEach(cb => {
        cb.checked = true;
        cb.dispatchEvent(new Event('change'));
    });
}

This requires modifying the smart filter template and adding data attributes to the size checkboxes.

SEO for the Converter

A dedicated converter page can attract traffic for queries like "shoe size converter", "convert US size to Russian". For this, the page must:

• Have a semantic title and description
• Contain a static size chart (which search engines index, unlike dynamically JS-generated content)
• Include Table structured data in Schema.org

Timelines

A size converter is one of the quickest return-reduction tools to develop. Small development scope, direct measurable effect.