Developing a shoe size chart using 1C-Bitrix

Developing a Shoe Size Chart for 1C-Bitrix

A shoe size chart is more complex than a clothing one: shoe sizes have three incompatible systems (Russian/European, American men's/women's, British), plus foot length in centimetres as a universal measure. Different manufacturers use different lasts, and the formal conversion "RU 40 = EU 40" is not always correct for a specific brand. This must be accounted for in the architecture.

Differences Between a Shoe Chart and a Clothing Chart

Footwear has one key parameter — foot length in centimetres. Everything else (RU, EU, US M/W, UK) is a notation system that converts from foot length using standard formulas, but with brand-specific adjustments.

Additional complexities:

• Gender differences: US 8 men's ≠ US 8 women's (difference of ~1.5 EU sizes)
• Children's footwear is a separate scale (EU 17–35)
• Some brands (Converse, Vans) have their own conversion nuances
• Shoe width (B, D, EE) — rare, but found in specialist shops

DB Structure for a Shoe Size Chart

CREATE TABLE b_shoe_size_charts (
    ID          SERIAL PRIMARY KEY,
    NAME        VARCHAR(255) NOT NULL,   -- "Nike men's", "Adidas kids"
    BRAND_ID    INT,
    GENDER      VARCHAR(10),             -- 'male', 'female', 'kids', 'unisex'
    AGE_GROUP   VARCHAR(20),             -- 'adult', 'kids', 'baby'
    ACTIVE      BOOLEAN DEFAULT TRUE
);

CREATE TABLE b_shoe_size_rows (
    ID             SERIAL PRIMARY KEY,
    CHART_ID       INT NOT NULL REFERENCES b_shoe_size_charts(ID),
    FOOT_LENGTH_MM INT NOT NULL,    -- foot length in mm (primary measure)
    SIZE_RU        NUMERIC(4,1),    -- Russian size
    SIZE_EU        NUMERIC(4,1),    -- European size
    SIZE_US_M      NUMERIC(4,1),    -- US men's
    SIZE_US_W      NUMERIC(4,1),    -- US women's
    SIZE_UK        NUMERIC(4,1),    -- British
    SIZE_CM        NUMERIC(4,1),    -- Japanese/Korean (in cm)
    SORT           INT DEFAULT 100
);

Foot length in millimetres — not centimetres — as the base measure, because shoe standards work with 5 mm precision.

Shoe Size Chart Component

The component is similar to the clothing one, but with display-specific features.

Gender selector — if the chart is "unisex", a toggle is needed to show US M or US W:

<div class="size-gender-tabs">
    <button class="active" data-gender="male">Men's (US M)</button>
    <button data-gender="female">Women's (US W)</button>
</div>

document.querySelectorAll('.size-gender-tabs button').forEach(btn => {
    btn.addEventListener('click', function() {
        const gender = this.dataset.gender;
        document.querySelectorAll('.col-us-m').forEach(el => el.hidden = gender !== 'male');
        document.querySelectorAll('.col-us-w').forEach(el => el.hidden = gender !== 'female');
    });
});

Table columns for adult men's footwear:

Half-sizes (39.5, 40.5) must be in the chart — many manufacturers use them.

Interactive Lookup by Foot Length

The key difference with footwear: the buyer knows their foot length (or can measure it), but does not always know the size in different systems. Interactive form:

<div class="shoe-size-finder">
    <label>Enter foot length (mm or cm):</label>
    <input type="number" id="foot-length" placeholder="255" min="150" max="340">
    <select id="length-unit">
        <option value="mm">mm</option>
        <option value="cm">cm</option>
    </select>
    <button onclick="findShoeSize()">Find my size</button>
</div>

function findShoeSize() {
    let length = parseInt(document.getElementById('foot-length').value);
    const unit = document.getElementById('length-unit').value;
    if (unit === 'cm') length = Math.round(length * 10);

    // Find the nearest size (foot fits in size + up to 5 mm allowance)
    const sizes = window.shoeSizeData;
    const match = sizes.find(s => length <= s.foot_length_mm + 5 && length > s.foot_length_mm - 5);

    if (match) {
        highlightRow(match.id);
        showResult(`Your size: RU ${match.size_ru} / EU ${match.size_eu}`);
    } else {
        showResult('Size not found in the chart. Please consult a sales assistant.');
    }
}

Foot Measurement Guide

A text guide plus an SVG illustration in a modal window. Standard instructions: stand on a piece of paper, trace the foot outline, measure from heel to the longest toe. This reduces errors when customers measure themselves.

The illustration is made as SVG — not PNG — because SVG scales without quality loss and weighs 3–5 KB versus 30–50 KB for a comparable PNG.

Integration with Trade Offer Selection

In footwear, trade offers (TOs) are sizes. Each TO has a SHOE_SIZE property with a value such as "40", "40.5", "41". This value is matched against chart rows by SIZE_RU or SIZE_EU.

On page load:

1. If no TO is selected — the full chart is displayed
2. When a size (TO) is selected — the corresponding row is highlighted
3. When a chart row is clicked — the corresponding TO is automatically selected

// Click on a chart row
document.querySelectorAll('.size-chart tr[data-size-ru]').forEach(row => {
    row.addEventListener('click', function() {
        const sizeRu = this.dataset.sizeRu;
        // Find and activate the TO button for this size
        const offerBtn = document.querySelector(`[data-size="${sizeRu}"]`);
        if (offerBtn && !offerBtn.disabled) offerBtn.click();
    });
});

Children's Shoe Size Grid

Children's footwear requires a separate chart. EU sizes for children start at 16–17 (newborns) and go up to 35–36 (transitional sizes). Foot length is the key parameter, because a child's foot grows quickly and the correct allowance is essential.

An additional parameter for the children's chart: recommended age (approximate, not a strict rule):

Timelines

A shoe size chart is an investment in reducing returns. In the fashion segment, returning one pair of shoes costs more than creating the chart: courier expenses, repackaging, loss of resale condition. The project pays off within 1–2 months of store operation.