Mise à jour du nombre d'articles dans un panier - Index ? Layout ? comment structurer ?

**AMP29** · 25/01/2025, 20h09

Bonjour,

J'ai construit un panier (commerce, Asp Net MVC)
Dans la navbar, j'ai une icône avec un badge pour afficher le nombre d'articles dans le panier.

Nom : panier_icone_01.png
Affichages : 64
Taille : 1,2 Ko

Nom : panier_icone_01.png
Affichages : 64
Taille : 1,2 Ko

Je ne rencontre pas de problème pour actualiser le nombre d'articles dans le badge depuis les pages qui modifient ce nombre.
C'est à dire la page du produit (ajout dans le panier) et le panier lui-même (retrait du panier).

Maintenant, il faut que le nombre d'articles soit conservé et affiché sur toutes les pages.

Je me suis donc dit que je devais coder cela dans ma vue 'layout'.
C'est effectivement ce que j'ai vu faire.

Suivant les conseils lus, j'ai créé une vue partielle '_NbPanierPartial' spécialement pour l'icône du panier et son badge.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
<ul class="navbar-nav navbar-right">
    <li class="nav-item">
        <a asp-area="" asp-controller="Panier" asp-action="Panier" class="fa-solid fa-cart-shopping" title="Voir le panier"></a>
        <span class='badge badge-warning' id='lblCartCount' ></span>
    </li>
</ul>

Cette vue partielle est appelée par la vue partielle '_LoginPartial', elle-même appelée par la vue partielle '_Layout'.
Mais, actuellement, la récupération des informations du panier se fait dans la vue Index :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
@section Scripts{
    <script>
        $(function () {
            $.ajax({
                url: '@Url.Action("GetNbPanier","Panier")',
                data: {},
                success: function (result) {
                    if (result != 0) document.getElementById('lblCartCount').innerHTML = result;
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    alert(xhr.responseText);
                }
            });
        })
 
    </script>
 }

Car rien de fonctionne quand je mets ce code dans la vue partielle '_NbPanierPartial'.
C'est ça le problème.

Quand je place le script dans la vue partielle '_NbPanierPartial', soit j'ai une erreur "$ is not defined", JQuery n'est pas encore chargé, soit, si je nomme la fonction 'CheckPanier' (que je la place dans une '@section Scripts') et que je l'appelle ainsi :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
@section Scripts{
    <script>
        function CheckPanier() {
            $.ajax({
                url: '@Url.Action("GetNbPanier","Panier")',
                data: {},
                success: function (result) {
                    if (result != 0) document.getElementById('lblCartCount').innerHTML = result;
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    alert(xhr.responseText);
                }
            });
        }
   </script>
}

<ul class="navbar-nav navbar-right">
    <li class="nav-item">
        <a asp-area="" asp-controller="Panier" asp-action="Panier" class="fa-solid fa-cart-shopping" title="Voir le panier"></a>
        <span class='badge badge-warning' id='lblCartCount' ></span>
        <script>CheckPanier()</script>
    </li>
</ul>

j'ai une erreur "CheckPanier is not defined".

La fonction doit être placée dans une '@section Scripts' de la vue partielle '_NbPanierPartial' pour que JQuery soit auparavant chargé (d'après ce que j'ai lu), mais si j'ouvre une section dans la vue partielle '_NbPanierPartial', la fonction (si je la nomme) 'CheckPanier' n'est pas reconnue dans la vue partielle '_NbPanierPartial'.

Ma question est : où et comment placer la fonction de récupération du nombre d'articles du panier ?
Ce code doit être exécuté par la vue partielle '_NbPanierPartial' au moment de son chargement.

Merci pour votre aide

**AMP29** · 25/01/2025, 22h13

Est-ce que c'est grave si :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
    <script src="~/lib/jquery/dist/jquery.min.js"></script>

est placé dans le Layout dans le '<head>' (avec les <link>) au lieu d'être placé après la balise '</footer>' comme tous les autres ?

Parce que sinon, le script de ma vue partielle placée dans le Layout fonctionne sur toutes les pages, et mon problème est résolu.

Vu sur https://developer.mozilla.org/fr/doc...L/Element/head
Nom : head_compatibles.png
Affichages : 44
Taille : 9,7 Ko

Nom : head_compatibles.png
Affichages : 44
Taille : 9,7 Ko

J'attends un peu vos remarques ou conseils éventuels avant de clore ce sujet.
Merci

**popo** · 27/01/2025, 09h58

Non, ce n'est pas grave.
Je dirais même que c'est mieux.

L'explication est simple, on charge les scripts avant de les utiliser.
Si tu places un script dans le <FOOTER> qui, par définition, est en bas de page, il sera pris en après les élément placés au dessus.

Mise à jour du nombre d'articles dans un panier - Index ? Layout ? comment structurer ?

ASP.NET

Discussions similaires

Partager

Partager