👑 Niveau 22 - Checkout et achat
Il ne reste qu'une étape: les achats!
Dans ce niveau, la façon de procéder à un achat vous est présentée, mais l'implémentation est à faire au complet par vous. Je vous recommande de faire cette partie directement dans votre projet.
Séquence d'un achat
La séquence menant à une transaction sur un site de commerce électronique est la suivante:
- Afficher le contenu du panier
- Cliquer sur un bouton du genre "Passer à la caisse"
- Le checkout, soit afficher le récapitulatif de la commande et demander les informations du client (ex.: adresse de livraison)
- Procéder à la transaction
- Afficher la confirmation de la commande

Dans votre cas, sur la page de checkout
, on ne demandera pas d'informations supplémentaires, on se contentera d'afficher les informations du client et le récapitulatif de la commande.
Contrôleur Achats
- Créez un contrôleur
AchatsController
- Créez trois fonctions de base:
Checkout
,Create
etConfirmation
Snowfall.Web.Mvc/Controllers/AchatsController.cs[Route("[controller]")]
public class AchatsController : Controller
{
public async Task<IActionResult> Checkout()
{
// 1. Obtenir le contenu du panier de la session
// 2. Récupérer les produits associés au panier à partir de la BD
// 3. Récupérer l'utilisateur connecté et ses informations
// 4. Effectuer les calculs nécessaire
// 4. Construire un ViewModel qui contient les informations à afficher
// 5. Afficher la vue `Checkout` associée
return View();
}
[HttpPost]
[Authorize]
[ValidateAntiForgeryToken]
public async Task<IActionResult> Create()
{
// 1. Obtenir le contenu du panier de la session
// 2. Récupérer les produits associés au panier à partir de la BD
// 3. Récupérer l'utilisateur connecté et ses informations
// 4. Construire votre modèle d'achat et sauvegarder dans la BD (Utilisez une transaction pour la sauvegarde!)
// 5. Vider le panier de la session
// 7. Rediriger vers la page de confirmation avec le Id de l'achat
// Ce Ok() n'est que pour satisfaire le compilateur
return Ok();
}
[HttpGet("{id}")]
[Authorize]
public async Task<IActionResult> Confirmation(int id)
{
// 1. Récupérer l'achat correspondant au Id à l'aide du service et récupérer autres détails pertinents
// 2. Passer à la vue les informations requises pour afficher le détail de l'achat.
return View();
}
}
De panier à checkout
- Dans votre panier, vous devriez avoir un bouton permettant de passer à la caisse (checkout). Par exemple:
Snowfall.Web.Mvc/Views/Panier/Index.cshtml
@model Snowfall.Web.Mvc.Models.Panier.PanierItemViewModel
@{
ViewBag.Title = "Panier";
}
<h2>Panier</h2>
@if(Model != null && Model.evenement != null)
{
<ul>
<li>Item Id: @Model.ItemId</li>
<li>Événement: @Model.evenement.Nom</li>
<li>Prix: @Model.evenement.Prix</li>
</ul>
}
@if (Context.Session.GetString("panier") != null)
{
<a asp-controller="Achats" asp-action="Checkout" class="btn btn-primary mb-3">Passer à la caisse</a>
}
<form asp-action="Clear" asp-controller="Panier">
<button type="submit" class="btn btn-secondary">Annuler</button>
</form> - Associée à l'action
Checkout
du contrôleurAchats
, ajouter une vueCheckout
Snowfall.Web.Mvc/Views/Achats/Checkout.cshtml@{
ViewBag.Title = "Confirmer votre achat";
Layout = "_Layout";
}
<h2>Confirmer votre achat</h2> - Cela devrait vous permettre de basculer entre votre panier et la page de
checkout
.http://localhost:4200 - Votre page
Checkout
devra contenir un bouton vers votre actionCreate
du contrôleurAchats
afin de passer la commande.Snowfall.Web.Mvc/Views/Achats/Checkout.cshtml@{
ViewBag.Title = "Confirmer votre achat";
Layout = "_Layout";
}
<h2>Confirmer votre achat</h2>
<p>Informations sur l'achat...</p>
<form class="d-inline" asp-controller="Achats" asp-action="Create">
<button class="btn btn-primary">Confirmer</button>
</form>
À compléter
Le reste est à compléter de votre côté. Comme mentionné, je vous suggère de le faire dans votre projet directement.
Bien que pas exactement pareil comme votre site de commerce électronique, voici un bref aperçu de la séquence un peu plus complète.
