Développer et personnaliser un panier basé sur ASP.NET avec nopCommerce

Un élément essentiel de la boutique en ligne est le panier d'achat. Il peut également s'agir de l'un des composants les plus difficiles à créer pour un site Web de commerce électronique. Les clients peuvent choisir des choses, évaluer leurs choix, les modifier, ajouter d'autres articles si nécessaire, puis acheter les articles à l'aide d'un panier. Lors du paiement, le programme produit normalement un total de commande qui tient compte des frais de port, d'emballage et de manutention ainsi que des taxes, le cas échéant.

Dans le cas de nopCommerce, un panier d'achat ainsi qu'une liste de souhaits sont intégrés. S'il est activé dans la zone d'administration, chaque produit peut être placé dans le panier ou la liste de souhaits. Le panier d'achat et la liste de souhaits nopCommerce peuvent être désactivés, la page de liste de contrôle d'accès peut être utilisée pour le configurer. Recherchez simplement les autorisations "Activer le panier" et "Activer la liste de souhaits" pour les profils client requis, et décochez-les.

Pour en savoir plus sur la fonctionnalité du panier d'achat, ainsi que sur le fonctionnement des autres composants de nopCommerce, nous vous recommandons de prendre le Formation nopCommerce , qui a été composé par l'équipe de développeurs principale.

Structure du panier d'achat de la plate-forme de commerce électronique .NET

Pour commencer, ouvrez et regardez la page du panier. Au début, il a une vue récapitulative de la commande avec les attributs de paiement sélectionnés, le prix, la quantité (qui peut être ajustée), le total pour chaque article ajouté et un bouton de suppression.

Ensuite, un client peut ajouter une estimation d'expédition, ainsi que sélectionner des attributs de paiement, et entrer des codes de réduction et des cartes-cadeaux. Enfin, une commande est calculée et il est proposé de passer à la caisse, où les clients entrent les informations de facturation et d'expédition et paient.

Soit dit en passant, les méthodes d'action liées au panier sont toutes placées dans le ShoppingCartController de Nop.Web. Ces méthodes permettent à un client d'interagir avec tous les composants de la page.

Décomposons tous les composants principaux de la fonctionnalité de panier d'achat nopCommerce. Il comprend les attributs de paiement, les remises et les boîtes de cartes-cadeaux, l'étape des totaux et le processus de paiement. Il est également important de considérer une structure de base de données.

Attributs de paiement

En commençant par les attributs de paiement, ils sont affichés sur la page du panier et offrent la possibilité d'offrir plus de services aux clients, comme l'emballage cadeau, avant de passer la commande.

Les attributs de paiement ont leurs propres classes de service dans le dossier Nop.Services.Orders et sont stockés au format XML dans la colonne CheckoutAttributesXml de la table Order. Ils ont tous presque les mêmes fonctionnalités que les attributs de produit.

Classe CheckoutAttributeServiceCheckoutAttributeService class

Colonne CheckoutAttributesXml

Boîte de réduction

La prochaine fonctionnalité du panier est la boîte de réduction. Il permet à un client d'entrer un code de coupon pour appliquer une réduction au total de la commande ou à l'expédition. La fonctionnalité de remise a son propre dossier qui se trouve dans la section Nop.Services. Toutes les règles et la logique d'un processus de mise en œuvre d'une remise peuvent y être ajustées.

En ce qui concerne la base de données, les remises elles-mêmes sont stockées dans la table Discount. Il existe également quelques tables de mappage qui stockent la façon dont les remises sont mappées aux produits, fabricants et catégories. La table DiscountRequirement stocke les exigences de remise déterminant dans quel cas une remise doit être appliquée. La dernière table est la table DiscountUsageHistory qui stocke des informations sur les remises appliquées aux commandes.

Coffret carte cadeau

L'autre composant du panier est la boîte de carte-cadeau. Un client doit entrer le code ici pour appliquer une carte-cadeau. Une carte-cadeau est un type de produit particulier. Vous pouvez marquer un produit comme carte-cadeau sur la page de détails du produit et vendre des cartes-cadeaux que les clients peuvent utiliser de cette façon. Une fois que les clients ont effectué leurs achats avec les produits de cartes-cadeaux, vous pouvez rechercher et afficher la liste de toutes les cartes-cadeaux achetées ici.

Si vous avez besoin de configurer la fonctionnalité de carte-cadeau, vous pouvez utiliser la classe GiftCardService, qui se trouve dans le dossier Nop.Service.Orders.

Compte tenu de la base de données, les cartes-cadeaux créées manuellement ou achetées en tant que produits sont stockées dans la table GiftCard. Une fois qu'une carte-cadeau est utilisée dans la commande, l'enregistrement approprié est inséré dans la table GiftCardUsageHistory de la base de données.

Un client peut appliquer à la fois une réduction et une carte-cadeau sur la page du panier.

Totaux

Le dernier bloc intéressant sur la page du panier est le total du panier. Ils sont calculés en fonction des articles du panier, des remises et des taxes appliquées, de l'expédition choisie et des modes de paiement. Un total se compose de quelques lignes :

1. Total. Le sous-total est le total de tous les articles et quantités dans le panier, y compris les promotions d'articles appliquées ;
2. L'expédition est le coût d'expédition calculé en fonction de l'adresse de livraison du client ;
3. Ensuite, les taxes appliquées sont affichées. nopCommerce fournit des plugins fiscaux qui permettent d'appliquer manuellement ou automatiquement des taxes aux produits ;
4. La ligne de frais supplémentaires du mode de paiement est auto-descriptive. Il peut être paramétré sur la page de configuration du moyen de paiement ;
5. Ensuite, il affiche les remises et les cartes-cadeaux appliquées ;
6. Les points de récompense si appliqués ;
7. Et enfin vient le total de la commande.

Les totaux des commandes sont calculés dans OrderTotalCalculationService de Nop.Services.Orders. Comme vous pouvez le voir, il contient des méthodes telles que GetShoppingCartShippingTotal, GetTaxTotal, les méthodes liées aux points de récompense, aux remises et autres. À son tour, les frais supplémentaires du mode de paiement sont calculés dans le service de paiement de Nop.Services.Payments.

Processus de paiement

Pour une vision plus claire de l'ensemble de l'expérience d'achat, il est important de considérer le processus de paiement. Le paiement commence lorsque le client quitte le panier pour procéder au paiement et à l'expédition.

nopCommerce propose deux types de conception de processus de paiement. Il s'agit d'un paiement sur une page, qui est défini par défaut, et d'un paiement avec plusieurs pages. Le paiement sur une page permet à un client de parcourir l'ensemble du processus de paiement en utilisant une seule page. Vous pouvez le configurer sur la page des paramètres de commande. Au fait, vous pouvez désactiver temporairement le paiement pour vos clients si nécessaire dans la même section de paiement.

Un client passe par les étapes suivantes lors du processus de paiement :

1. Un client doit entrer une adresse de facturation ;
2. Puis adresse de livraison ;
3. Ensuite, ils doivent choisir une méthode d'expédition ;
4. Et un moyen de paiement ;
5. Ensuite, nous montrons les informations de paiement requises au client ;
6. Et enfin, c'est l'étape de confirmation où le client confirme la commande.

D'autres conditions ont un impact sur le nombre d'étapes de paiement. Ils peuvent être ajustés dans les paramètres de la commande.

Toutes les méthodes d'action liées au processus de paiement sont placées dans le CheckoutController. Comme vous pouvez le voir, ce contrôleur a des régions distinctes : pour le paiement en plusieurs étapes et le paiement en une page. Les méthodes de paiement en plusieurs étapes renvoient des vues, tandis que les méthodes de paiement sur une page renvoient JSON en conséquence. Il n'y a pas de service distinct qui gère le processus de paiement. Tout le travail est effectué dans le contrôleur.

Exploitation de la base de données du panier d'achat ASP.NET

Dans nopCommerce, un panier et une liste de souhaits ont la même structure. Pour plus de compréhension, il est préférable de regarder la base de données. Dans la table ShoppingCartItem, les éléments du panier et de la liste de souhaits sont stockés ensemble. Cependant, ils se distinguent par ShoppingCartTypeId.

De plus, en regardant le dossier "Domain - Orders", on peut voir l'énumération ShoppingCartType qui fournit deux types : ShoppingCart et Wishlist, avec les valeurs numériques appropriées. Il s'agit des valeurs stockées dans la colonne ShoppingCartTypeId de la base de données. C'est la seule différence entre un panier et une liste de souhaits dans les termes de la base de données.

Les autres champs représentent l'identifiant du client sous la forme d'une clé étrangère. Il s'agit de l'identifiant d'un client qui a ajouté cet article au panier. De plus, il y a ProductId qui identifie quel produit a été ajouté au panier, qui est suivi de StoreId représentant le magasin de ce produit. De plus, ShoppingCartTypeId dont nous avons déjà parlé détermine si le client a ajouté cet article au panier ou à la liste de souhaits.

Vient ensuite la colonne AttributesXml. Cette colonne stocke la configuration du produit ajouté au panier avec tous les attributs choisis par un client. Voici le processus de fonctionnement de ce XML :

1. ouvrez n'importe quelle page de produit et choisissez deux attributs de ce produit ;
2. ajouter le produit au panier ;
3. sélectionnez les 1000 premières lignes de ShoppingCartItem ;
4. cliquez sur une cellule sous AttributesXML ;
5. vous verrez le premier attribut avec l'ID 9 et une valeur de 21, ainsi que le second avec l'ID 10 et une valeur de 25.

C'est ainsi que les attributs de produit choisis sont stockés. Pour analyser ces XML, il existe une classe spéciale nommée ProductAttributeParser située dans le dossier Nop.Services Catalog. Cette classe manipule les XML d'attributs de produit. Par exemple, en utilisant la méthode ParseProductAttributes, il crée un XML basé sur les attributs choisis lorsqu'un client ajoute le produit au panier.

Comme vous pouvez le voir, cette méthode accepte un formulaire de la page de détails du produit. Il est également utilisé pour recalculer le prix du produit lorsque les valeurs d'attribut sont modifiées sur la page de détails du produit (méthode GetUnitPriceAsync). Ainsi, dans cette classe, vous pouvez trouver les méthodes fonctionnant avec des enregistrements XML d'attribut de produit. Il manipule également les combinaisons d'attributs de produits, les dates de location et les attributs des cartes-cadeaux.

Une autre colonne importante est CustomerEnteredPrice. Il est utilisé lorsque l'option "Le client saisit le prix" est disponible pour un certain produit. La colonne Quantité est assez auto-descriptive, car elle montre la quantité choisie d'un produit. Les colonnes RentalStartDate et RentalEndDate sont utilisées lorsque le type de produit est location. Enfin, les dates CreatedOn et UpdatedOn sont explicites.

Conclusion

Le panier nopCommerce est un composant structuré et flexible. Sur la base des informations de cet article, vous pouvez créer et configurer efficacement un site Web avec un panier d'achat avancé et une liste de souhaits à l'aide de la plateforme nopCommerce.

Il n'est pas nécessaire de tout créer à partir de zéro, cela vous permet donc de vous concentrer uniquement sur les exigences spécifiques de votre entreprise de commerce électronique. L'une des raisons en est que le panier d'achat nopCommerce possède les fonctionnalités les plus utilisées, telles que l'estimation de l'expédition, les attributs de paiement et la mise en œuvre d'une carte-cadeau et d'une remise.

Enfin, la structure de la base de données vous permet de mettre à jour le type de données de panier qui doit être stocké et géré. Vous pouvez également trouver ces détails dans notre documentation sous le Schéma de base de données par défaut section.