SVUOTA IL CARRELLO - LO SMANETTONE

Esempi e Codice
Vai ai contenuti

SVUOTA IL TUO CARRELLO CON UN CLICK
Progetto FREE
Crediti alla funzione by ► GIANCARLO WEB

Questa funzione era già presente nativamente sulle vecchie versioni di website X5PRO. Con gli ultimi aggiornamenti questa possibilità non è più presente. Di fatto se un utente ha una lista di prodotti kilometrica gli tocca eliminare articolo per articolo dalla lista. Un lavoraccio. Analizzando la scelta di incomedia con tutta probabilità gli sviluppatori avranno pensato di toglierla perchè, ipotizzo, se un utente cliccava per errore su "Svuota carrello", perdeva tutto il contenuto senza alcuna conferma. Proprio per questo motivo molte piattaforme moderne richiedono una conferma. Alcuni studi hanno dimostrato che se il carrello rimane pieno, l'utente è più propenso a ritornare e completare l'acquisto. Infatti, se l'utente ha difficoltà a svuotare il carrello, potrebbe riflettere di più prima di eliminare i prodotti ed ecco spiegato perché alcuni Shop (incomedia compresa) preferiscono offrire solo la possibilità di rimuovere un singolo prodotto alla volta. Secondo me le nuove logiche di gestione del carrello potrebbero aver reso meno immediata l'integrazione della funzione di svuotamento. In conclusione penso che la funzione sia stata tolta per motivi di marketing e strategia di vendita, più che per limiti tecnici. Ma niente PAURA! A tutto c'è rimedio: ripristinare manualmente la funzione con uno script personalizzato!

PRO
  • Il codice si inserisce direttamente in un oggetto HTML
  • Possibilità di manipolare i colori del pulsante attraverso lo style del codice
  • Cambiare la frase SVUOTA CARRELLO
  • Utilizzo di risorse minime

CONTRO
  • Nessuna controindicazione ma è preferibile per l'utente che vuole smanettare copiare il codice direttamente da PC per evitare che i browser possano interpretare male i rientri del codice che si verificano al restringimento a risoluzioni più basse

Esempio per creare un pulsante moderno per lo svuotamento del carrello. Il contenuto del codice e dei relativi testi vanno inseriti in un normale oggetto html che può essere posizionato sull'header,sulla stiky bar o sul footer o in entrambi. In questo esempio la funzione non è operativa ma è stata TESTATA con OTTIMI RISULTATI.



ESEMPIO
Pulsante che effettua lo svuotamento del carrello utilizzando icona Emoy

INSERISCI IN CODICE HTML

<style>
   /* Stile del pulsante by MAX*/
   .btn-empty-cart {
       background: linear-gradient(135deg, #ff4e50, #f9d423); /* Gradiente Personalizzabile */
       color: white;
       font-size: 16px;
       font-weight: bold;
       padding: 12px 24px;
       border: none;
       border-radius: 8px;
       cursor: pointer;
       transition: background 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 10px;
       box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
   }

   /* Effetto hover senza ingrandimento */
   .btn-empty-cart:hover {
       background: linear-gradient(135deg, #f9d423, #ff4e50); /* Inverte i colori */
       box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25); /* Leggera elevazione */
   }

   /* Effetto click */
   .btn-empty-cart:active {
       transform: scale(0.95); /* Leggero rimpicciolimento */
   }

   /* Icona moderna */
   .btn-empty-cart::before {
       content: "🗑️"; /* Icona cestino */
       font-size: 18px;
   }
</style>

<script>
/* Funzione by Giancarlo Web */
   function cart_empty() {
       var ce = confirm("Vuoi svuotare il carrello?");
       if (ce == true) {
           x5engine.cart.manager.empty();
           location.reload();
       }
   }
</script>

<!-- Pulsante con lo stile applicato -->
<button class="btn-empty-cart" onclick="cart_empty()"> Svuota Carrello</button>
COMMENTA ▼
Non sono presenti ancora recensioni.
0
0
0
0
0

Crediti

Questo pannello è stato personalizzato da Losmanettone.it a partire dal progetto open source SIENNA concesso sotto licenza MIT.

Torna ai contenuti