I tuoi preferiti

<div id="idearey-wishlist-page">
<p id="wishlist-loading">Caricamento...</p>
<div id="wishlist-grid"></div>
<div id="wishlist-empty" style="display:none;text-align:center;padding:40px 0">
<p style="font-size:18px">Nessun prodotto salvato per ora ♡</p>
<p>Salva i prodotti che ti piacciono cliccando su "Salva per dopo"</p>
<a href="/collections/all" style="display:inline-block;margin-top:15px;padding:12px 20px;background:#111;color:#fff;border-radius:8px;text-decoration:none">Continua a guardare</a>
</div>
</div>

<style>
#wishlist-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:15px;margin-top:20px}
.wish-card{border:1px solid #eee;border-radius:12px;padding:10px;text-align:center}
.wish-card img{width:100%;border-radius:8px}
.wish-card h3{font-size:14px;margin:8px 0;min-height:36px}
.wish-card .price{font-weight:700;margin:5px 0}
.wish-card a.btn{display:block;margin-top:8px;padding:10px;background:#111;color:#fff;border-radius:8px;text-decoration:none;font-size:13px}
#wishlist-actions{text-align:center;margin-top:20px}
</style>

<script>
document.addEventListener('DOMContentLoaded', async function(){
const key='idearey_wishlist';
const grid=document.getElementById('wishlist-grid');
const empty=document.getElementById('wishlist-empty');
const loading=document.getElementById('wishlist-loading');
let list=[];
try{list=JSON.parse(localStorage.getItem(key))||[]}catch(e){list=[]}

if(list.length===0){loading.style.display='none';empty.style.display='block';return;}

loading.style.display='none';
for(const handle of list){
try{
const res=await fetch(`/products/${handle}.js`);
const p=await res.json();
const card=document.createElement('div');
card.className='wish-card';
card.innerHTML=`
<a href="/products/${handle}"><img src="${p.featured_image}" alt="${p.title}"></a>
<h3>${p.title}</h3>
<div class="price">${(p.price/100).toFixed(2).replace('.',',')} €</div>
<a class="btn" href="/products/${handle}">Vedi prodotto</a>
<a href="#" onclick="removeWish('${handle}');return false" style="display:block;margin-top:8px;font-size:12px;color:#888">Rimuovi</a>
`;
grid.appendChild(card);
}catch(e){}
}
const actions=document.createElement('div');
actions.id='wishlist-actions';
actions.innerHTML=`<a href="#" onclick="clearWish();return false" style="font-size:13px;color:#888">Svuota tutti i preferiti</a>`;
grid.after(actions);
});

function removeWish(handle){
let list=JSON.parse(localStorage.getItem('idearey_wishlist'))||[];
list=list.filter(h=>h!==handle);
localStorage.setItem('idearey_wishlist',JSON.stringify(list));
location.reload();
}
function clearWish(){
localStorage.removeItem('idearey_wishlist');
location.reload();
}
</script>