10 exemple gratuite de interfață cu coș de cumpărături pentru comerțul electronic CSS și JavaScript

Cărucioarele de comerț electronic trebuie să fie utilizabile și accesibile pentru toți vizitatorii. Scopul dvs. este să creșteți conversiile și să mențineți oamenii implicați în timpul plății, iar cea mai bună modalitate de a face acest lucru este cu un design curat, care încurajează activitatea utilizatorilor.

Există multe cărucioare de cumpărături cu sursă deschisă gratuite pe care le puteți modifica pentru orice scop. Și ne-am luat libertatea de a ne colecta preferatele în această colecție.

Cărucior plat

Nu se poate nega popularitatea designului plat. Funcționează pentru toate tipurile de site-uri web și îi ajută pe designeri să se concentreze mai mult pe utilizare decât pe estetică.

De aceea, acest cărucior plat este o resursă excelentă pentru oricine construiește o pagină de plată de comerț electronic. Culorile sunt ușor de actualizat, iar caracteristicile interfeței funcționează la fel, indiferent de stilul de aspect.

Nu cred că designul plat este soluția pentru fiecare proiect, dar în scenariul potrivit, acest stilou poate funcționa bine ca șablon de pornire.

Vezi căruciorul cu stilou [codepen comp] de Will Paige

Interfață de utilizare fără masă

Multe pagini de plată folosesc tabele pentru a organiza datele, dar acest exemplu de Alex Rodrigues folosește în schimb DIV -uri.

Este pe deplin receptiv, așa că aspectul ar trebui să arate grozav, indiferent de dispozitivul pe care îl utilizați. Fiecare rând deține suficiente date pentru a remoda corect și pentru a menține totul organizat, chiar și pe ecrane super mici. Și codul CSS folosește Compass pentru a economisi timp împreună cu fonturi Google gratuite pentru un pic de stil.

Vedeți Coșul de cumpărături fără masă pentru stilou de alex rodrigues

Coș de cumpărături delicios

Nu îmi pot imagina că funcționează pe un site real, dar ca experiment UI/UX este destul de grozav. Coșul de cumpărături auto-intitulat Delicious acționează ca o brutărie/magazin de dulciuri online cu fotografii cu diferite deserturi.

Puteți muta cursorul spre stânga/dreapta pentru a avansa prin carusel sau puteți glisa pe un dispozitiv mobil. Fiecare articol are pictograme plus/minus pentru a adăuga articole sau a le elimina din comandă, plus o pictogramă „X” pentru a-l elimina complet din coș.

Întregul lucru este construit pe Sass, Slim și jQuery, așa că este un proiect frontend al naibii! Dacă doriți să disecați un cod grozav, acest exemplu merită salvat.

Vezi Coșul de cumpărături Pen Delicious de la Didier

Design receptiv

Iată o altă interfață simplă de coș de cumpărături receptivă, construită pe Sass și fără masă.

Îmi place această finalizare receptivă puțin mai mult decât celelalte, deoarece punctele de întrerupere par mai naturale. Chiar și pe ecrane mai mici, articolele căruciorului nu se simt înghesuite sau deplasate.

Toate butoanele de „eliminare” funcționează prin JavaScript, iar câmpurile de introducere numerică actualizează automat prețurile. Acest lucru este excelent pentru o pagină de coș frontend în care cumpărătorul poate dori să mărească cantitățile înainte de a plăti și pentru a vedea o estimare a costurilor totale.

Vezi Coșul de cumpărături cu stilou adaptabil de Justin Klemm

Coșul de cumpărături jQuery

Acest stilou acționează mai mult ca un cadru fir decât o pagină completă de plată, dar este perfect ca punct de plecare. Dezvoltatorul Khurram Alvi a creat acest coș de cumpărături receptiv cu HTML/CSS de bază și puțin jQuery.

Este pe deplin receptiv, iar intrările de cantitate funcționează așa cum v-ați aștepta. Un lucru frumos este simplitatea designului acestui cărucior. Nu impune culori, fonturi sau texturi în aspect. Oricine dorește să construiască un cărucior nou de la zero ar putea începe aici, deoarece este ușor de construit și de restructurat.

Vedeți Coșul de cumpărături jQuery pentru Pen Responsive de Khurram Alvi

Cărucior de provocare

Din când în când, apar noi provocări CodePen care le cer dezvoltatorilor să creeze diferite interfețe, cum ar fi pagini de înscriere sau ferestre modale. Acest stilou de la Ziga Miklic a venit dintr-o provocare pentru interfețele de utilizator pentru coșul de cumpărături și este o capodopera a dezvoltării frontend.

Când adăugați/eliminați articole din coș, veți observa că prețurile se actualizează automat cu o mică animație glisantă. De asemenea, puteți face clic pe orice imagine a produsului pentru a o elimina cu ușurință din coș. Aceste caracteristici mici adaugă mult la interfață și fac clonarea o briză.

Chiar și funcția de checkout are propria caracteristică animată, deși nu este conectată la nimic din backend.

Vezi Coșul de cumpărături Pen [ CodePen Challange ] de Ziga Miklic

Interfața de utilizare pentru coșul glisant

Widgeturile cu file vă permit să adăugați conținut pe o singură pagină și să ofere utilizatorilor puterea asupra conținutului respectiv. În acest cărucior glisant, puteți comuta între coșul în sine și o listă de articole „favorite” salvate.

Niciuna dintre funcțiile de finalizare a achiziției nu funcționează de fapt, așa că nu puteți adăuga sau elimina articole în coș. Dar elementele de interfață sunt la locul lor, așa că puțină magie JavaScript ar rezolva asta. Cu toate acestea, sunt impresionat de cât de curat arată acest cărucior și de interfața cu file unică, dar utilizabilă.

Vezi Coșul de cumpărături Pen (responsive) de Alex

Magazin dinamic și coș

Amestecarea magazinului și a coșului de cumpărături într-o singură interfață este o muncă grea, dar Olivia Cheng a făcut-o în acest stilou.

Folosește miniaturi largi într-o grilă configurată cu un buton „adăugați în coș” la trecerea cursorului. Faceți clic pe acesta pentru a adăuga articolul de mai sus cu prețuri cu actualizare automată. O caracteristică unică este cantitatea adăugată deasupra miniaturii articolului. Acest lucru ar putea deveni confuz pe un cărucior real, dar dacă numerele ar fi puțin mai mici, aceasta ar fi o modalitate excelentă de a economisi spațiu.

Vedeți Coșul de cumpărături cu stilou și magazin de Olivia Cheng

Coș de cumpărături curat

Dezvoltatorul Bart Veneman a creat acest coș de cumpărături curat ca un șablon de interfață simplă. Acesta calculează automat prețul total și chiar include taxe lângă butonul de finalizare a comenzii.

Toate aceste caracteristici dinamice funcționează prin JavaScript și, în mod surprinzător, acest stilou folosește Zepto peste jQuery. Acest lucru este grozav pentru dezvoltatorii care preferă biblioteca Zepto, dar într-adevăr oricine ar putea ridica acest cod și îl poate modifica pentru a se potrivi oricărui șablon.

Vezi Coșul de cumpărături stilou de Bart Veneman

Coș simplu cu Vue.js

Codarea front-end cu Vue.js face ca șablonul să fie mult mai simplu. Și acest stilou este un exemplu de cărucior dinamic construit practic pe o fundație JavaScript.

Coșul se actualizează automat cu fiecare clic, astfel încât să puteți adăuga/elimina articole și să vedeți rezultatele instantaneu. Butonul din dreapta sus deschide coșul dvs. curent într-o fereastră modală folosind componenta modală a Bootstrap.

Dacă vă place sintaxa Vue.js, atunci acest șablon este un loc minunat pentru a începe să construiți un coș de cumpărături. Este ușor de personalizat și ar trebui să funcționeze bine în toate browserele.

Vezi Coșul de cumpărături simplu Pen VueJS 2 de Cristian Matos

Coș de domeniu

Iată unul dintre modelele mele preferate de coș de cumpărături, modelat după un registrator de domenii. Codificatorul Jesse Bilsten a fost detaliat cu această interfață, inclusiv o secțiune de plată și o zonă obligatorie de T&C.

Trebuie să faceți clic pe butonul „Sunt de acord” înainte de a finaliza procesul de plată. Este o caracteristică minoră, dar valoroasă pentru unele site-uri de comerț electronic și îmi place foarte mult aspectul în două coloane. Și acest design este complet receptiv, astfel încât să îl puteți clona pentru a fi utilizat în aproape orice sistem de comerț electronic.

Vedeți Coșul de cumpărături cu stilou – Brand v01 de Jesse Bilsten