Créer un formulaire de réservation pour camping ou hôtel avec WordPress – PHP et jQuery

Créer un formulaire de réservation pour camping ou hôtel avec WordPress – PHP et jQuery
WordPress Lecture 6 minutes • 16 octobre 2024

Voici un court tutoriel pour créer un moteur de réservation, idéal par exemple pour les sites internet de camping, d'hôtellerie et de tourisme. L'exemple s'appuie sur du code PHP et l'appel à une bibliothèque jQuery. Rien d'insurmontable si vous codez sur WordPress !

Moteur de réservation : un exemple vaut mieux que 1000 mots

Voici le moteur de réservation que j'ai créé pour le Camping Le Tatiou (qui au passage, vous offre de beaux moments de détentes dans les Landes). Pas mal non ? C'est français.
Et bien si vous êtes habitués à créer ou modifier des thèmes WordPress, c'est à votre portée. Allez suivez-mois, je vous dévoile les coulisses. Et gratos !

A noter :
Une laaarge majorité du monde du tourisme et de l’hôtellerie utilise des plateformes tierces afin de gérer leurs réservations en ligne. Dans notre cas il s'agit de eSeason, un logiciel spécialisé pour les campings et l'hôtellerie de plein air. Notre formulaire de réservation a donc pour mission de renvoyer vers la plateforme avec les choix de l'utilisateur mémorisés (et donc les résultats adaptés à ses choix).

Création du formulaire en PHP

Hop hop hop ! Passons au concret avec la création du formulaire en PHP.
Il sera ajouté dans mon modèle de page, ou via la création d'un block Gutenberg dédié. Et dans cet exemple, j'utilise Bootstrap 5 que vous reconnaissez bien évidemment grâce à ces classes CSS spécifiques dans mon code.

/* Block Formulaire recherche réservation */
<section class="block-booking-form">
		<div class="container">
			<div class="row justify-content-center">
				<div class="position-relative col-12 col-lg-9 ">
					<div class="wrapper bg-vert rounded-3 px-4 py-5 w-100">

						<h2 class="txt-blanc text-center">Réservez votre séjour</h2>

						<div class="search-form row align-items-center gy-3 gy-lg-0 gx-lg-3">
 
							<div class="form-field position-relative col">
								<div class="input-daterange input-group d-flex flex-nowrap justify-content-evenly gap-3" id="datepicker">

									<!-- Champs date de début -->
									<div class="form-field position-relative">
									   	<img src="<?php echo get_template_directory_uri().'/images/png/012-calendar.png'; ?>" class="position-absolute"/>
									    <input type="text" id="start-date" class="input-sm form-control py-3 pe-0 h-100 rounded text-start" name="start" placeholder="Date début" />
									</div>

									<!-- Champs date de fin -->
									<div class="form-field position-relative">
										<img src="<?php echo get_template_directory_uri().'/images/png/012-calendar.png'; ?>" class="position-absolute"/>
								    	<input type="text" id="end-date" class="input-sm form-control py-3 pe-0 h-100 rounded text-start" name="end" placeholder="Date fin" />
								    </div>

								</div>
							</div>

							<!-- Le select type d'hébergement -->
							<div class="form-field position-relative col-lg-3">
								<select id="accommodation-type" class="form-select py-3 h-100" aria-label=".form-select-lg example">
								  <option selected>Type d'hébergement</option>
								  <option value="Mobil-Home">Mobil-Home</option>
								  <option value="Standard">Emplacement</option>
								</select>
							</div>

							<!-- Le bouton -->
							<div class="position-relative col-lg-3">
								<a id="search-button" class="btn btn-rouge w-100" href="#">
									Rechercher		
								</a>
							</div>
							
						</div>

					</div>
				</div>
			</div>
		</div>
</section>

<!-- JavaScript pour charger les champs DatePicker en FR  -->
<script type="text/javascript">
	jQuery(function($){
	  $('.block-booking-form .input-daterange').datepicker({
	  	language: "fr",
	  	startDate: "today",
	  	todayHighlight: true
	  });
	});
</script>

L'appel de la bibliothèque jQuery DatePicker

On va maintenant appeler la bibliothèque jQuery DatePicker.
Pourquoi faire ?
Car c'est grâce à elle qu'on va pouvoir sélectionner la date de début et date de fin du séjour !

Dans le fichier functions.php (à la racine du thème WordPress) on appelle les 2 scripts suivants.
On veille à utiliser la méthode WordPress wp_enqueue_script s'il vous plait.

function datepicker_enqueue_scripts() {
// Bootstrap DatePicker 1.10 JS
    wp_enqueue_script( 'bootstrap-datepicker-js', 'https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.10.0/js/bootstrap-datepicker.min.js', array( 'jquery' ) );
    wp_enqueue_script( 'bootstrap-datepicker-js-fr', 'https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.10.0/locales/bootstrap-datepicker.fr.min.js', array( 'jquery' ) );
// On appelle function.js en footer pour des fonctions en JS ou Jquery spécifiques
    wp_enqueue_script( 'function', get_template_directory_uri() . '/js/functions.js', array('jquery'), '1', true );
add_action( 'wp_enqueue_scripts', 'datepicker_enqueue_scripts' );

On arrive (déjà) au bout !

Un peu de JavaScript pour déterminer l'action au clic sur le bouton

Il faut bien que notre formulaire renvoie vers la plateforme de réservation,dans notre cas eSeason si vous avez suivi. Et avec les critères choisis par l'internaute (en manque de vacances).

Direction le fichier functions.js. S'il n'existe pas alors le créer et le classer dans un dossier nommé "js". exemple : "racine du thème/js/functions.js"

Dans ce beau fichier, on va détailler tout le code qui va s’exécuter lorsque l'internaite clique sur le bouton.

jQuery(document).ready(function($){
    //Exécute la recherche du moteur de réservation
    $('#search-button').click(function(event) {
        // Empêcher le comportement par défaut du lien
        event.preventDefault();

        // Récupérer les valeurs des champs
        var startDate = $('#start-date').val();
        var endDate = $('#end-date').val();
        var accommodationType = $('#accommodation-type').val();

        // Fonction pour convertir les dates au format YYYY/MM/DD
        function formatDate(dateStr) {
            var parts = dateStr.split('/');
            return parts[2] + '/' + parts[1] + '/' + parts[0];
        }

        // Convertir les dates
        startDate = formatDate(startDate);
        endDate = formatDate(endDate);

        // Construire l'URL personnalisée
        var baseURL = "https://thelisresa.webcamp.fr/list.php?camping=bias40"; // Remplacer par l'URL de destination
        var url = baseURL + "&begin=" + encodeURIComponent(startDate) + "&end=" + encodeURIComponent(endDate) + "&type=" + encodeURIComponent(accommodationType);

        // Redirige vers l'URL dans un nouvel onglet
        window.open(url, '_blank');
    });
}

Arrivé à ce stade, vous avez 2 réactions possibles :

  1. Ok, ça me semble jouable je vais tester 🤙
  2. J'ai pas bité la moitié de ce qu'il vient de m'expliquer 🤯

Si jamais votre cas est le numéro 1 : Bravo ! A vous de jouer et si l'envie vous prends, n'hésitez pas à laisser un commentaire de remerciement en bas de cet article.

Et dans le cas numéro 2, et bien c'est un peu mon travail de vous conseiller et vous proposer mes services. Alors c'est avec plaisir que j'attends votre message par mail. Promis je ne vous laisserai pas tomber.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *