Candyland

Encore une note 100% geek - non il ne s’agit pas du panier de la menagere, mais bien de developpement web…

Apres avoir vu le caddy (le shopping-cart, comme diraient nos amis anglophones) du site iconbuffet.com, je me suis dit que j’essaierai bien de faire un truc du meme genre pour mon hypothetique boutique en ligne (celle ou je vais vendre des jolies cartes postales, des tirages de mes illustrations, des mugs et des chaussetes pour Ipod par millier). Enfin pas pareil, mais un peu pareil.
Il y a des trucs plus impressionants visuellement, je sais, mais bon dans un premier temps on va rester simple (pis c’est bien quand c’est simple, non ? Non ? Bon OK, j’ajouterai des effets graphiques racoleurs ensuite. Peut-etre).

Bref, voila un petit caddy virtuel, dont le contenu est stocke dans des sessiosn PHP, et mis a jour en temps reel sans avoir besoin de recharger la page avec AJAX. J’avais prevenu que c’etait une note de geek hein.

Ca se passe par la.

Bon je poste un petit tutoriel, en anglais - pour les allergiques a la langue de Shakespeare, mm… Google translation ?

Functions simple explanation

So this is a very simple and light-weighted PHP/Ajax shopping cart thing, using PHP sessions to store items ID’s in an array. I mainly did it as a practice, for a future online store thing that I want to run, but it’s far from functional for an e-commerce site, as there is only the cart itself. No check-out button, no “one item page” for now, only one item for each in the cart in the same time, etc. - but I wanted to keep it as simple as possible.

Grab the sources (I’ll addd them this week, please wait that I clean my code), and here we go.

The javascript functions are pretty simple (and could be much more optimised, but here is the idea) : The init() function is called on loading the page, to add events to buttons : if the buttons class name is “addToCart”, we grab the id of the link, get rid of the “id” part of its string, send it to the cart with the addToCart() function.

The addToCart() function is a simple ajax call using Prototype, which calls the cart.php page and display its result in the “cartOutput” element in page. When the function is complete, we call the swapButton() function, which change the button source, its title and, most important, its class.

(to be continued…)

Cette note a été postée le Vendredi 25 mai 2007, à 11:00 et elle est classée dans Général. Vous pouvez suivre les réponses de cette note via le fil RSS 2.0. Les commentaires et les trackbacks pour cette note sont fermés.

Sur le même sujet (peut-être)

• Edition “live” de contenu
• Suggestion de tags façon Del.icio.us
• Pecha Kucha Night - Reloaded!
• Shōwa kusai (昭和くさい)
• Mixi