class WardrobeConfigurator {
constructor(config) {
this.config = config;
this.selectedOptions = {};
this.quantities = {};
this.init();
}
init() {
this.renderAllOptions();
this.setupEventListeners();
this.calculatePrice();
}
renderAllOptions() {
this.renderOptions('facadeColor', 'facade-color-options');
this.renderOptions('bodyColor', 'body-color-options');
this.renderOptions('doorSystem', 'door-system-options');
this.renderOptions('interior', 'interior-options', true);
this.renderOptions('additionalOptions', 'additional-options');
this.renderOptions('services', 'services-options');
}
renderOptions(configKey, containerId, showQuantity = false) {
const config = this.config[configKey];
const container = document.getElementById(containerId);
container.innerHTML = '';
config.options.forEach(option => {
const optionElement = document.createElement('div');
optionElement.className = option-item ${option.inStock ? '' : 'out-of-stock'};
if (config.type === 'radio') {
const isChecked = option.id === config.default;
if (isChecked) {
this.selectedOptions[configKey] = option.id;
}
optionElement.innerHTML = `
${option.name}
${option.material ? (${option.material}) : ''}
${option.price > 0 ? +${this.formatPrice(option.price)} руб. : 'Включено в стоимость'}
${option.description ?
${option.description}
: ''}
`;
} else {
const isChecked = config.default.includes(option.id);
if (isChecked) {
this.selectedOptions[option.id] = true;
this.quantities[option.id] = option.quantity 1;
}
let quantityControls = '';
if (showQuantity && option.addable) {
quantityControls = `
-
${this.quantities[option.id] 1}
+
`;
}
optionElement.innerHTML = `
${option.name}
${option.price > 0 ? +${this.formatPrice(option.price)} руб. : 'Включено в стоимость'}
${option.description ?
${option.description}
: ''}
${quantityControls}
`;
}
container.appendChild(optionElement);
});
this.setupOptionListeners(configKey);
}
setupOptionListeners(configKey) {
const inputs = document.querySelectorAll(`input[name="${configKey}"]`);
inputs.forEach(input => {
input.addEventListener('change', (e) => {
if (this.config[configKey].type === 'radio') {
this.selectedOptions[configKey] = e.target.value;
} else {
if (e.target.checked) {
this.selectedOptions[e.target.value] = true;
} else {
delete this.selectedOptions[e.target.value];
}
}
this.calculatePrice();
});
});
}
setupEventListeners() {
// Слайдеры размеров
['width', 'height', 'depth'].forEach(dimension => {
const slider = document.getElementById(`${dimension}-slider`);
const valueSpan = document.getElementById(${dimension}-value);
slider.addEventListener('input', (e) => {
valueSpan.textContent = e.target.value;
this.config.dimensions[dimension].value = parseInt(e.target.value);
this.calculatePrice();
});
});
// Кнопка добавления в корзину
document.getElementById('add-to-cart').addEventListener('click', () => {
this.addToCart();
});
}
increaseQuantity(option