---
layout: base.njk
title: "Il tuo Carrello EVO — Prevo Marketplace"
description: "Riepilogo del tuo ordine di olio extravergine di oliva selezionato da Prevo."
canonical: /marketplace/evo/carrello/
categoria: evo
---

<div class="container" style="padding-top:20px;">
    <nav aria-label="Breadcrumb" class="product-breadcrumb">
        <a href="/">Home</a> <span class="breadcrumb-sep">›</span>
        <a href="/marketplace/">Marketplace</a> <span class="breadcrumb-sep">›</span>
        <a href="/marketplace/evo/">Olio EVO</a> <span class="breadcrumb-sep">›</span>
        <span class="current">Carrello</span>
    </nav>
</div>

<section class="product-section" style="margin-bottom:80px;">
    <div class="container" style="max-width:800px; padding:40px 15px;">

        <h1 style="color:var(--secondary); margin-bottom:8px;">🛒 Il tuo Carrello</h1>
        <p style="color:var(--text-light); margin-bottom:32px;">Olio Extravergine di Oliva — Frantoio Zungrone</p>

        <!-- LISTA PRODOTTI -->
        <div id="carrello-lista"></div>

        <!-- CARRELLO VUOTO -->
        <div id="carrello-vuoto" style="display:none; text-align:center; padding:60px 20px;">
            <p style="font-size:3rem; margin:0;">🫒</p>
            <h2 style="color:var(--secondary); margin:16px 0 8px;">Il carrello è vuoto</h2>
            <p style="color:var(--text-light); margin-bottom:24px;">Scopri i nostri prodotti e aggiungi quelli che preferisci.</p>
            <a href="/marketplace/evo/" class="btn btn--large" style="justify-content:center;">Vai allo Shop EVO</a>
        </div>

        <!-- RIEPILOGO ORDINE -->
        <div id="carrello-riepilogo" style="display:none; margin-top:32px; border-top:2px solid var(--bg-light); padding-top:24px;">

            <!-- BARRA SPEDIZIONE GRATIS -->
            <div id="barra-spedizione" style="background:#fff3cd; border:1px solid #ffeeba; border-radius:var(--radius); padding:16px; margin-bottom:24px;">
                <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:8px;">
                    <span style="font-weight:600; color:#856404;">🚚 Spedizione gratuita sopra €99</span>
                    <span id="barra-mancante" style="font-size:.9rem; color:#856404;"></span>
                </div>
                <div style="background:#ffeeba; border-radius:4px; height:8px; overflow:hidden;">
                    <div id="barra-progresso" style="background:var(--primary); height:100%; width:0%; transition:width .4s ease; border-radius:4px;"></div>
                </div>
            </div>
			
			<!-- NUOVO LINK AGGIUNTO QUI -->
<div id="suggerimento-shop" style="text-align:right; margin-top:10px; font-size:.85rem;">
    <a href="/marketplace/evo/" style="color:#7d5a00; text-decoration:underline;">Torna allo shop per aggiungere prodotti →</a>
</div>

            <!-- TOTALI -->
            <div style="display:flex; flex-direction:column; gap:10px; margin-bottom:24px;">
                <div style="display:flex; justify-content:space-between; font-size:.95rem; color:var(--text-light);">
                    <span>Subtotale prodotti</span>
                    <span id="subtotale-display"></span>
                </div>
                <div style="display:flex; justify-content:space-between; font-size:.95rem; color:var(--text-light);">
                    <span id="spedizione-label">Spedizione Italia</span>
                    <span id="spedizione-display"></span>
                </div>
                <div style="display:flex; justify-content:space-between; font-size:1.2rem; font-weight:700; color:var(--secondary); border-top:1px solid var(--bg-light); padding-top:12px; margin-top:4px;">
                    <span>Totale</span>
                    <span id="totale-display"></span>
                </div>
            </div>

            <!-- PAESE -->
            <div style="margin-bottom:24px;">
                <label style="font-weight:600; color:var(--secondary); display:block; margin-bottom:8px;">🌍 Paese di spedizione</label>
                <select id="paese-select" style="width:100%; padding:10px 14px; border:1px solid #ccc; border-radius:var(--radius); font-size:.95rem; background:#fff;">
                    <option value="IT">🇮🇹 Italia</option>
                    <option value="FR">🇫🇷 Francia</option>
                    <option value="DE">🇩🇪 Germania</option>
                    <option value="ES">🇪🇸 Spagna</option>
                    <option value="NL">🇳🇱 Olanda</option>
                    <option value="BE">🇧🇪 Belgio</option>
                    <option value="AT">🇦🇹 Austria</option>
                    <option value="PT">🇵🇹 Portogallo</option>
                </select>
            </div>

            <!-- BOTTONE PAGAMENTO -->
            <button id="btn-pagamento" class="btn btn--large" style="width:100%; justify-content:center; border-radius:var(--radius-lg);">
                🔒 Procedi al Pagamento
            </button>

            <div style="background:var(--bg-light); border-radius:var(--radius); padding:15px; margin-top:20px; text-align:center;">
                <p style="font-size:0.85rem; color:#555; margin:0; line-height:1.5;">
                    Venduto e spedito dal produttore partner<br>
                    <strong style="color:var(--secondary);">Frantoio Zungrone</strong><br>
                    <span style="color:var(--text-light);">(Calabria)</span>
                </p>
            </div>

            <!-- SVUOTA -->
            <div style="text-align:center; margin-top:16px;">
                <button onclick="svuotaTutto()" style="background:none; border:none; color:#aaa; font-size:.85rem; cursor:pointer; text-decoration:underline;">
                    Svuota carrello
                </button>
            </div>
        </div>

    </div>
</section>

<script>
window.PREVO_CATEGORIA = 'evo';

const CARRELLO_KEY  = 'carrello_prevo_evo';
const SOGLIA_GRATIS = {{ relations.config.soglia_spedizione_gratis }} * 100;
const SPEDIZIONE_IT = 1500;
const SPEDIZIONE_EU = 3000;
const PAESI_EU      = ['FR','DE','ES','NL','BE','AT','PT'];
const CHECKOUT_URL  = 'https://prevo.it/checkout.php';

function leggiCarrello() {
    try { return JSON.parse(localStorage.getItem(CARRELLO_KEY)) || []; }
    catch { return []; }
}
function salvaCarrello(items) {
    localStorage.setItem(CARRELLO_KEY, JSON.stringify(items));
    aggiornaContatore();
}
function aggiornaContatore() {
    const items = leggiCarrello();
    const tot = items.reduce((a, i) => a + i.quantita, 0);
    document.querySelectorAll('.carrello-contatore').forEach(el => {
        el.textContent = tot;
        el.style.display = tot > 0 ? 'inline-flex' : 'none';
    });
}
function formatEuro(centesimi) {
    return '€ ' + (centesimi / 100).toFixed(2).replace('.', ',');
}

function render() {
    const items = leggiCarrello();
    const lista = document.getElementById('carrello-lista');
    const vuoto = document.getElementById('carrello-vuoto');
    const riepilogo = document.getElementById('carrello-riepilogo');

    if (items.length === 0) {
        lista.innerHTML = '';
        vuoto.style.display = 'block';
        riepilogo.style.display = 'none';
        return;
    }

    vuoto.style.display = 'none';
    riepilogo.style.display = 'block';

    lista.innerHTML = items.map(item => `
        <div style="display:flex; align-items:center; gap:16px; padding:16px 0; border-bottom:1px solid var(--bg-light);">
            <div style="flex:1;">
                <a href="${item.url}" style="font-weight:600; color:var(--secondary); text-decoration:none;">${item.nome}</a>
                <div style="font-size:.9rem; color:var(--text-light); margin-top:4px;">${item.prezzoFormattato} cad.</div>
            </div>
            <div style="display:flex; align-items:center; gap:8px;">
                <button onclick="cambiaQ('${item.id}', -1)" style="width:32px; height:32px; border-radius:50%; border:1px solid #ccc; background:#fff; cursor:pointer; font-size:1.1rem; display:flex; align-items:center; justify-content:center;">−</button>
                <span style="font-weight:700; min-width:20px; text-align:center;">${item.quantita}</span>
                <button onclick="cambiaQ('${item.id}', +1)" style="width:32px; height:32px; border-radius:50%; border:1px solid #ccc; background:#fff; cursor:pointer; font-size:1.1rem; display:flex; align-items:center; justify-content:center;">+</button>
            </div>
            <div style="font-weight:700; color:var(--secondary); min-width:70px; text-align:right;">
                ${formatEuro(item.prezzoEuro * item.quantita)}
            </div>
            <button onclick="rimuovi('${item.id}')" style="background:none; border:none; color:#ccc; cursor:pointer; font-size:1.2rem; padding:4px;" title="Rimuovi">✕</button>
        </div>
    `).join('');

    aggiornaTotali();
}

function aggiornaTotali() {
    const items = leggiCarrello();
    const paese = document.getElementById('paese-select').value;
    const subtotale = items.reduce((a, i) => a + (i.prezzoEuro * i.quantita), 0);

    let spedizione = 0;
    let spedizioneLabel = 'Spedizione';
    if (paese === 'IT') {
        spedizione = subtotale >= SOGLIA_GRATIS ? 0 : SPEDIZIONE_IT;
        spedizioneLabel = 'Spedizione Italia';
    } else if (PAESI_EU.includes(paese)) {
        spedizione = SPEDIZIONE_EU;
        spedizioneLabel = 'Spedizione Europa';
    }

    const totale = subtotale + spedizione;
    const mancante = Math.max(0, SOGLIA_GRATIS - subtotale);
    const progresso = Math.min(100, (subtotale / SOGLIA_GRATIS) * 100);

    document.getElementById('subtotale-display').textContent = formatEuro(subtotale);
    document.getElementById('spedizione-label').textContent = spedizioneLabel;
    document.getElementById('spedizione-display').textContent = spedizione === 0 ? '🎉 Gratuita' : formatEuro(spedizione);
    document.getElementById('totale-display').textContent = formatEuro(totale);
    document.getElementById('barra-progresso').style.width = progresso + '%';
    const suggerimentoShop = document.getElementById('suggerimento-shop');
if (mancante > 0) {
    document.getElementById('barra-mancante').textContent = 'Mancano ' + formatEuro(mancante) + ' alla spedizione gratis';
    if (suggerimentoShop) suggerimentoShop.style.display = 'block';
} else {
    document.getElementById('barra-mancante').textContent = '🎉 Spedizione gratuita!';
    if (suggerimentoShop) suggerimentoShop.style.display = 'none'; // Lo nascondiamo se ha già la spedizione gratis!
}
}

function cambiaQ(id, delta) {
    const items = leggiCarrello();
    const item = items.find(i => i.id === id);
    if (!item) return;
    item.quantita += delta;
    if (item.quantita <= 0) salvaCarrello(items.filter(i => i.id !== id));
    else salvaCarrello(items);
    render();
}
function rimuovi(id) {
    salvaCarrello(leggiCarrello().filter(i => i.id !== id));
    render();
}
function svuotaTutto() {
    if (confirm('Svuotare il carrello?')) {
        localStorage.removeItem(CARRELLO_KEY);
        aggiornaContatore();
        render();
    }
}

document.getElementById('btn-pagamento').addEventListener('click', async () => {
    const items = leggiCarrello();
    const paese = document.getElementById('paese-select').value;
    const btn = document.getElementById('btn-pagamento');
    btn.disabled = true;
    btn.textContent = '⏳ Preparazione ordine...';
    try {
        const risposta = await fetch(CHECKOUT_URL, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ items, paese, negozio: 'evo' })   // <-- MODIFICATO
        });
        const dati = await risposta.json();
        if (dati.url) {
            window.location.href = dati.url;
        } else {
            alert('Errore nel pagamento. Riprova.');
            btn.disabled = false;
            btn.textContent = '🔒 Procedi al Pagamento';
        }
    } catch {
        alert('Errore di connessione. Riprova.');
        btn.disabled = false;
        btn.textContent = '🔒 Procedi al Pagamento';
    }
});

document.getElementById('paese-select').addEventListener('change', aggiornaTotali);
document.addEventListener('DOMContentLoaded', () => { render(); aggiornaContatore(); });
</script>

    </script>
</body>
</html>