/* Håll allt namespacat med ‘lynx-‘ så du inte krockar med temat */
#lynx-configurator-widget {
padding: 16px;
border: 1px solid #ddd;
border-radius: 6px;
background: #f9f9f9;
max-width: 400px;
font-size: 14px;
}
#lynx-configurator-widget .lynx-title {
margin-top: 0;
margin-bottom: 12px;
font-size: 18px;
}
#lynx-configurator-widget .lynx-row {
margin-bottom: 10px;
}
#lynx-configurator-widget select,
#lynx-configurator-widget input[type=”checkbox”] {
margin-top: 4px;
}
#lynx-configurator-widget .lynx-summary {
margin: 12px 0;
font-weight: bold;
}
#lynx-configurator-widget .lynx-btn {
display: inline-block;
padding: 8px 14px;
border: none;
border-radius: 4px;
cursor: pointer;
background: #222;
color: #fff;
font-size: 14px;
}
#lynx-configurator-widget .lynx-btn:hover {
opacity: 0.9;
}
(function () {
function calculatePrice() {
var modelSelect = document.getElementById(‘lynx-model’);
var upholsterySelect = document.getElementById(‘lynx-upholstery’);
var armrestCheckbox = document.getElementById(‘lynx-armrest’);
var priceSpan = document.getElementById(‘lynx-price’);
if (!modelSelect || !upholsterySelect || !priceSpan) return;
var modelPrice = Number(modelSelect.options[modelSelect.selectedIndex].dataset.price || 0);
var upholsteryExtra = Number(upholsterySelect.options[upholsterySelect.selectedIndex].dataset.extra || 0);
var armrestExtra = armrestCheckbox && armrestCheckbox.checked
? Number(armrestCheckbox.dataset.extra || 0)
: 0;
var total = modelPrice + upholsteryExtra + armrestExtra;
// Enkelt svenskt format
priceSpan.textContent = total.toLocaleString(‘sv-SE’) + ‘ kr’;
}
function init() {
var modelSelect = document.getElementById(‘lynx-model’);
var upholsterySelect = document.getElementById(‘lynx-upholstery’);
var armrestCheckbox = document.getElementById(‘lynx-armrest’);
var addToCartBtn = document.getElementById(‘lynx-add-to-cart’);
if (modelSelect) modelSelect.addEventListener(‘change’, calculatePrice);
if (upholsterySelect) upholsterySelect.addEventListener(‘change’, calculatePrice);
if (armrestCheckbox) armrestCheckbox.addEventListener(‘change’, calculatePrice);
if (addToCartBtn) {
addToCartBtn.addEventListener(‘click’, function () {
// Här MÅSTE du koppla mot riktig varukorg / backend om du vill ha funktion
alert(‘Här ska din riktiga varukorgslogik in (API-anrop, redirect, etc).’);
});
}
calculatePrice();
}
// Säkerställ att DOM finns
if (document.readyState === ‘loading’) {
document.addEventListener(‘DOMContentLoaded’, init);
} else {
init();
}
})();
Produktkonfigurator
Välj alternativ nedan:
.custom-box {
padding: 20px;
border: 2px solid #ccc;
max-width: 600px;
}
.btn-add {
padding: 10px 16px;
border: none;
background: #333;
color: #fff;
cursor: pointer;
}
merctest 