Comment créer un panier en JavaScript et PHP avec envoi par mail ?

Pour créer un panier avec envoi par mail, on peut utiliser JavaScript et jQuery pour le panier lui-même, et PHP pour l'envoi du mail.

Pour créer ce script de panier marchand on utilise :

• Bootstrap 5 comme Framework HTML5.
• Font Awesome pour les icones SVG.
• JavaScript et jQuery pour les fonctions qui composent le panier.
• jQuery et PHP, avec la méthode Ajax, pour l'envoi du mail.

Vous trouverez une démonstration de ce script de panier marchand via cette page.

Vous noterez la manière dont sont créés les produits à ajouter au panier dans le fichier index.php:

<a style="cursor:pointer;" data-nom="Produit 01" data-prix="8.00" class="btn btn-primary ajouter-panier">ajouter au panier</a>

L'attribut universel data-nom correspond au nom du produit, data-prix à son prix, et la CLASS ajouter-panier déclenche l'ajout du produit au panier.

Vous pouvez également ajouter quelques options supplémentaires aux produits :

L'attribut data-select du bouton ajouter est optionnel, et s'il est utilisé sa valeur doit correspondre à l'id de la balise <select>.

<select class="form-control" id="02">
  <option value="XS">XS</option>
  <option value="S">S</option>
  <option value="M">M</option>
  <option value="L">L</option>
  <option value="XL">XL</option>
</select>

<a style="cursor:pointer;" data-nom="Produit 02" data-prix="15.00" data-select="02" class="btn btn-primary ajouter-panier">ajouter au panier</a>

Si vous utilisez les cases à cocher pour d'éventuelles options de produit, elles se voient attribuer un data-nom pour leur nom et un data-prix pour le prix supplémentaire.

Toutes les cases à cocher d'un même produit doivent avoir une CLASS CSS unique.

<input class="form-check-input produit_001" type="checkbox" data-nom="Option 1" data-prix="6.00" id="case_01">
<input class="form-check-input produit_001" type="checkbox" data-nom="Option 2" data-prix="5.00" id="case_02">

Le bouton pour ajouter le produit au panier se voit également ajouter un nouvel attribut : data-checkbox, dont la valeur doit correspondre à la CLASS évoquée avant.

<a style="cursor:pointer;" data-nom="Produit 01" data-prix="8.00" data-select="01" data-checkbox="produit_001" class="btn btn-primary ajouter-panier">ajouter au panier</a>

Pour l'option des quantités, la valeur de aria-label de la balise <select> doit correspondre au data-nom du bouton ajouter.

<select class="form-select" aria-label="Produit 03" onchange="changeQte(this);">
  <option selected value="1">Quantité 1</option>
  <option value="2">Quantité 2</option>
  <option value="3">Quantité 3</option>
</select>

<a style="cursor:pointer;" data-nom="Produit 03" data-prix="12.00" data-qte="1" class="btn btn-primary ajouter-panier">ajouter au panier</a>

Les premières variables du fichier panier.js peuvent être modifiées pour activer ou désactiver certaines fonctionnalités du panier, telles que les commandes par lots et les frais et modes de livraison.

Le fichier PHP, mail.php, est utilisé pour l'envoi du mail ; vous devez l'éditer pour y spécifier l'adresse mail de la personne qui recevra les commandes.

Prochaines mises à jour à venir :

• Ajout d'une option pour la mise en base de données de la commande (MySQL, fichier DB, fichier XML).
• Intégration de la CLASS PHPMailer pour une meilleur gestion de l'envoi de l'email.