développement web
PHP, MySQL, JavaScript/jQuery
Administration Linux/Apache...

méthodologieGestion de panier avec AJAX et les sessions PHP

Jeudi 21 Août 2008
lu 23792 fois
11 commentaires
Le but de cette méthode est évident : pouvoir afficher le panier en temps réel, sans avoir besoin de recharger la page en cours, ceci pour permettre une navigation plus fluide.
Ainsi, à chaque ajout (ou suppression) d'article, le panier en session est mis à jour et le résultat apparaît directement dans l'aperçu du panier.

Pour cela, on discernera plusieurs éléments :
La classe PHP de gestion de panier
Le panier en session
L'aperçu du panier
Les pages de mise à jour PHP
Les fonctions Javascript (AJAX)

Principe de fonctionnement :
A chaque ajout d'article (clique sur le bouton « ajouter au panier ») on appelle une fonction AJAX qui va envoyer les infos de mise à jour à un script PHP, récupérer le panier modifié et afficher le nouvel apperçu.


La classe PHP de gestion de panier
Une classe PHP va gérer le panier (ajout et suppression d'article, réinitialisation du panier…)
Le panier est recalculé à chaque mise à jour (nombre d'articles et prix).
Les infos concernant les articles sont également enregistrés en session (pour éviter d'aller les rechercher via une requête SQL à chaque affichage du panier)
extrait de la classe panier

Le panier en session est de la forme suivante :
Array
(
[nombre_articles] => 1
[prix] => 100
[articles] => Array
(
[code_article] => Array
(
[code_article] => vf01005
[libelle] => mon article
[prix] => 100.00
[quantite] => 1
)

)

)

L'aperçu du panier
C'est juste un include (panier.inc.php) sous forme de petit encart sur votre page, affichant le nombre d'articles et le montant du panier avec un lien vers le détail du panier.
Il est placé dans un div dont le contenu sera mis à jour par les fonctions AJAX

Les fonctions javascript (ajax)
Pour la partie ajax, j'utilise la classe javascript AJAX de neovov

La fonction d'ajout d'article sera de cette forme :
    function ajouteArticle(idArticle)
    {
        var ajax = new XHR();
        ajax.appendData('action','insert');
        ajax.appendData('ajax','ok');       
        ajax.appendData('id',''+idArticle);

        // mise à jour de l'apercu panier
        ajax.send("panier_update.php");
        ajax.complete = function (xhr)
        {
            document.getElementById('ajax_panier').innerHTML = xhr.responseText;
        }
       
    }

Explications :
On crée un objet ajax avec new XHR()
On ajoute les arguments à faire passer au script PHP avec la méthode ajax.appendData
On envoi la requête avec ajax_send (panier_update est le nom de la page contenant le script de mise à jour du panier et d'affichage de l'apperçu)
On récupère la réponse du script (xhr.responseText) et on met à jour l'aperçu panier sur la page ('ajax_panier' est l'id du div contenant l'aperçu du panier).

La page de mise à jour PHP
La page PHP (panier_update) exécutée par notre objet AJAX contient d'une part le script de mise à jour du panier et d'autre part la partie affichage au format HTML du panier mis à jour.

Voici le script de mise à jour :
< ?php
    session_start();
    // mise à jour du panier
    if ($_POST['action']=='insert')
    {
        // récupération des infos du produit à ajouter
        $l_prod = getArticle($_POST ['id']);
        $obj_panier->ajouteArticle($_POST ['id'],$l_prod['libelle'],$l_prod['prix']);
        // mise en session du panier
        $_SESSION['panier'] = $obj_panier->getPanier();
    }
?>

Les infos concernant le produit sont récupérées par la fonction getArticle() qui va cherche es infos dans une base de données, un fichier, des valeurs en session…. Elle retourne un tableau de la forme : $article ('libelle','prix')

Vous terminez en incluant l'aperçu de votre panier (panier.inc.php). C'est ce code qui sera retourné à l'objet AJAX et remplacera l'aperçu du panier.

Commentaires

Bonjour, étant novice, j'aimerai savoir comment est fait le fichier panier.inc.php et ou se place classe PHP. Car je n'arrive pas à intégrer ce panier ça me mets

Parse error: syntax error, unexpected T_STRING, expecting T_OLD_FUNCTION or T_FUNCTION or T_VAR or '}' in /homepages/20/d212452945/htdocs/patate_records/panier.inc.php on line 5

Merci d'avance

01/11/2008 12:49

Bonjour stéphane
vérifie que ton seveur a bien php 5 (tu le verras avec la fonction phpinfo(); )

03/11/2008 10:28

Merci pour cette solution sympa de panier ajax/php...

:)

23/03/2009 00:49

J'ai utilisé un système de panier en ajax similaire à celui expliqué dans cet article, cependant, le script php appelé par ajax n'a ne connais pas l'identifiant de la session....

Comment faire ?

26/03/2009 20:23

un simple session_start() devrait marcher

28/03/2009 21:45

Bonjour
En testant la methode ajouteArticle('article1','mon-article',100) par exemple, j'ai une Notice : Undefined index: article1. J'ai remplacé la première ligne de la fonction par
if (!array_key_exists($a_code,$this->m_panier['articles']))

J'ai ajouté également un
return $this->m_panier;
à la fin de la fonction car je vois pas autrement comment récupérer le panier sinon.

Quoi qu'il en soit merci pour ce tuto que je vais essayer de mettre en pratique.

03/08/2009 14:36

Pour récupérer le panier, il faut utiliser la méthode getPanier(), comme montré dans l'exemple.

10/08/2009 13:48

Bonjour,

Merci pour ce tuto. Etant novice en ajax/php, je ne comprends pas où inclure la classe panier PHP. Ca me retourne une erreur "Fatal error: Call to undefined function getarticle()" lorsque j'ajoute un produit.

Merci d'avance

25/10/2009 21:50

bonjour syl20
la fonction getarticle() est une fonction que tu dois développer de ton côté, elle récupèrera les détails des articles, via par exemple une requête sur ta base de données de produits

26/10/2009 10:11

A quoi sert la méthode GetPanier()

04/11/2010 13:01

dans l'exemple, à récupérer le contenu du panier

04/11/2010 22:30

Enregistrement de votre commentaire...

Ajouter un commentaire

commentaire
 
nom / pseudo
 
e-mail
(Votre e-mail ne sera ni exploité, ni divulgué.)
 
site
 
 
 
<Novembre 2014 
LunMarMerJeuVenSamDim
     01 02
03 04 05 06 07 08 09
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30