1 pièce(s) jointe(s)
Mise à jour du nombre d'articles dans un panier - Index ? Layout ? comment structurer ?
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.
Pièce jointe 663878
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:
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:
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:
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
