Szkic konfiguratora — Diego Standard V2
Roleta plisowana Diego Standard
Lokalny podgląd układu – bez publikacji.
Skonfiguruj swoją plisę
Najpierw podaj wymiary i wybierz wykończenie. Następnie wybierz kolekcję oraz kolor tkaniny.
01 / Wymiary
02 / Kolor profilu
03 / Rodzaj mocowania
04 / Kolekcja tkanin
const base='https://roleto.pl/wp-content/uploads/2026/09/';const P={bialy:['Biały','Profil-Veloline-Kolor-Bialy-300x150.webp'],anoda:['Anoda','Profil-Veloline-kolor-ANODA-300x150.webp'],brazowy:['Brązowy','Profil-Veloline-Kolor-Brazowy-300x150.webp'],antracyt:['Antracyt','Profil-Veloline-Kolor-Antracyt-300x150.webp']};const M={inwazyjny:['Inwazyjny',{bialy:'Uchwyt-Inwazyjny-bialy-300x300.webp',anoda:'Uchwyt-Inwazyjny-anoda-300x300.webp',brazowy:'Uchwyt-Inwazyjny-braz-300x300.webp',antracyt:'Uchwyt-Inwazyjny-antracyt-300x300.webp'}],bezinwazyjny:['Bezinwazyjny +29,99 zł brutto',{anoda:'Uchwyt-metalowy-bezinwazyjny-BF-4-anoda-300x300.webp',brazowy:'Uchwyt-metalowy-bezinwazyjny-BF-5-braz-300x300.webp',antracyt:'Uchwyt-metalowy-bezinwazyjny-BF-14-antracyt-300x300.webp'}]};const F=[['510','Stalowy Błękit'],['554','Ciemny Beż'],['555','Piaskowy Beż'],['558','Jasny Szary'],['668','Kremowy Beż'],['669','Stalowy Szary'],['670','Orzechowy Brąz'],['671','Grafitowa Szarość'],['672','Srebrny Szary'],['673','Niebieski Kobalt'],['753','Głęboka Czerń'],['2810','Naturalny Beż'],['5300','Pastelowy Błękit'],['5306','Ciemny Szary'],['5311','Jasny Róż'],['0002','Biel Perłowa'],['0522','Kamienna Szarość'],['0526','Aluminiowa Szarość'],['0800','Czysta Biel']];let S={p:'bialy',m:'inwazyjny',f:F[0],v:'ready'};const el=x=>document.querySelector(x),money=n=>n.toLocaleString('pl-PL',{minimumFractionDigits:2,maximumFractionDigits:2})+' zł',activate=(g,b)=>{g.querySelectorAll('.choice').forEach(x=>x.classList.remove('on'));b.classList.add('on')};function price(){const current=103.84+(S.m==='bezinwazyjny'?29.99:0),regular=current;el('#unit-price').textContent=money(current);el('#total-price').textContent=money(current);const promo=current'+v[0]+'';b.onclick=()=>{S.p=k;activate(el('#profiles'),b);mounts();view()};el('#profiles').append(b)});function mounts(){el('#mounts').innerHTML='';Object.entries(M).forEach(([k,v])=>{let src=v[1][S.p]||v[1].anoda,b=document.createElement('button');b.className='choice'+(k===S.m?' on':'');b.innerHTML='
'+v[0]+'';b.onclick=()=>{S.m=k;activate(el('#mounts'),b);price()};el('#mounts').append(b)});el('#mount-note').textContent=S.p==='bialy'?'Bezinwazyjny: do czasu dodania białego zdjęcia pokazany jest wariant anoda.':''}mounts();F.forEach(v=>{let b=document.createElement('button');b.className='choice'+(v===S.f?' on':'');b.innerHTML='
'+v[0]+''+v[1]+'';b.onclick=()=>{S.f=v;activate(el('#fabrics'),b);el('#fabric-name').textContent=v[0]+' · '+v[1];view()};el('#fabrics').append(b)});function view(){el('#label').textContent=S.f[0]+' · '+S.f[1]+' / profil '+P[S.p][0].toLowerCase();el('#empty').hidden=true;el('#main').hidden=false;if(S.v==='fabric'){el('#main').src=base+S.f[0]+'-Diego-probka-300x200.webp';el('#view-note').textContent='Zbliżenie wybranej tkaniny.'}else if(S.v==='arr'){el('#main').hidden=true;el('#empty').hidden=false;el('#view-note').textContent='Miejsca przygotowane pod przyszłe zdjęcia aranżacyjne.'}else{el('#main').src=base+'510-683x1024.webp';el('#view-note').textContent='Zdjęcie gotowej plisy może przedstawiać profil biały.'}}document.querySelectorAll('[data-v]').forEach(b=>b.onclick=()=>{S.v=b.dataset.v;document.querySelectorAll('.tab,.thumb').forEach(x=>x.classList.toggle('on',x.dataset.v===S.v));view()});const t=el('.fabric-toggle'),fb=el('.fabric-box');t.onclick=()=>{let o=t.getAttribute('aria-expanded')==='true';t.setAttribute('aria-expanded',String(!o));fb.hidden=o};price();view();
const dimensionInputs=document.querySelectorAll('.dims input');function floating(){el('#floating-price').textContent=el('#total-price').textContent;el('#floating-size').textContent=(dimensionInputs[0].value||'—')+' × '+(dimensionInputs[1].value||'—')+' mm';el('#floating-profile').textContent=P[S.p][0];el('#floating-fabric').textContent=S.f[0]+' · '+S.f[1];el('#floating-mount').textContent=M[S.m][0].replace(/ \+.*/,'')}dimensionInputs.forEach(input=>input.addEventListener('input',floating));document.addEventListener('click',e=>{if(e.target.closest('.choice'))requestAnimationFrame(floating)});floating();