Complex catalogs with dozens of properties and thousands of SKUs are a classic pain point for e-commerce sites on 1C-Bitrix. The standard bitrix:catalog.item component lacks the flexibility to build an interactive configurator where users select parameters, and the price and images update instantly. We are a team of engineers with over 10 years of experience with Bitrix and Vue. Over the years, we have implemented more than 40 configurators for manufacturers of furniture, windows, and computer hardware. After implementing a configurator, the average order value typically grows by 20–30%, and conversion to order by 15–25%.
Why Vue.js for the Configurator?
Unlike jQuery, which introduces delays of 200–300 ms, Vue.js reacts to option selection in 30–50 ms — a 6x difference. The user sees the new price and image without page reload. The component architecture simplifies maintenance: UI code is isolated from Bitrix templates.
How We Organize Data from Bitrix
The configurator works with trade offers — a subtype of b_iblock_element linked to the parent product via the CML2_LINK property. We retrieve all SKUs with their properties:
$offers = \CCatalogSKU::GetOffersList( [$productId], $offerIblockId, ['ACTIVE' => 'Y'], ['ID', 'PROPERTY_COLOR', 'PROPERTY_SIZE', 'CATALOG_PRICE_1', 'CATALOG_QUANTITY'] ); Pass them to Vue as window.__PRODUCT_CONFIG__:
{ offers: [ { id: 101, props: { color: 'red', size: 'M' }, price: 1500, quantity: 5 }, { id: 102, props: { color: 'red', size: 'L' }, price: 1500, quantity: 0 }, ], propertyDefs: { color: { name: 'Color', values: { red: { name: 'Red', hex: '#FF0000' } } }, size: { name: 'Size', values: { M: { name: 'M' }, L: { name: 'L' } } }, } } SKU Selection Logic
The core is a function that finds the SKU based on selected parameters:
const selectedProps = reactive({ color: null, size: null }); const matchedOffer = computed(() => { return offers.find(offer => Object.entries(selectedProps).every(([key, val]) => val === null || offer.props[key] === val ) ) ?? null; }); function getAvailableValues(propKey) { return offers .filter(offer => Object.entries(selectedProps) .filter(([k]) => k !== propKey) .every(([k, v]) => v === null || offer.props[k] === v) ) .map(offer => offer.props[propKey]); } Unavailable combinations (out of stock) are grayed out but not hidden: the user sees that the option exists. This builds trust and reduces returns.
Dynamic Image Updates
When selecting color or material, the main image changes. Images are attached to SKUs via a property of type "file":
const currentImages = computed(() => { if (matchedOffer.value) { return matchedOffer.value.images; } return defaultImages; }); Image transitions are handled via Vue's <transition> or CSS animations.
Configurator with Dependent Parameters
Selecting a model → available configurations → available options. Each level filters the next. Implemented via computed with cascading filtering of offers. For complex configurators (PC assembly, custom furniture) — hierarchical wizard, where each step loads valid options for the next step via AJAX.
How to Solve the Issue of Loading Thousands of SKUs?
The key technique is lazy loading. We load only the available options for the current step. In a project for a window manufacturer with several thousand SKUs, we reduced the initial request size from 800 KB to 15 KB — a 5x speed improvement. Additionally, we use Bitrix's tagged caching: price and stock data are cached with infoblock bindings and cleared on changes.
What a Configurator Delivers: Case Studies from Our Practice
Window manufacturer (our client): configurator with 6 parameters, several thousand SKUs. Initially all data loaded on page open (800 KB JSON). Solution — lazy loading: at each wizard step, we request only the valid values for the next parameter with current prices from the server. Initial request size dropped to 15 KB, load speed increased 5x. Investment paid off in 4 months due to a 30% increase in average order value — additional revenue from options reached 1.2 million RUB in the first month. Savings from returns — 400 thousand RUB.
Computer hardware manufacturer: server configurator with 12 parameters. Page loaded in 8 seconds. After implementing lazy loading and caching — 1.2 seconds. Conversion to order increased by 25%. Average order value rose by 18,000 RUB.
Comparison: jQuery vs Vue.js
| Criterion | jQuery solution | Vue.js solution |
|---|---|---|
| Response speed | ~300 ms | ~50 ms (6x faster) |
| Code maintainability | Complex, spaghetti | Modular, component-based |
| Scalability | Low | High, easy to add new parameters |
| Integration with Bitrix | Via events and append | Via props and computed, no DOM conflicts |
What's Included in the Work
- Analysis of current catalog structure and properties in Bitrix
- Data schema design for Vue
- Development of configurator components in Vue.js
- Integration with Bitrix (fetching SKUs, prices, images)
- Configuration of tagged caching
- API and data structure documentation
- Employee training on using the configurator
- 3 months of technical support
Timelines and Cost
| Option | Timeline |
|---|---|
| Basic configurator (color, size) | from 4 to 7 business days |
| With dependent parameters and dynamic images | from 8 to 12 business days |
| Complex wizard with real-time cost calculation | from 15 to 25 business days |
Over 10 years on the market, 40+ completed projects, certified Bitrix specialists. Code undergoes review and testing. Get a consultation — we'll discuss your project details. Contact us to discuss your project and prepare a commercial proposal.