méthodologieGestion de panier avec AJAX et les sessions PHP

Jeudi 21 Août 2008

lu 28214 fois

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.