10 exemples d'interface utilisateur de panier d'achat CSS et JavaScript gratuits

Les chariots de commerce électronique doivent être utilisables et accessibles pour tous les visiteurs. Votre objectif est d'augmenter les conversions et de garder les gens engagés lors du paiement, et la meilleure façon d'y parvenir est d'utiliser un design épuré qui encourage l'activité des utilisateurs.

Il existe de nombreux paniers d'achat open source gratuits que vous pouvez relooker à n'importe quelle fin. Et nous avons pris la liberté de rassembler nos favoris dans cette collection.

Chariot plat

On ne peut nier la popularité du design plat. Cela fonctionne pour tous les types de sites Web et aide les concepteurs à se concentrer davantage sur la convivialité plutôt que sur l'esthétique.

C'est pourquoi ce chariot plat constitue une excellente ressource pour quiconque crée une page de paiement de commerce électronique. Les couleurs sont faciles à mettre à jour et les fonctionnalités de l'interface fonctionnent de la même manière quel que soit le style de mise en page.

Je ne pense pas que le design plat soit la solution pour chaque projet, mais dans le bon scénario, ce stylo peut bien fonctionner comme modèle de départ.

Voir le Pen Flat Cart [codepen comp] de Will Paige

Interface utilisateur sans tableau

De nombreuses pages de paiement utilisent des tableaux pour organiser les données, mais cet exemple d'Alex Rodrigues utilise des DIV à la place.

Il est entièrement réactif, de sorte que la mise en page devrait être superbe, quel que soit l'appareil que vous utilisez. Chaque ligne contient suffisamment de données pour relooker correctement et garder tout organisé, même sur de très petits écrans. Et le code CSS utilise Compass pour gagner du temps avec des polices Google gratuites pour un peu de style.

Voir le panier d'achat sans table Pen Responsive par alex rodrigues

Délicieux panier

Je ne peux pas imaginer que cela fonctionne sur un vrai site, mais en tant qu'expérience UI/UX, c'est plutôt cool. Le panier éponyme Delicious Shopping Cart agit comme une boulangerie/confiserie en ligne avec des photos de différents desserts.

Vous pouvez déplacer votre curseur vers la gauche/droite pour avancer dans le carrousel ou glisser sur un appareil mobile. Chaque article a des icônes plus/moins pour ajouter des articles ou les supprimer de votre commande, plus une icône « X » pour le supprimer entièrement de votre panier.

Le tout est construit sur Sass, Slim et jQuery, c'est donc un sacré projet frontal ! Si vous cherchez à disséquer du bon code, cet exemple vaut la peine d'être conservé.

Voir le panier Pen Delicious de Didier

Conception réactive

Voici une autre interface utilisateur de panier d'achat simple et réactive construite sur Sass et sans table.

J'aime un peu plus cette caisse réactive que les autres car les points d'arrêt semblent plus naturels. Même sur des écrans plus petits, les articles du panier ne se sentent pas à l'étroit ou hors de propos.

Tous les boutons "supprimer" fonctionnent via JavaScript, et les champs de saisie numériques mettent automatiquement à jour les prix. C'est idéal pour une page de panier frontale où l'acheteur peut vouloir augmenter les quantités avant de payer et voir une estimation des coûts totaux.

Voir le panier d'achat réactif Pen par Justin Klemm

Panier jQuery

Ce stylo agit plus comme une structure filaire que comme une page de paiement complète, mais il est parfait comme point de départ. Le développeur Khurram Alvi a créé ce panier d'achat réactif avec HTML/CSS de base et un peu de jQuery.

Il est entièrement réactif et les entrées de quantité fonctionnent comme prévu. Une bonne chose est la simplicité de la conception de ce chariot. Il n'impose aucune couleur, police ou texture dans la mise en page. Quiconque cherche à construire un nouveau chariot à partir de zéro peut commencer ici car il est facile à construire et à restructurer.

Voir le panier Pen Responsive jQuery de Khurram Alvi

Chariot défi

De temps en temps, de nouveaux défis CodePen apparaissent, demandant aux développeurs de créer différentes interfaces comme des pages d'inscription ou des fenêtres modales. Ce stylo de Ziga Miklic est issu d'un défi pour les interfaces utilisateur de panier d'achat et c'est un chef-d'œuvre de développement frontal.

Lorsque vous ajoutez/supprimez des articles du panier, vous remarquerez que les prix sont automatiquement mis à jour avec une petite animation glissante. Vous pouvez également cliquer sur n'importe quelle image de produit pour la supprimer facilement du panier. Ces petites fonctionnalités ajoutent beaucoup à l'interface et facilitent le clonage.

Même la fonction de paiement a sa propre fonctionnalité animée, bien qu'elle ne soit connectée à rien sur le backend.

Voir le panier Stylo [ CodePen Challenge ] par Ziga Miklic

Interface utilisateur du chariot coulissant

Les widgets à onglets vous permettent d'ajouter du contenu sur une seule page et donnent aux utilisateurs le pouvoir sur ce contenu. Dans ce panier coulissant, vous pouvez basculer entre le panier lui-même et une liste d'articles "favoris" enregistrés.

Aucune des fonctionnalités de paiement ne fonctionne réellement, vous ne pouvez donc pas mettre en favoris ou ajouter/supprimer des articles dans le panier. Mais les éléments d'interface sont en place, donc un peu de magie JavaScript résoudrait cela. Pourtant, je suis impressionné par la propreté de ce chariot et par l'interface à onglets unique mais utilisable.

Voir le panier Pen (responsive) par Alex

Magasin et panier dynamiques

Mélanger le magasin et le panier dans une seule interface est un travail difficile, mais Olivia Cheng l'a fait dans ce stylo.

Il utilise de larges vignettes dans une grille configurée avec un bouton "ajouter au panier" en survol. Cliquez dessus pour ajouter l'article ci-dessus avec des prix de mise à jour automatique. Une caractéristique unique est la quantité ajoutée en haut de la vignette de l'article. Cela pourrait prêter à confusion sur un vrai chariot, mais si les nombres étaient un peu plus petits, ce serait un excellent moyen d'économiser de l'espace.

Découvrez le panier et le magasin Pen Sliding par Olivia Cheng

Nettoyer le panier

Le développeur Bart Veneman a créé ce panier propre en tant que modèle d'interface simple. Il calcule automatiquement le prix total et inclut même les taxes près du bouton de paiement.

Toutes ces fonctionnalités dynamiques fonctionnent via JavaScript et, étonnamment, ce stylet utilise Zepto sur jQuery. C'est idéal pour les développeurs qui préfèrent la bibliothèque Zepto, mais tout le monde peut vraiment récupérer ce code et le retravailler pour l'adapter à n'importe quel modèle.

Voir le panier Pen de Bart Veneman

Panier simple avec Vue.js

Le codage frontal avec Vue.js rend la création de modèles beaucoup plus simple. Et ce stylo est un exemple de panier dynamique pratiquement construit sur une base JavaScript.

Le panier se met à jour automatiquement à chaque clic afin que vous puissiez ajouter/supprimer des articles et voir les résultats instantanément. Le bouton en haut à droite ouvre votre panier actuel dans une fenêtre modale à l'aide du composant modal de Bootstrap.

Si vous aimez la syntaxe Vue.js, ce modèle est un excellent endroit pour commencer à créer un panier. Il est facile à personnaliser et devrait bien fonctionner dans tous les navigateurs.

Voir le panier Pen VueJS 2 Simple par Cristian Matos

Panier de domaine

Voici l'un de mes modèles de panier d'achat préférés inspiré d'un registraire de domaine. Le codeur Jesse Bilsten a été détaillé avec cette interface comprenant une section de paiement et une zone T&C requise.

Vous devez cliquer sur le bouton "J'accepte" avant de terminer le processus de paiement. C'est une fonctionnalité mineure mais précieuse pour certains sites de commerce électronique, et j'aime beaucoup la disposition en deux colonnes. Et cette conception est totalement réactive, vous pouvez donc la cloner pour l'utiliser dans à peu près n'importe quel système de commerce électronique.

Voir le panier d'achat réactif au stylet - Marque v01 par Jesse Bilsten