10 kostenlose CSS- und JavaScript-Beispiele für die eCommerce-Einkaufswagen-Benutzeroberfläche

E-Commerce-Warenkörbe müssen für alle Besucher nutzbar und zugänglich sein. Ihr Ziel ist es, die Conversions zu steigern und die Leute während des Bezahlvorgangs zu beschäftigen, und der beste Weg, dies zu erreichen, ist ein sauberes Design, das die Benutzeraktivität fördert.

Es gibt viele kostenlose Open-Source-Warenkörbe, die Sie für jeden Zweck umgestalten können. Und wir haben uns erlaubt, unsere Favoriten in dieser Kollektion zu sammeln.

Flacher Wagen

Die Popularität von Flat Design lässt sich nicht leugnen. Es funktioniert für alle Arten von Websites und hilft Designern, sich mehr auf die Benutzerfreundlichkeit als auf die Ästhetik zu konzentrieren.

Aus diesem Grund ist dieser flache Einkaufswagen eine hervorragende Ressource für alle, die eine E-Commerce-Checkout-Seite erstellen. Die Farben sind einfach zu aktualisieren und die Funktionen der Benutzeroberfläche funktionieren unabhängig vom Layoutstil gleich.

Ich denke nicht, dass Flat Design die Lösung für jedes Projekt ist, aber im richtigen Szenario kann dieser Stift gut als Ausgangsvorlage dienen.

Siehe Pen Flat Cart [codepen comp] von Will Paige

Tabellenfreie Benutzeroberfläche

Viele Checkout-Seiten verwenden Tabellen, um Daten zu organisieren, aber dieses Beispiel von Alex Rodrigues verwendet stattdessen DIV s.

Es reagiert vollständig, sodass das Layout unabhängig vom verwendeten Gerät gut aussehen sollte. Jede Zeile enthält genug Daten, um richtig neu zu gestalten und alles organisiert zu halten, selbst auf superkleinen Bildschirmen. Und der CSS-Code verwendet Compass, um Zeit zu sparen, zusammen mit kostenlosen Google Fonts für ein wenig Stil.

Siehe Pen Responsive Table-less Shopping Cart von Alex Rodrigues

Leckerer Einkaufswagen

Ich kann mir nicht vorstellen, dass das auf einer echten Seite funktioniert, aber als UI/UX-Experiment ist es ziemlich cool. Der selbstbetitelte Delicious Shopping Cart verhält sich wie ein Online-Bäckerei-/Süßwarenladen mit Fotos verschiedener Desserts.

Sie können Ihren Cursor nach links/rechts bewegen, um durch das Karussell zu blättern, oder auf einem Mobilgerät wischen. Jeder Artikel hat Plus-/Minus-Symbole, um Artikel hinzuzufügen oder aus Ihrer Bestellung zu entfernen, sowie ein „X“-Symbol, um ihn vollständig aus Ihrem Einkaufswagen zu entfernen.

Das Ganze basiert auf Sass, Slim und jQuery, also ist es ein tolles Frontend-Projekt! Wenn Sie großartigen Code analysieren möchten, sollten Sie dieses Beispiel speichern.

Sehen Sie sich den Pen Delicious Einkaufswagen von Didier an

Sich anpassendes Design

Hier ist eine weitere einfache, reaktionsschnelle Einkaufswagen-Benutzeroberfläche, die auf Sass basiert und tabellenfrei ist.

Ich mag diesen reaktionsschnellen Checkout etwas mehr als die anderen, weil sich die Haltepunkte natürlicher anfühlen. Selbst auf kleineren Bildschirmen fühlen sich die Einkaufswagenartikel nicht beengt oder fehl am Platz an.

Alle „Entfernen“-Schaltflächen funktionieren über JavaScript, und die numerischen Eingabefelder aktualisieren die Preise automatisch. Dies eignet sich hervorragend für eine Frontend-Warenkorbseite, auf der der Käufer möglicherweise die Mengen erhöhen möchte, bevor er bezahlt, und um eine Schätzung der Gesamtkosten anzuzeigen.

Siehe Pen Responsive Shopping Cart von Justin Klemm

jQuery-Einkaufskorb

Dieser Stift verhält sich eher wie ein Drahtmodell als eine vollständige Checkout-Seite, aber er ist perfekt als Ausgangspunkt. Entwickler Khurram Alvi hat diesen reaktionsschnellen Einkaufswagen mit einfachem HTML/CSS und ein wenig jQuery erstellt.

Es reagiert vollständig und die Mengeneingaben funktionieren wie erwartet. Eine schöne Sache ist die Einfachheit des Designs dieses Wagens. Es zwingt dem Layout keine Farben, Schriftarten oder Texturen auf. Jeder, der einen neuen Wagen von Grund auf neu bauen möchte, könnte hier anfangen, da er einfach aufzubauen und umzubauen ist.

Siehe Pen Responsive jQuery Shopping Basket von Khurram Alvi

Challenge-Wagen

Von Zeit zu Zeit tauchen neue CodePen-Herausforderungen auf, bei denen Entwickler aufgefordert werden, verschiedene Schnittstellen wie Anmeldeseiten oder modale Fenster zu erstellen. Dieser Stift von Ziga Miklic entstand aus einer Herausforderung für Warenkorb-UIs und ist ein Meisterwerk der Frontend-Entwicklung.

Wenn Sie Artikel zum Warenkorb hinzufügen/entfernen, werden Sie feststellen, dass die Preise automatisch mit einer kleinen Gleitanimation aktualisiert werden. Sie können auch auf ein beliebiges Produktbild klicken, um es ganz einfach aus dem Warenkorb zu entfernen. Diese kleinen Funktionen fügen der Benutzeroberfläche viel hinzu und machen das Klonen zum Kinderspiel.

Sogar die Checkout-Funktion hat eine eigene animierte Funktion, obwohl sie mit nichts im Backend verbunden ist.

Siehe Stift-Einkaufswagen [ CodePen Challange ] von Ziga Miklic

Schiebewagen-UI

Mit Registerkarten-Widgets können Sie Inhalte auf einer einzelnen Seite hinzufügen und den Benutzern die Kontrolle über diese Inhalte geben. In diesem verschiebbaren Warenkorb können Sie zwischen dem Warenkorb selbst und einer Liste gespeicherter „Favoriten“-Artikel wechseln.

Keine der Checkout-Funktionen funktioniert tatsächlich, sodass Sie keine Artikel in den Warenkorb legen oder Artikel hinzufügen/entfernen können. Aber die Schnittstellenelemente sind vorhanden, also würde ein wenig JavaScript-Magie das beheben. Trotzdem bin ich beeindruckt, wie sauber dieser Wagen aussieht und die einzigartige, aber benutzerfreundliche Registerkartenoberfläche.

Sehen Sie sich den Stift-Einkaufswagen (responsive) von Alex an

Dynamisches Geschäft und Einkaufswagen

Das Mischen von Geschäft und Einkaufswagen in einer Benutzeroberfläche ist eine schwierige Aufgabe, aber Olivia Cheng hat es mit diesem Stift geschafft.

Es verwendet breite Miniaturansichten in einem Raster, das mit einer Schaltfläche „In den Warenkorb“ beim Hover eingerichtet ist. Klicken Sie hier, um den obigen Artikel mit automatisch aktualisierten Preisen hinzuzufügen. Ein einzigartiges Merkmal ist die Menge, die oben auf dem Miniaturbild des Artikels hinzugefügt wird. Dies könnte auf einem echten Wagen verwirrend werden, aber wenn die Zahlen etwas kleiner wären, wäre dies eine großartige Möglichkeit, Platz zu sparen.

Siehe Pen Sliding Shopping Cart & Store von Olivia Cheng

Einkaufswagen reinigen

Entwickler Bart Veneman hat diesen sauberen Warenkorb als einfache Schnittstellenvorlage erstellt. Es berechnet automatisch den Gesamtpreis und enthält sogar Steuern in der Nähe des Checkout-Buttons.

Alle diese dynamischen Funktionen funktionieren über JavaScript und überraschenderweise verwendet dieser Stift Zepto über jQuery. Das ist großartig für Entwickler, die die Zepto-Bibliothek bevorzugen, aber wirklich jeder könnte diesen Code aufgreifen und ihn an jede Vorlage anpassen.

Siehe Pen Shopping Cart von Bart Veneman

Einfacher Warenkorb mit Vue.js

Die Frontend-Codierung mit Vue.js macht das Templating viel einfacher. Und dieser Stift ist ein Beispiel für einen dynamischen Warenkorb, der praktisch auf einer JavaScript-Grundlage aufgebaut ist.

Der Warenkorb wird mit jedem Klick automatisch aktualisiert, sodass Sie Artikel hinzufügen/entfernen und die Ergebnisse sofort sehen können. Die Schaltfläche oben rechts öffnet Ihren aktuellen Warenkorb in einem modalen Fenster mit der modalen Komponente von Bootstrap.

Wenn Ihnen die Vue.js-Syntax gefällt, dann ist diese Vorlage ein großartiger Ort, um mit dem Erstellen eines Einkaufswagens zu beginnen. Es ist einfach anzupassen und sollte in allen Browsern gut funktionieren.

Sehen Sie sich den Pen VueJS 2 Simple Shopping Cart von Cristian Matos an

Domain-Warenkorb

Hier ist eines meiner Lieblingsdesigns für Einkaufswagen, das einem Domain-Registrar nachempfunden ist. Coder Jesse Bilsten hat sich ausführlich mit dieser Schnittstelle befasst, einschließlich eines Zahlungsabschnitts und eines erforderlichen AGB-Bereichs.

Sie müssen auf die Schaltfläche „Ich stimme zu“ klicken, bevor Sie den Bestellvorgang abschließen. Es ist eine kleine, aber wertvolle Funktion für einige E-Commerce-Sites, und ich mag das zweispaltige Layout wirklich. Und dieses Design reagiert vollständig, sodass Sie es für die Verwendung in so ziemlich jedem E-Commerce-System klonen können.

Siehe Pen Responsive Shopping Cart – Marke v01 von Jesse Bilsten