Aller au contenu principal

👑 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:

  1. Afficher le contenu du panier
  2. Cliquer sur un bouton du genre "Passer à la caisse"
  3. Le checkout, soit afficher le récapitulatif de la commande et demander les informations du client (ex.: adresse de livraison)
  4. Procéder à la transaction
  5. Afficher la confirmation de la commande
http://localhost:4200

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

  1. Créez un contrôleur AchatsController
  2. Créez trois fonctions de base: Checkout, Create et Confirmation
    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

  1. 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>
  2. Associée à l'action Checkout du contrôleur Achats, ajouter une vue Checkout
    Snowfall.Web.Mvc/Views/Achats/Checkout.cshtml
    @{
    ViewBag.Title = "Confirmer votre achat";
    Layout = "_Layout";
    }

    <h2>Confirmer votre achat</h2>
  3. Cela devrait vous permettre de basculer entre votre panier et la page de checkout.
    http://localhost:4200
  4. Votre page Checkout devra contenir un bouton vers votre action Create du contrôleur Achats 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.

http://localhost:4200