Créer un magasin en ligne sans bases de données avec SimpleCart (js)

Les systèmes d'achat sont souvent des systèmes lents et volumineux qui peuvent être assez exigeants. Les exceptions sont les plug-ins de blog (c'est-à-dire WordPress), mais même ceux-ci nécessitent un contrôle avancé sur les installations de votre serveur Web et de votre base de données..

En bref, beaucoup de travail, de fichiers et vraiment difficile à utiliser avec un espace web gratuit (limité).

Aujourd'hui, nous allons discuter d'une alternative. C'est gratuit, super léger, et nécessite une approche légèrement différente. Autrement dit, il n'y a pas d'interface utilisateur graphique permettant d'ajouter des éléments de boutique avec le panier d'achat de ce site Web. Au lieu de cela, vous devez insérer des balises simples dans votre code HTML. Ne t'inquiète pas, nous te dirons comment.

simpleCart (js)

L'interface de l'utilisateur final est lisse, simple et directe. Les produits de ce site Web sont alignés dans une grille contenant des icônes relativement grandes, une explication du produit et son prix. Le webmaster peut éventuellement ajouter différentes options pour un produit, à savoir des t-shirts petits, moyens et grands. En raison de son accumulation, simpleCart convient mieux à l'affichage d'un agencement de produit plus petit et relativement statique, parfaitement adapté aux vendeurs amateurs..

Le panier est généralement affiché en bas de la page, mais vous pouvez le placer où vous voulez. Ici, l'acheteur peut consulter les produits déjà sélectionnés, modifier la quantité ou vider la carte..

Lorsque vous êtes satisfait, appuyez sur le bouton Checkout pour amener l’acheteur à Paypal ou à Google Checkout, à partir duquel vous effectuez un transfert d’argent sur votre compte. Vous recevrez une notification lorsque vous recevrez l'argent, où vous pourrez ensuite expédier les produits. Aussi simple que cela.

Configurer SimpleCart sur votre site Web

Tout d’abord, assurez-vous que vous avez un site Web de base capable d’exécuter JavaScript (ce que la plupart peuvent faire) et un peu d’espace Web pour le reste des fichiers. Vous pouvez télécharger simpleCart (js) à partir du site Web. C'est un don, vous pouvez donc choisir vous-même si vous l'aimez et combien vous pensez que cela en vaut la peine.

Décompressez le fichier et téléchargez simpleCart.js dans le répertoire de votre site. La configuration est complétée par l'insertion d'un peu de code dans les fichiers HTML de votre site Web. Chaque fois que des extraits de code sont insérés, les composants spécifiques de simpleCart s'affichent..

Ajoutez ceci à chaque page, entre les

et

balises, où vous voulez utiliser simpleCart.

 simpleCart.checkoutTo = PayPal; simpleCart.email = "[email protected]"; 

Ajoutez ce qui précède pour faire un paiement simple en utilisant Paypal. Vous devez également spécifier votre adresse mail Paypal. Modifiez les éléments en vert et collez le fragment entier entre le

et

balises, où vous voulez utiliser la caisse.

 simpleCart.checkoutTo = GoogleCheckout; simpleCart.merchantId = "111111111111111"; 

Si vous souhaitez plutôt utiliser Google Checkout, collez l'extrait de code ci-dessus entre le

et

balises, où vous voulez utiliser la caisse. Au lieu de votre adresse e-mail, remplacez l'élément vert par votre identifiant de marchand Google Checkout..

 
 Nom du produit 
   Petit moyen grand   

35,99 $

  Ajouter au panier  

L'extrait de code ci-dessus est utilisé pour ajouter un article à votre étagère. Modifiez le nom et le prix de l'article en vert. La classe de sélection, affichée en bleu, est entièrement facultative. S'il n'y a pas de sous-classes dans votre produit, vous pouvez le laisser de côté. Collez-le entre le

et

tags, où que vous vouliez le montrer sur votre page.

Collez ceci entre le

et

balises, où vous souhaitez afficher le panier complet du site Web.

Vous avez des articles dans votre panier. Total du panier: 

Caisse vide

Les éléments ci-dessus affichent respectivement le nombre d'articles dans votre panier, le total du panier, un lien de paiement et un lien de panier vide. Chaque élément peut exister indépendamment.

Consultez la documentation pour connaître les paramètres plus avancés, notamment les options de devise, les taux d’imposition, les frais d’expédition et la modification du format du panier..

Que pensez-vous de SimpleCart (JS)? Avez-vous déjà vendu quelque chose en ligne sur votre propre site et comment cela s'est-il passé? Faites le nous savoir dans les commentaires!

Crédit image: Shutterstock