Voir mes créationsVoir mes créations

[nicogoss]Développements spécifiquesPlugin WordPress - réservations

Plugin WordPress - système de réservation

Codé sur mesure pour un client qui possédait un site réalisé sous WordPress, ce plugin permet de proposer un calendrier et un formulaire de réservation avec paiement en ligne (Atos et Paybox). En l'occurrence, le client souhaitait pouvoir proposer à ses clients un système de réservation de place de parking, avec 2 options payantes et un module de code promotionnel. Le tarif est calculé et affiché sur la page même, avec la technologie Ajax. Les calendriers sont gérés par jQuery UI. Côté administratif, le plugin permet de spécifier un tarif journalier global et d'attribuer un tarif spécifique à chaque jour de l'année; tous les paramètres du plugin sont modifiables depuis le back-office.

Le plugin est actuellement en place sur AlyseParking. Il pourrait être adapté pour tout site de réservation à la journée (voiture, chambre d'hôtes...)

Tester le plugin en tant que client, dans sa version TPE Paybox.
Vous pouvez aller jusqu'à la phase de paiement en utilisant une CB test: n°1111 2222 3333 4444 - CVV 123 - Date 01/2017

Extraits du tutoriel de mon plugin (pour la version Atos):

Installation:
* dézipper le fichier ng-reservation.zip
* copier l'intégralité du dossier ng-reservation sous wp-content/plugins
* activer l'extension depuis l'administration de wordpress
* effectuer les règlages en admin, notamment ceux du module bancaire
* placer le tag [ngr] sur la page où vous voulez afficher le formulaire de réservation

Administration:
1. tableau de bord:
* vous y trouverez le total des réservations payées par CB et vous pouvez modifier les tarifs jour par jour;
* pour modifier le tarif d'un jour, cliquez simplement sur la case du jour concerné, saisissez le nouveau tarif et enregistrez;
* le tarif de base se modifie dans la partie réglages
2. codes promos : vous avez la possibilité de créer des codes promos en pourcentage et en euro
3. réglages:
* les réglages du module :
  ** Email d'assistance => l'adresse mail vers laquelle seront envoyé les notifications de paiement
  ** Tarif journalier normal
  ** Texte de l'option 1 => texte qui s'affichera sur la première page du processus de réservation; laissez ce champ vide pour désactiver l'option
  ** Tarif option 1
  ** Texte de l'option 2 => texte qui s'affichera sur la première page du processus de réservation; laissez ce champ vide pour désactiver l'option
  ** Tarif option 2
  ** Chemin du fichier CSS des calendriers en front => vous pouvez indiquer un autre fichier CSS jQuery UI datepicker.
  ** ID commerçant Atos => l'id fourni par la banque
  ** Chemin de l'executable pour envoyer la requête => vous mettrez dans ce dossier l'executable request fourni par la banque (envoi ftp en mode binaire, droits réglés sur 715 minimum) (1)
  ** Chemin de l'executable pour lire la réponse => vous mettrez dans ce dossier l'executable response fourni par la banque (envoi ftp en mode binaire, droits réglés sur 715 minimum) (1)
  ** Chemin du pathfile, du certificat et du fichier de paramètres commerçant (1)
  ** Fichier des paramètres généraux (1)
(1) => ne modifiez ces paramètres qu'avec beaucoup de précaution
* formulaire :
  ** vous avez la possibilité d'ajouter des champs au formulaire à renseigner par vos clients à la deuxième page du processus de réservation
  ** les options disponibles pour chaque type de champ apparaissent après sauvegarde pour un nouveau champ
  ** l'option "Champ obligatoire" permettra au système de vérifier que le champ a été rempli (vérification basique)
  ** la sauvegarde des changements n'affecte pas directement votre formulaire en ligne; seuls les nouveaux champs sont rajoutés en fin de formulaire. Pour prendre en compte toutes vos modifications, vous devrez réinitialiser le formulaire.
  ** le formulaire généré apparaît en bas de page; vous avez la possibilité de modifier son code html, de rajouter des CSS, des textes... Ce formulaire se situe dans le dossier views (voir ci-dessous)
  ** Attention toutefois à ne pas modifier les valeurs "nom" et "id" des champs input et textarea au risque que certains champs ne soient plus utilisables en front
* emails :
  ** vous avez la possibilité de modifier le sujet et le contenu des mails envoyés après le paiement d'une réservation, à l'administrateur et au client
  ** vous pouvez aussi choisir de désactiver l'envoi de l'un ou l'autre des mails, voire des 2
  ** le bouton Default vous permet de réinitialiser les contenus de chaque mail
  ** vous pouvez insérer quelques tags: [thename] le nom du client, [email] l'email du client, [form] les données du formulaire saisi, ainsi que [recu] Ticket bancaire

Le dossier views:
Dans le dossier wp-content/plugins/ng-reservation/views, vous trouverez 8 fichiers que vous pourrez modifier pour adapter le visuel du plugin.
a. formulaire.html : c'est le fichier généré depuis la partie réglages => formulaire en admin; vos modifications seront écrasées si vous faites une réinitialisation du formulaire depuis l'admin
b. formulaire.phtml : il s'agit là du formulaire proprement dit (il inclut le fichier formulaire.html), la deuxième page du processus de réservation
c. paiement_annule.phtml : page qui s'affiche au retour bancaire, après annulation ou erreur de paiement
d. paiement_ok.phtml : page qui s'affiche au retour bancaire, après paiement réussi; on y trouve un ticket bancaire et un récapitulatif des données de la réservation
e. recapitulatif.phtml : page récapitulative avec les infos de la réservation et celles du formulaire; c'est l'étape 3, juste avant le passage à la banque
f. recapitulatif_champ.phtml : règlage de l'affichage du récapitulatif d'un champ du formulaire qui sera inséré dans la page recapitulatif.phtml
g. reservation.phtml : l'étape 1 du processus de réservation; la page contient les 2 calendrier pour choisir les dates de début et de fin de réservation; des cases à cocher pour les 2 options et un champ pour le code promo. Un bouton Calculer permet d'obtenir le total de la réservation, par ajax.
h. tarif.php : fichier de mise en page du tarif par Ajax, depuis la feuille avec les calendriers de réservations, la page reservation.phtml

Vous souhaitez implémenter ce type de fonctionnalité sur votre site ? Contactez-moi...

Haut de page