/* Nagelfabriek - kleurstalen bij Rubber Base Starterspakket Kies je Kleur (SRBKJK)
Kopie van kleurstalen-biab.js voor de Rubber Base-pagina: boven elke kleurkeuze ("Kleur Rubber Base"
en de extra kleuren) een raster met de productfoto's om op te klikken. Een klik kiest de kleur in de
gewone keuzelijst; die blijft gewoon staan en werken. Doet alleen iets op deze ene productpagina.
Zie projecten/website/README.md. */
(function () {
var PAGINA = 'product-rubber-base-starterspakket-kies-je-kleur'; // body-class van de productpagina
var VAST = 208; // option_id van het vaste blok "Starterspakket", wordt verborgen
var FOTO_KLEIN = '/media/catalog/product/cache/eda4da6cff838cbc5a6c2bfcb1b1b2f6'; // verkleinde versie van het thema
var FOTO_GROOT = '/media/catalog/product'; // origineel, als de verkleinde er niet is
// [familie] als kopje, daarna per keuze: [productnaam in Magento, korte naam, kleur, soort, productfoto]
// soort: 0 = kleur, 1 = shimmer of glitter, 2 = set (de kleur wordt nu niet gebruikt: elk vakje toont de productfoto)
var K = [
["Kleuren"],
["Rubber Base Pro White", "White", "", 0, "/r/u/rubber_base_white.jpg"],
["Rubber Base Pro Milky Pink", "Milky Pink", "", 0, "/r/u/rubber_base_milky_pink.jpg"],
["Rubber Base Pro Baby Pink", "Baby Pink", "", 0, "/r/u/rubber_base_baby_pink.jpg"],
["Rubber Base Pro Rosy", "Rosy", "", 0, "/r/u/rubber_base_rosy.jpg"],
["Rubber Base Pro Rose", "Rose", "", 0, "/r/u/rubber_base_rose.jpg"],
["Rubber Base Pro Dreamy", "Dreamy", "", 0, "/r/u/rubber_base_dreamy.jpg"],
["Shimmer"],
["Rubber Base Pro Shimmer Blush", "Shimmer Blush", "", 1, "/r/u/rubber_base_shimmer_blush.jpg"],
["Rubber Base Pro Shimmer Glow", "Shimmer Glow", "", 1, "/r/u/rubber_base_shimmer_glow.jpg"]
];
function stijl() {
if (document.getElementById('nf-stalen-rb-stijl')) return;
var s = document.createElement('style');
s.id = 'nf-stalen-rb-stijl';
s.textContent = [
'.nf-stalen{margin:.25rem 0 .75rem}',
'.nf-stalen-kop{display:flex;justify-content:space-between;align-items:center;gap:.75rem;font-size:.875rem;color:#4B5563;margin-bottom:.4rem}',
'.nf-stalen-kop strong{display:block;color:#1A1A1A;font-weight:600;font-size:1rem;line-height:1.3}',
'.nf-stalen-kop small{display:block;font-size:.8rem;color:#6B7280;line-height:1.3}',
'.nf-stalen-keuze{display:flex;align-items:center;gap:.75rem}',
'.nf-stalen-foto{width:72px;height:72px;flex:none;border-radius:10px;background:#fff;border:1px solid #EFE4E2;object-fit:contain}',
'.nf-stalen-foto[hidden]{display:none}',
'.nf-stalen-geen{flex:none;font-size:.8rem;color:#96605F;background:#fff;border:1px solid #EFE4E2;border-radius:999px;padding:.3rem .75rem;cursor:pointer}',
'.nf-stalen-geen:hover{background:#F5E9E9}',
'.nf-stalen-geen[hidden]{display:none}',
'.nf-stalen-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(66px,1fr));gap:4px;max-height:312px;overflow-y:auto;',
'padding:6px;border:1px solid #EFE4E2;border-radius:10px;background:#F9F4F2;overscroll-behavior:contain}',
'.nf-stalen-fam{grid-column:1/-1;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:#96605F;font-weight:600;padding:8px 4px 2px}',
'.nf-stalen-fam:first-child{padding-top:2px}',
'.nf-staal{height:68px;min-width:66px;border:0;background:none;padding:0;margin:0;display:flex;align-items:center;justify-content:center;border-radius:10px;cursor:pointer}',
'.nf-staal:hover{background:#F5E9E9}',
'.nf-staal img{width:60px;height:60px;object-fit:contain;border-radius:8px;background:#fff}',
'.nf-staal[aria-pressed="true"]{background:#fff;box-shadow:0 0 0 2px #96605F}',
'.nf-staal:focus-visible{outline:2px solid #96605F;outline-offset:1px}',
// alleen op deze productpagina: het vaste blok "Starterspakket" en de vaste aantallen (altijd 1) verbergen
'.' + PAGINA + ' .fieldset-bundle-options>div:has(#option-label-' + VAST + '){display:none}',
'.' + PAGINA + ' .fieldset-bundle-options .qty-holder{display:none}',
// staffelprijzen van de losse kleur ("Koop 2/3/5 voor ...") gelden niet in het pakket: verbergen
'.' + PAGINA + ' .selection-tier-prices{display:none!important}'
].join('');
document.head.appendChild(s);
}
function schoon(tekst) {
return tekst.split('+')[0].replace(/\s+/g, ' ').trim();
}
function bouw(select, titel) {
if (select.dataset.nfStalen) return;
select.dataset.nfStalen = '1';
var optioneel = !select.required;
var wrap = document.createElement('div');
wrap.className = 'nf-stalen';
var kop = document.createElement('div');
kop.className = 'nf-stalen-kop';
var keuze = document.createElement('div');
keuze.className = 'nf-stalen-keuze';
var foto = document.createElement('img');
foto.className = 'nf-stalen-foto';
foto.width = 72;
foto.height = 72;
foto.hidden = true;
foto.addEventListener('error', function () {
// verkleinde versie niet gevonden: val terug op het origineel
if (foto.dataset.bestand && foto.src.indexOf('/cache/') > -1) foto.src = FOTO_GROOT + foto.dataset.bestand;
});
var gekozen = document.createElement('span');
keuze.appendChild(foto);
keuze.appendChild(gekozen);
var hint = document.createElement('small');
kop.appendChild(keuze);
var geen = document.createElement('button');
geen.type = 'button';
geen.className = 'nf-stalen-geen';
geen.textContent = 'Geen extra kleur';
geen.hidden = true;
geen.addEventListener('click', function () {
select.value = '';
select.dispatchEvent(new Event('change', { bubbles: true }));
});
if (optioneel) kop.appendChild(geen);
var raster = document.createElement('div');
raster.className = 'nf-stalen-raster';
raster.setAttribute('role', 'group');
raster.setAttribute('aria-label', titel + ': kies een kleur');
// per productnaam de keuze in deze lijst; "+ 0,00" achter de naam weghalen, een echte meerprijs blijft staan
var perNaam = {};
Array.prototype.forEach.call(select.options, function (o) {
if (!o.value) return;
perNaam[schoon(o.text)] = o;
// "+ 0,00" weg; bij een meerprijs alleen het eerste bedrag (incl. btw) houden, niet ook het bedrag excl. btw
var prijs = (o.text.split('+')[1] || '').match(/\d+,\d\d/);
o.text = schoon(o.text) + (prijs && prijs[0] !== '0,00' ? ' + \u20ac ' + prijs[0] : '');
});
var knoppen = {};
var kleuren = 0;
var sets = 0;
K.forEach(function (k) {
if (k.length === 1) {
if (raster.lastChild && raster.lastChild.className === 'nf-stalen-fam') raster.removeChild(raster.lastChild);
var fam = document.createElement('div');
fam.className = 'nf-stalen-fam';
fam.textContent = k[0];
raster.appendChild(fam);
return;
}
var optie = perNaam[k[0]];
if (!optie || optie.disabled) return; // niet in deze lijst, of niet op voorraad
var id = optie.value;
var b = document.createElement('button');
b.type = 'button';
b.className = 'nf-staal';
b.title = k[1];
b.setAttribute('aria-label', k[1]);
b.setAttribute('aria-pressed', 'false');
var mini = document.createElement('img');
mini.src = FOTO_KLEIN + k[4];
mini.alt = '';
mini.loading = 'lazy';
mini.addEventListener('error', function () {
if (mini.src.indexOf('/cache/') > -1) mini.src = FOTO_GROOT + k[4];
});
b.appendChild(mini);
if (k[3] === 2) sets++;
else kleuren++;
b.addEventListener('click', function () {
// bij een extra kleur haalt een tweede klik de keuze weer weg
select.value = (optioneel && select.value === id) ? '' : id;
select.dispatchEvent(new Event('change', { bubbles: true }));
});
knoppen[id] = { knop: b, naam: k[1], foto: k[4], set: k[3] === 2 };
raster.appendChild(b);
});
function toon() {
var nu = knoppen[select.value];
Object.keys(knoppen).forEach(function (id) {
knoppen[id].knop.setAttribute('aria-pressed', id === select.value ? 'true' : 'false');
});
gekozen.innerHTML = '';
var label = document.createElement('small');
label.textContent = nu ? 'Jouw keuze' : titel;
var naam = document.createElement('strong');
naam.textContent = nu ? nu.naam : (optioneel ? 'Tik op een kleur, of sla over' : 'Tik op een kleur');
gekozen.appendChild(label);
gekozen.appendChild(naam);
gekozen.appendChild(hint);
geen.hidden = !nu;
if (nu && nu.foto) {
if (foto.dataset.bestand !== nu.foto) {
foto.dataset.bestand = nu.foto;
foto.src = FOTO_KLEIN + nu.foto;
}
foto.alt = (nu.set ? '' : 'Rubber Base ') + nu.naam;
foto.hidden = false;
} else {
foto.hidden = true;
}
}
if (raster.lastChild && raster.lastChild.className === 'nf-stalen-fam') raster.removeChild(raster.lastChild);
if (!kleuren && !sets) return; // geen enkele bekende keuze in deze lijst: niets tonen
hint.textContent = 'uit ' + kleuren + ' kleuren' + (sets ? ' en ' + sets + ' sets' : '');
select.addEventListener('change', toon);
toon();
wrap.appendChild(kop);
wrap.appendChild(raster);
select.parentNode.insertBefore(wrap, select);
var actief = raster.querySelector('[aria-pressed="true"]');
if (actief) raster.scrollTop = Math.max(0, actief.offsetTop - raster.offsetTop - 34); // ruimte voor het familiekopje
}
function init() {
if (!document.body || !document.body.classList.contains(PAGINA)) return;
var lijsten = document.querySelectorAll('select[id^="bundle-option-"]');
Array.prototype.forEach.call(lijsten, function (select) {
var optie = select.id.replace('bundle-option-', '');
if (optie === String(VAST)) return;
var label = document.getElementById('option-label-' + optie);
stijl();
bouw(select, label ? label.textContent.replace(/\s+/g, ' ').trim() : 'Kleur');
});
}
if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init);
else init();
})();
