Cilt Tipi Testi

#ep-skin-quiz{max-width:760px;margin:24px auto;padding:0 10px}

#ep-skin-quiz .ep-card{background:#fff;border-radius:14px;box-shadow:0 6px 18px rgba(0,0,0,.06);padding:20px}

#ep-skin-quiz .ep-title{font-weight:800;font-size:22px;margin:0 0 10px}

#ep-skin-quiz .ep-sub{color:#666;margin:0 0 14px}

#ep-skin-quiz .ep-q{font-weight:700;font-size:20px;margin-bottom:12px}

#ep-skin-quiz .ep-opt{

display:block; text-align:left; padding:12px 14px; margin:8px 0; cursor:pointer;

border:1px solid rgba(0,0,0,.12); border-radius:12px; background:#fff;

font-weight:500; text-transform:none; /* uppercase kapalı */

}

#ep-skin-quiz .ep-opt { border-color:#ea4cb3; box-shadow:0 0 0 3px rgba(234,76,179,.12) }

#ep-skin-quiz .ep-steps{color:#666;font-size:12px;margin-top:10px}

#ep-skin-quiz .ep-actions{display:flex;gap:10px;justify-content:space-between;margin-top:14px}

#ep-skin-quiz .ep-btn{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:999px;background:#ea4cb3;color:#fff;border:0;font-weight:700;cursor:pointer}

#ep-skin-quiz .ep-btn:disabled{opacity:.5;cursor:not-allowed}

#ep-skin-quiz .ep-btn-secondary{background:#eef2f7;color:#111;font-weight:600}

#ep-skin-quiz .ep-li{border:1px solid rgba(0,0,0,.08);border-radius:12px;padding:12px;margin:8px 0}

#ep-skin-quiz .ep-grid{display:grid;grid-template-columns:1fr 110px;gap:10px;align-items:center}

#ep-skin-quiz .ep-name{font-weight:600}

#ep-skin-quiz .ep-step{font-weight:700}

@media (max-width:560px){ #ep-skin-quiz .ep-grid{grid-template-columns:1fr 96px} }

/* Skeleton & Loader */

.ep-skel{position:relative;overflow:hidden;background:#f1f3f5;border-radius:10px}

.ep-skel::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.6) 50%,rgba(255,255,255,0) 100%);transform:translateX(-100%);animation:epShimmer 1.4s infinite}

@keyframes epShimmer{100%{transform:translateX(100%)}}

.ep-row-skel{height:62px;margin:8px 0;border-radius:12px}

.ep-overlay{position:fixed;inset:0;background:rgba(0,0,0,.38);display:none;align-items:center;justify-content:center;z-index:99999}

.ep-spinner{width:56px;height:56px;border-radius:50%;border:6px solid #fff;border-top-color:transparent;animation:epSpin 0.9s linear infinite}

@keyframes epSpin{to{transform:rotate(360deg)}}

(function(){

const root = document.getElementById('ep-skin-quiz');

if(!root) return;

const CONFIG_URL = root.getAttribute('data-config');

const CART_URL = '/sepet/';

const USE_WC_AJAX = true;

const FALLBACK_SIMPLE_ADD = true;

const el = html => { const d=document.createElement('div'); d.innerHTML=html.trim(); return d.firstChild; };

async function loadJSON(url){ const r=await fetch(url,{credentials:'same-origin'}); if(!r.ok) throw 0; return r.json(); }

// product title by ID (cache)

const productCache = new Map();

async function fetchProductInfo(id){

if(productCache.has(id)) return productCache.get(id);

try{

const r = await fetch(`${location.origin}/wp-json/wp/v2/product/${id}`, {credentials:'same-origin'});

if(r.ok){

const j = await r.json();

const info = {title:(j?.title?.rendered||'').trim()||`Ürün #${id}`, link:j?.link||(`/?p=${id}`)};

productCache.set(id, info); return info;

}

}catch(e){}

try{

const r2 = await fetch(`/?p=${id}`, {credentials:'include'});

if(r2.ok){

const html = await r2.text();

const m = html.match(/(.*?)/i);

const t = m ? m .replace(/&.+?;/g,' ').trim() : `Ürün #${id}`;

const info = {title:t||`Ürün #${id}`, link:r2.url};

productCache.set(id, info); return info;

}

}catch(e){}

const info = {title:`Ürün #${id}`, link:`/?p=${id}`};

productCache.set(id, info); return info;

}

// overlay loader

const overlay = el(`

`);

document.body.appendChild(overlay);

const showOverlay = on => overlay.style.display = on ? 'flex' : 'none';

// utils

const parseIds = any => Array.isArray(any) ? any.map(x=>parseInt(x,10)).filter(Number.isFinite)

: String(any||'').split(/ +/).map(x=>parseInt(x,10)).filter(Number.isFinite);

// cart add

async function wcAjaxAdd(product_id, quantity){

const fd=new FormData();

fd.append('product_id', product_id);

fd.append('quantity', quantity||1);

const res=await fetch(`${location.origin}/?wc-ajax=add_to_cart`, {method:'POST', credentials:'include', body:fd});

if(!res.ok) throw 0;

try{ const j=await res.json(); if(j && j.error) throw 0; }catch(_){}

}

async function simpleAdd(product_id, quantity){

await fetch(`${location.origin}/?add-to-cart=${encodeURIComponent(product_id)}&quantity=${encodeURIComponent(quantity||1)}`, {credentials:'include'});

}

async function addSelectedToCart(items){

showOverlay(true);

try{

for(const it of items){

try{ if(USE_WC_AJAX) await wcAjaxAdd(it.id,it.qty); else if(FALLBACK_SIMPLE_ADD) await simpleAdd(it.id,it.qty); }

catch(e){ if(FALLBACK_SIMPLE_ADD) try{ await simpleAdd(it.id,it.qty); }catch(_){} }

}

} finally {

showOverlay(false);

location.href = CART_URL;

}

}

// ====== STATE ======

let CONFIG = null;

let phase = 'start'; // 'start' | 'quiz' | 'result'

let i = 0; // current question index

let answers = ; // answers = optionIndex

function resetState(){

phase='start'; i=0; answers= ;

}

function render(){

root.innerHTML = '';

const card = el('

');

if(phase === 'start'){

card.appendChild(el(`

Cilt Tipi Testi

`));

card.appendChild(el(`

Soruları cevapla; sonucunda cilt tipine uygun rutini ve ürünleri birlikte oluşturalım.

`));

const startBtn = el(`Testi Başlat`);

startBtn.addEventListener('click', ()=>{ phase='quiz'; i=0; render(); });

card.appendChild(startBtn);

} else if(phase === 'quiz'){

const q = CONFIG.questions ;

card.appendChild(el(`

${q.text}

`));

(q.options|| ).forEach((opt, idx)=>{

const b = el(`${opt.label}`);

b.addEventListener('click', ()=>{

answers = idx;

// seçili görselini güncelle

card.querySelectorAll('.ep-opt').forEach(x=>x.setAttribute('aria-selected','false'));

b.setAttribute('aria-selected','true');

// ileri butonu aktif

nextBtn.disabled = false;

});

card.appendChild(b);

});

card.appendChild(el(`

Soru ${i+1} / ${CONFIG.questions.length}

`));

// actions

const actions = el(`

`);

const prevBtn = el(`← Geri`);

const nextBtn = el(`${i===CONFIG.questions.length-1?'Sonucu Gör':'İleri →'}`);

// ilk soruda geri pasif

if(i===0) prevBtn.disabled = true;

// bu soruda henüz seçim yoksa ileri pasif

if(answers == null) nextBtn.disabled = true;

prevBtn.addEventListener('click', ()=>{

if(i>0){ i--; render(); }

});

nextBtn.addEventListener('click', ()=>{

if(i < CONFIG.questions.length-1){

i++; render();

} else {

// sonucu hesapla

const totals = {};

CONFIG.questions.forEach((qq, idx)=>{

const sel = answers ;

if(sel==null) return;

const sc = qq.options ?.score || {};

Object.keys(sc).forEach(k=> totals =(totals ||0)+(sc ||0) );

});

const best = Object.entries(totals).sort((a,b)=>b -a ) ?. || 'normal';

showResult(best);

}

});

actions.appendChild(prevBtn);

actions.appendChild(nextBtn);

card.appendChild(actions);

} else if(phase === 'result'){

// result render işini ayrı fonksiyonda yapıyoruz

}

root.appendChild(card);

}

function showResult(bestSlug){

root.innerHTML = '';

const card = el('

');

const label = (CONFIG.labels && CONFIG.labels ) || bestSlug;

const recs = pickRecs(CONFIG, bestSlug);

card.appendChild(el(`

Cilt Tipin: ${label}

`));

card.appendChild(el(`

Aşağıdaki rutini istersen tek tek, istersen tamamını sepete ekleyebilirsin.

`));

const list=el('

');

let count=0;

recs.forEach(p=>{

let ids = parseIds(p.ids||p.id);

if(ids.length>1) ids= .sort((a,b)=>a-b);

ids.forEach(pid=>{

count++;

const row=el(`

${p.step||''}

`);

list.appendChild(row);

fetchProductInfo(pid).then(info=>{

const nameEl=list.querySelector(`.ep-name `);

if(nameEl){

nameEl.classList.remove('ep-skel');

nameEl.style.height='auto'; nameEl.style.width='auto';

nameEl.innerHTML = `${info.title}`;

}

}).catch(()=>{});

});

});

if(!count) list.appendChild(el(`

Bu cilt tipi için tanımlı ürün bulunamadı.

`));

card.appendChild(list);

const controls=el(`

Tümünü Seç

Testi Tekrar Başlat

Seçilenleri Sepete Ekle

`);

controls.querySelector('#ep-select-all').addEventListener('change',e=>{

list.querySelectorAll('input ').forEach(chk=> chk.checked = e.target.checked);

});

controls.querySelector('#ep-restart').addEventListener('click', ()=>{

resetState(); render();

});

controls.querySelector('#ep-add').addEventListener('click',async()=>{

const items= ;

list.querySelectorAll('input.ep-chk').forEach(chk=>{

const id=parseInt(chk.dataset.id||'0',10);

if(chk.checked && id>0){

const qty=parseInt(list.querySelector(`input `)?.value||'1',10)||1;

items.push({id, qty});

}

});

if(!items.length){ alert('Lütfen en az bir ürünü seçin.'); return; }

const btn=controls.querySelector('#ep-add'); btn.disabled=true; btn.textContent='Ekleniyor...';

try{ await addSelectedToCart(items); }

finally{ btn.disabled=false; btn.textContent='Seçilenleri Sepete Ekle'; }

});

card.appendChild(controls);

card.appendChild(el(`

Not: Bu içerik tıbbi tanı yerine geçmez.

`));

root.appendChild(card);

phase='result';

}

// eşleşme (basit, sağlam)

function norm(s){

const tr = {'ğ':'g','ü':'u','ş':'s','ı':'i','ö':'o','ç':'c','â':'a','î':'i','û':'u'};

s=(s||'').toString().trim().toLowerCase().replace(/ /g,ch=>tr ||ch);

s=s.replace(/\b(cilt|cildi)\b/g,' ').replace(/ /g,' ').replace(/\s+/g,' ').trim();

return s;

}

function candidates(s){

const b=norm(s); return ;

}

function pickRecs(C, slug){

const rec=C.recommendations||{};

if(rec ) return rec ;

for(const c of candidates(slug)){

for(const k of Object.keys(rec)){ if(candidates(k).includes(c)) return rec ; }

}

for(const k of Object.keys(rec)){ if(norm(k)===norm(slug)) return rec ; }

return ;

}

// başlat

loadJSON(CONFIG_URL).then(cfg=>{

CONFIG = cfg;

resetState();

render();

}).catch(()=>{

root.innerHTML = '

Konfigürasyon yüklenemedi. Lütfen JSON adresini kontrol edin.

';

});

})();