10 esempi di interfaccia utente del carrello eCommerce CSS e JavaScript gratuiti

I carrelli eCommerce devono essere utilizzabili e accessibili a tutti i visitatori. Il tuo obiettivo è aumentare le conversioni e coinvolgere le persone durante il checkout e il modo migliore per farlo è con un design pulito che incoraggi l'attività degli utenti.

Ci sono molti carrelli della spesa open source gratuiti che puoi rinnovare per qualsiasi scopo. E ci siamo presi la libertà di collezionare i nostri preferiti in questa collezione.

Carrello piatto

Non si può negare la popolarità del design piatto. Funziona per tutti i tipi di siti Web e aiuta i designer a concentrarsi maggiormente sull'usabilità piuttosto che sull'estetica.

Ecco perché questo carrello piatto è un'ottima risorsa per chiunque crei una pagina di pagamento eCommerce. I colori sono facili da aggiornare e le funzionalità dell'interfaccia funzionano allo stesso modo indipendentemente dallo stile del layout.

Non credo che il design piatto sia la soluzione per ogni progetto, ma nello scenario giusto questa penna può funzionare bene come modello di partenza.

Guarda il Pen Flat Cart [codepen comp] di Will Paige

Interfaccia utente senza tabelle

Molte pagine di pagamento utilizzano tabelle per organizzare i dati, ma questo esempio di Alex Rodrigues utilizza invece i DIV .

È completamente reattivo, quindi il layout dovrebbe avere un bell'aspetto indipendentemente dal dispositivo che stai utilizzando. Ogni riga contiene dati sufficienti per eseguire il restyling correttamente e mantenere tutto organizzato, anche su schermi piccolissimi. E il codice CSS utilizza Compass per risparmiare tempo insieme a Google Fonts gratuiti per un po' di stile.

Guarda il Carrello della spesa senza tavolo Pen Responsive di alex rodrigues

Delizioso carrello della spesa

Non riesco a immaginare che funzioni su un sito reale, ma come esperimento UI/UX è piuttosto interessante. L'omonimo Carrello della spesa si comporta come un negozio di prodotti da forno/dolci online con foto di diversi dessert.

Puoi spostare il cursore a sinistra/destra per avanzare nel carosello o scorrere su un dispositivo mobile. Ogni articolo ha icone più/meno per aggiungere articoli o rimuoverli dal tuo ordine, più un'icona "X" per rimuoverlo completamente dal carrello.

Il tutto è basato su Sass, Slim e jQuery, quindi è un vero e proprio progetto frontend! Se stai cercando di sezionare del codice eccezionale, vale la pena salvare questo esempio.

Guarda il carrello Pen Delicious di Didier

Design reattivo

Ecco un'altra semplice interfaccia utente reattiva del carrello degli acquisti basata su Sass e senza tabelle.

Mi piace questo checkout reattivo un po' più degli altri perché i punti di interruzione sembrano più naturali. Anche su schermi più piccoli, gli articoli del carrello non si sentono angusti o fuori posto.

Tutti i pulsanti "rimuovi" funzionano tramite JavaScript e i campi di input numerici aggiornano automaticamente i prezzi. Questo è ottimo per una pagina del carrello frontend in cui l'acquirente potrebbe voler aumentare le quantità prima di pagare e vedere una stima dei costi totali.

Guarda il carrello della spesa reattivo alla penna di Justin Klemm

Carrello jQuery

Questa penna si comporta più come un wireframe che come una pagina di pagamento completa, ma è perfetta come punto di partenza. Lo sviluppatore Khurram Alvi ha creato questo carrello reattivo con HTML/CSS di base e un po' di jQuery.

È completamente reattivo e gli input di quantità funzionano come ti aspetteresti. Una cosa bella è la semplicità del design di questo carrello. Non impone colori, caratteri o trame nel layout. Chiunque cerchi di costruire un nuovo carrello da zero potrebbe iniziare da qui perché è facile da costruire e ristrutturare.

Vedi il carrello della spesa jQuery Pen Responsive di Khurram Alvi

Carrello delle sfide

Ogni tanto vengono visualizzate nuove sfide CodePen che chiedono agli sviluppatori di creare interfacce diverse come pagine di registrazione o finestre modali. Questa penna di Ziga Miklic è nata da una sfida per le interfacce utente del carrello ed è un capolavoro di sviluppo frontend.

Quando aggiungi/rimuovi articoli dal carrello, noterai che i prezzi si aggiornano automaticamente con una piccola animazione scorrevole. Puoi anche fare clic su qualsiasi immagine del prodotto per rimuoverlo facilmente dal carrello. Queste piccole funzionalità aggiungono molto all'interfaccia e rendono la clonazione un gioco da ragazzi.

Anche la funzione di pagamento ha la sua funzione animata, sebbene non sia collegata a nulla sul back-end.

Vedi il carrello della spesa Pen [ CodePen Challenge ] di Ziga Miklic

Interfaccia utente del carrello scorrevole

I widget a schede ti consentono di aggiungere contenuto a una singola pagina e dare agli utenti il ​​potere su quel contenuto. In questo carrello scorrevole puoi passare dal carrello stesso a un elenco di articoli "preferiti" salvati.

Nessuna delle funzionalità di pagamento funziona davvero, quindi non puoi aggiungere o rimuovere articoli nel carrello come preferiti. Ma gli elementi dell'interfaccia sono a posto, quindi un po' di magia JavaScript lo risolverebbe. Tuttavia, sono impressionato dall'aspetto pulito di questo carrello e dall'interfaccia della scheda unica ma utilizzabile.

Guarda il carrello Pen (reattivo) di Alex

Negozio e carrello dinamici

Unire il negozio e il carrello della spesa in un'unica interfaccia è un lavoro duro, ma Olivia Cheng ce l'ha fatta con questa penna.

Utilizza miniature larghe in una griglia impostata con un pulsante "aggiungi al carrello" al passaggio del mouse. Fare clic qui per aggiungere l'articolo sopra con l'aggiornamento automatico dei prezzi. Una caratteristica unica è la quantità aggiunta sopra la miniatura dell'oggetto. Questo potrebbe creare confusione su un carrello reale, ma se i numeri fossero un po' più piccoli, questo sarebbe un ottimo modo per risparmiare spazio.

Guarda il carrello e il negozio con penna scorrevole di Olivia Cheng

Pulisci il carrello

Lo sviluppatore Bart Veneman ha creato questo carrello della spesa pulito come un semplice modello di interfaccia. Calcola automaticamente il prezzo totale e include anche le tasse vicino al pulsante di pagamento.

Tutte queste funzionalità dinamiche funzionano tramite JavaScript e sorprendentemente questa penna utilizza Zepto su jQuery. Questo è ottimo per gli sviluppatori che preferiscono la libreria Zepto, ma in realtà chiunque potrebbe prendere questo codice e rielaborarlo per adattarlo a qualsiasi modello.

Guarda il carrello della spesa della penna di Bart Veneman

Carrello semplice con Vue.js

La codifica frontend con Vue.js rende la creazione di modelli molto più semplice. E questa penna è un esempio di carrello dinamico praticamente costruito su una base JavaScript.

Il carrello si aggiorna automaticamente ad ogni clic in modo da poter aggiungere/rimuovere articoli e vedere i risultati all'istante. Il pulsante in alto a destra apre il carrello corrente in una finestra modale utilizzando il componente modale di Bootstrap.

Se ti piace la sintassi Vue.js, allora questo modello è un ottimo punto di partenza per iniziare a costruire un carrello. È facile da personalizzare e dovrebbe funzionare bene in tutti i browser.

Guarda il carrello Pen VueJS 2 Simple di Cristian Matos

Carrello del dominio

Ecco uno dei miei modelli di carrello preferiti modellato su un registrar di domini. Il programmatore Jesse Bilsten ha ottenuto dettagli su questa interfaccia, inclusa una sezione di pagamento e un'area T&C richiesta.

Devi fare clic sul pulsante "Accetto" prima di completare la procedura di pagamento. È una funzionalità minore ma preziosa per alcuni siti di eCommerce e mi piace molto il layout a due colonne. E questo design è totalmente reattivo, quindi puoi clonarlo per utilizzarlo praticamente in qualsiasi sistema di e-commerce.

Vedi il carrello della spesa reattivo alla penna – Brand v01 di Jesse Bilsten