JS : Gérer un panier e-commmerce avec le localstorage
HTML-код
- Опубликовано: 7 окт 2024
- Suivez nous sur les différents canaux :
Les lives sur twitch : / trainingdev
Les replays sur la chaine youtube : / @trainingdev
les cours et replay sur notre site : www.training-d...
le discord, pour venir discuter de développement avec nous : / discord
notre compte linkedin, pour rester informé des dernières actualités : / training-dev
Merci beaucoup pour vos explications honnêtement ça m'as permis de résoudre un problème auquel je suis confronté depuis plusieurs jours, il me manquait un bout de reflexion et regarder votre vidéo m'a permis de comprendre ce qui me manquait, merci beaucoup !!
J'ai rarement eu des explications aussi directes et compréhensibles. Merci beaucoup
Les explications sont vraiment très claires. C'est le format de vidéo que je préfère. Cas concret, code et gestion des erreurs en direct. Merci encore pour ce travail !
Des explications vraiment très claires, je te remercie infiniment pour avoir pris de ton temps afin d'expliquer précisément cette notion. 👍
Le passage du procédural à l'orienté objet est mémorable ! ;)
Ce qui est sympa et pratique aussi avec les class est la notion d'héritage...
Superbes explications, comme dab'
Merci
Cette vidéo apaise mon âme et répond à mes questions, merci.
Les explications sont très claires et détaillées , j'adore
Merci pour ce tuto de qualité et pédagogique sur le Localstorage
un grand merci, j'étais un peu perdu
sur mon projet , vous m'avez grandement aidé.
Merci pour ce tuto, il m'a été d'une grande aide !
Merci super exemple de panier
super enrichissant et compréhensible! merci
C'est vraiment impressionnant de maîtrise ! J'espère un jour être capable d'être aussi doué 🙂
Merci, il n'y a rien d'exceptionnel, juste un peu de réflexion et d'expérience en développement. Tout le monde est capable d'arriver à ce niveau assez rapidement.
Clair net et précis en toute humilité
La classe !
clair et limpide, merci beaucoup !!
Slt, merci pour ces explications sur le localstorage
Avec plaisir 👍
Top !!! merci super clair :-), juste un bémol pour moi sur l'orienté objet il ne reconnait pas la function changeQuantity :-(, une étape a dû m'échapper. Merci en tout cas je vais avancer rapidement sur mon projet grâce à cette vidéo
J'adore vraiment super merci ! ! un peu rapide mais bon je suis pareil quand je dev.. xD
merci !
Au top
merci beaucoup pour la vidéo, mais bon je galère encore ahah
c'est jamais simple au debut, mais faut s'accrocher ça va venir a force ;)
Merci pour cette vidéo. J'ai rarement trouvé quelqu'un qui explique aussi bien pourquoi il fait ce qu'il fait ! On comprend super bien chaque étape et la gestion des erreurs... génial !
Par contre, il y a un truc qui me chiffone sur toutes ces fonctions autour du panier...
En situation réelle, on remplit le panier à partir des pages produits.
Et on le modifie + consulte le total, à partir de la page panier.
Donc on n'écrit pas tout ça dans le même fichier, si on a un fichier js par page (c'est mon cas dans le projet sur lequel je suis - dans le cadre d'une formation, donc pas le choix).
Je suppose qu'on peut découper tout ce que tu as écrit là pour le dispatcher sur les 2 fichiers, mais... pas sûre de savoir quoi garder dans le code propre à la page panier pour qu'elle fonctionne bien ?
Et aussi, il faut l'élément déclencheur (bouton...) pour remplir le panier. Du coup, c'est un aspect qui manque ici dans la vidéo : que toute cette magnifique classe puisse être déclenchée par un click.
Je pense pouvoir trouver comment imbriquer les deux, mais ça aurait été cool que tu l'intègres dans ton code. Vu comment tes explications sont hyper agréables à écouter, et tellement claires.
je viens de voir ton autre réponse sur la gestion des événements où tu renvoies à l'autre vidéo. Je comprends que tu ne rééxplique pas ici, mais ça n'empêche pas de l'intégrer (sans explications), pour voir où on situe la gestion du panier par rapport à l'événement click.
@@acm-creations Bonjour, merci pour ce retour. Dans l'idée, il faudrait garder toutes ces fonctions fans un fichier a part, cat elles peuvent servir a plusieurs endroits du site. Rien n'empêche de charger plusieurs fichiers js sur une même page html, et les fonctions d'un fichier js peuvent très bien être appelées dans un autre fichier js.
@@trainingdev merci pour ta réponse rapide !
Je vais chercher comment on fait pour appeler une fonction d'un fichier js dans un autre.
J'ai un souci avec la vidéo, qui ne veut plus se lire (aucun souci de mon côté ni avec mon navigateur ni avec youtube : ça fonctionne parfaitement pour d'autres vidéos). Est-ce qu'il y a un souci de votre côté ?
Je n'ai regardé la vidéo qu'une fois, et n'ai pas encore vu comment adapter le principe d'écriture à mon cas de figure... Penses-tu que vous allez mettre le cours sur le site sous forme d'article, avec le code, comme pour d'autres notions ?
@@trainingdev ah oui, tiens, tant que je suis dans les retours, ça serait bien à la fin de bien remontrer l'ensemble de la classe, sans scroller trop vite, après que tu as montré que tout fonctionne bien. Car finalement, tu changes les noms et tout, et à aucun moment on ne voit la classe entière bien écrite.
J'imagine que quand on fait une vidéo, c'est pas évident de penser à tous ces petits détails ;-) Mais qui peuvent être super utiles pour les personnes qui te suivent et qui n'ont pas encore assez d'expérience.
@@acm-creations pour appeler la fonction, c'est pareil que si elle était dans le même fichier. Pas de soucis de mon côté pour revoir la vidéo. Elle est aussi accessible sur le site : www.training-dev.fr/Cours/Gerer-un-panier-avec-le-localStorage
Bonjour
Je viens de suivre ta vidéo. Très claire et intéressante.
Cependant j’ai essayé de faire la même chose mais quand j’ajoute un élément au basket il efface le précédent. Seul le dernier reste ! Une idée ??
Merci d’avance
Fa
Dommage que l'on ne voit pas comment interagir avec l'interface utilisateur, enfin je sais pas si je me fais bien comprendre :/ sorry
Ce n'est pas l'objectif de cette vidéo, ici on voit comment gérer un panier, pour l'interaction avec un site web il suffit ensuite d'appeler les fonctions au déclenchement d'événements. Tu peux voir ce cours avec vidéo qui en parle justement : www.training-dev.fr/Cours/Les-bases-du-javascript/La-gestion-des-evenements
@@trainingdev Grand merci!
bonjour merci pour ta video j'avais une question a quel moment doit on instancier le panier
N'importe quand, quand tu en as besoin, l'idéal serait en début de fichier dans une page où tu va t'en servir
bonjour! j'aimerais calculer le prix total mais je ne veux pas utiliser le prix stocke dans le localStorage. toute suggestion est la bienvenue merci d'avance
Je comprends pas à quel moment basket devient un tableau, personnellement find ne marche pas car basket n'est pas un array
Dans l'idée, pour stocker un ensemble d'éléments ont utilise un tableau. Dans l'exemple de la vidéo, on a une fonction getBasket pour récupérer le panier. s'il n'existe pas, on retourne un tableau vide, et s'il existe déjà, on retourne le contenu du localstorage (qui est normalement un tableau enregistré par saveBasket).
bonjour merci pour le tuto top mais jai une question comment on envoi apres le panier qui est en format json dans notre base de donnees en MySQL merci SVP HELP TKS
Bonjour, ça va dépendre un peu de l'architecture, mais de manière générale je dirais qu'il faudrait faire une requête http (fetch à la validation de commande par exemple) en passant les infos du panier dans le body de la requête.
Attention tout de même de ne pas se fier à 100% à ces données qui peuvent être manipulées par l'utilisateur dans le localstorage, on se contentera de se fier aux données de navigation (id du produit, quantité, personalisation...) et on récupérera les données sensibles de la bdd (prix, dispo ...)
@@trainingdev merci mais j'ai du mal a comprendre jai cree un tableau dans mon body html avec les input de chaque produit et les quantite mais justement je voulait envoye la commende cad le panier dans une seule ligne da ma base de donnees cela est il possible a votre avis???
cad tableau commande avec dans les colonnes (id, numclient, date, commande) et dans ma colonne commende tout les produits/quantite commande merci pour votre aide
Chouette proposition ! Pourrais-tu proposer des qualités de vidéo supérieures ? Honnêtement, c'est pas facile à suivre visuellement :)
Bonne soirée et merci pour le partage de savoir ;)
Merci pour ton retour, la vidéo a été uploadée cet après midi en 1440p, tu as du la regarder lorsque la version sd était dispo mais la hd était encore en traitement. Elle est maintenant dispo en très haute qualité !
@@trainingdev merci dude 😉
Je fait le code en te suivant mais il me sort l'erreur basket.push n'est pas une fonction. Sinon très bien.
C'est étonnant, probablement une fonction dans laquelle tu n'as pas définit la variable basket.
@@trainingdev j'ai le même problème, apparemment car le resultat de basket n'est pas un array...