Intégrer Resabooking dans votre site WordPress

Photo de profile de Cédric Chevillard

Besoin d’un conseil pour votre site internet ?

Expert Elementor

En tant qu'expert en Elementor, je propose mon aide pour optimiser la conception, la personnalisation et la performance de votre site web avec ce plugin.

Si vous gérez un camping et souhaitez améliorer votre site internet, l’intégration de Resabooking dans votre site WordPress est une solution idéale.

En tant que créateur de site internet, je vais vous guider pas à pas pour connecter votre site à Resabooking, le logiciel de gestion et de réservation pour camping.

Suivez ce guide pour transformer votre site WordPress en une plateforme de réservation pratique et efficace, et offrir à vos clients une expérience de réservation fluide et intuitive.

Le but de l’intégration des Resabooking dans votre WordPress

Lorsque vous cherchez à optimiser la gestion des réservations de votre camping, intégrer Resabooking à votre site WordPress devient une étape incontournable.

Cette intégration vous permet de lier directement votre site internet aux fonctionnalités avancées de Resabooking.

Vous pouvez ainsi afficher les types d’hébergement disponibles et rediriger vos visiteurs vers la plateforme de réservation pour consulter les disponibilités et finaliser leur réservation.

Cela améliore non seulement l’expérience utilisateur, mais aussi l’efficacité de votre gestion.

Demander à Resabooking de vous fournir un compte développeur

Pour commencer, il est indispensable de demander à Resabooking un compte développeur.

Resabooking propose une API qui permet de récupérer directement les informations de votre camping sur votre site internet.

Pour accéder à cette API, il vous faudra d’abord obtenir la documentation en faisant une demande via ce formulaire : Contact – Documentation API Resabooking.

Une fois votre demande approuvée, vous recevrez un token que vous devrez utiliser, en cliquant sur le bouton « Sign in to Documentation », pour vous connecter à la documentation.

Page d'accueil de la documentation de l'API Resabooking afin de s'y connecter
Page de connexion à la documentation API de Resabooking

La documentation de l’API de Resabooking

La documentation de l’API de Resabooking est une mine d’informations précieuses.

Elle détaille différentes routes permettant de récupérer ou mettre à jour des informations.

Documentation de l'API de Resabooking afin de simplifier l'intégration dans WordPress
Documentation de l’API Resabooking

Sur l’image vous pouvez constater deux urls :

  • https://sandbox.resa-booking.com/v1/
  • https://api.resa-booking.com/v1/

La sandbox correspond à un environnement de test qui est une copie de l’environnement de production. Cet environnement est copié depuis la production quotidiennement.

Pour notre intégration, nous utiliserons la route GET suivante :

  • https://{url_api}/setup/

Cette route permet de récupérer toutes les informations nécessaires sur les types d’hébergement de votre camping.

Documentation de la route GET Setup de Resabooking
Documentation de la route GET Setup

Demander à Resabooking l’activation de votre compte

Une fois que vous avez pris connaissance de la documentation, la prochaine étape consiste à contacter Resabooking pour activer votre compte.

Vous devrez obtenir une clé utilisateur et une clé partenaire pour pouvoir effectuer des requêtes sur vos données.

Cette étape est cruciale pour assurer la connexion entre votre site WordPress et l’API de Resabooking.

Création du nouveau type de publication « Type d’hébergement » dans WordPress

Pour cette partie, nous allons utiliser l’extension WordPress ACF (Advanced Custom Fields) pour créer un nouveau type de publication dans WordPress, intitulé « Type d’hébergement ».

Nous allons configurer ce type de publication de manière très basique, en ne conservant que le titre et la miniature.

Pour simplifier la création, je vous propose de suivre les étapes avec les images suivantes :

Création du type de publication "Types d'hébergement" pour pouvoir créer les types sur WordPress avec Resabooking

La première étape consiste à aller dans les types de publication d’ACF et d’en créer un nouveau. Ensuite il vous suffit de recopier les champs saisis sur l’image. N’oubliez pas de cocher la case « Configuration avancée » car nous allons en avoir besoin pour la suite.

Réglages générales pour le nouveau type de publication créé à travers ACF.

Dans l’onglet « Général », vous devez simplement cocher « Titre », « Image mise en avant » et « Extrait », il est également possible de cocher « Éditeur » si vous souhaitez créer du contenu pour chaque type d’hébergement.

Personnalisation des libellés du nouveau type de post avec ACF

Ensuite dans l’onglet « Libellés », vous n’avez pas grand chose à faire, vous pouvez repasser sur les différentes traductions automatiques.

Réglage de la visibilité du type de post afin de l'ajouter au dessous de "Pages"

Ici, dans l’onglet « Visibilité », il y a deux éléments à modifier :

  • Position du menu : Cela signifie où votre type de post sera mis dans le menu de l’admin (21 = juste après l’onglet « Pages »)
  • Icône de menu : Correspond à l’icône utilisé à coté du titre de votre type de publication.
Réglage ACF pour empêcher la création de lien automatique du nouveau type de publication.

Dans l’onglet « URL », deux cas de figure :

  • Vous ne voulez pas créer de page type pour un hébergement et seulement faire la redirection vers Resabooking => Aucun permalien
  • Vous voulez créer du contenu pour chaque type (description, images…), laisser les paramètres par défaut
Désactivation de l'API WordPress pour ce type de publication

Pas besoin de changer quoi que se soit dans l’onglet « Droits », donc nous passons au dernier « Rest API ».

Ici, vu que l’utilisation de l’API WordPress n’est pas nécessaire, elle est désactivé. Par contre, si vous avez ajouté le contenu à votre type de publication et que vous souhaitez avoir Gutenberg, il faudra l’activer car Gutenberg utilise l’API WordPress pour fonctionner.

Exemple du rendu sur l'admin WordPress après la création du type de publication "Type d'hébergement"

Le résultat final : Un nouveau type de publication présent dans votre WordPress. Maintenant passons à l’ajout des différents champs complémentaires.

Création des différents champs pour votre nouveau type de publication WordPress

Ensuite, nous allons ajouter des champs personnalisés à ce nouveau type de publication.

Encore une fois, nous resterons basiques pour commencer : un simple champ de lien qui permettra de rediriger les visiteurs vers Resabooking pour voir toutes les locations disponibles pour ce type d’hébergement.

Voici les étapes détaillées en images pour vous guider pas à pas.

Vous allez vous diriger vers « ACF > Groupe de champs » et ajouter un nouveau groupe de champs appelé « Type d’hébergement ».

Puis ensuite vous allez créer un seul champ « URL Resabooking » pour pouvoir sauvegarder l’url vers Resabooking. Dans l’onglet « Validation », vous pouvez rajouter la notion d’obligation.

Création de champ personnalisé avec ACF pour le type de publication "Type d'hébergement" afin de récupérer l'url correspondante de Resabooking
Association du groupe de champs avec le type de publication "Type d'hébergement"

Ensuite dans les réglages de votre groupe de champs, il est nécessaire d’ajouter au niveau de la règle, l’association à votre nouveau type de publication fraichement créé.

Résultat lors de la création d'un nouveau type d'hébergement avec le présence du titre, de l'extrait, de l'image mise en avant et de l'url Resabooking

Maintenant, si vous allez dans votre le type de publication « Types d’hébergements » et que vous créez une nouvelle publication, vous verrez le champ créé ainsi que l’extrait et l’image mise en avant.

Récupération automatique des nouveaux types d’hébergement

Pour faciliter la gestion de votre site, nous allons mettre en place un système de récupération automatique des nouveaux types d’hébergement.

Cela vous permettra de synchroniser les nouvelles informations de Resabooking en un seul clic, sans avoir à effectuer des mises à jour manuelles.

Il vous suffit d’ajouter le code qui va suivre dans votre thème enfant :

	function resabooking_setup(){
      // La clé de l'utilisateur (Token User) - la donnée à sécuriser
      $cle_utilisateur = "XXXXX";
      // La clé du partenaire (Clé secrète) - utilisée pour générer le hachage HMAC
      $cle_partenaire = "XXXX";

      // https://sandbox.resa-booking.com/v1/
      $url = "https://api.resa-booking.com/v1/";
      $origin = "votreorigine";

      // ID client de votre compte resabooking : https://online.resa-booking.com/control/modificar_profil.php
      // Cette valeur est nécessaire pour créer l'url dynamiquement
      $id_est = 1234;

      // La clé du type de publication créé
      $cpt = "type-hebergement";

      // La clé du champ ACF
      $acf_url = "url_resabooking";

      try {
          $response = wp_remote_request( $url . 'setup', array(
              'method'      	=> 'GET',
              'headers'		=> array(
                  'Content-Type' => "application/json",
                  'Origin' => $origin,
                  'Authorization' => 'Bearer ' . hash_hmac("sha256", $cle_utilisateur, $cle_partenaire)
              ),
              'timeout'       => 25
          ) );

          if( is_a($response, "WP_Error") ) {
              throw new Exception( $response->get_error_message() );
          } else if( $response['response']['code'] != 200 ) {
              throw new Exception( $response["body"] );
          }

          $types_hebergement = (json_decode($response['body']))->setup->accomodation;
          foreach ($types_hebergement as $type_hebergement) {
              $type_hebergement_token = $type_hebergement->accomodation_token;
              $type_hebergement_name = ucfirst(mb_strtolower($type_hebergement->accomodation_name_translate->french));
              $type_hebergement_url = "https://online.resa-booking.com/front/list.php?id_est=" . $id_est . "&type=" . $type_hebergement_token;

              // Permet de vérifier si l'hébergement existe déjà
              $post = new WP_Query( array(
                  'post_type'         => $cpt,
                  'post_status'       => 'any',
                  'posts_per_page'    => 1,
                  'meta_query' 		=> [
                      [
                          "key" => $acf_url,
                          "value" => $type_hebergement_url
                      ]
                  ]
              ) );

              if( ! $post->have_posts() ){
                  // Création des hébergements en brouillon avec le nom récupérer depuis Resabooking
                  $post_id = wp_insert_post(array(
                      'post_title'    => $type_hebergement_name,
                      'post_status'   => 'draft',
                      'post_type'     => $cpt,
                  ));

                  if($post_id != 0) {
                      update_field( $acf_url, $type_hebergement_url, $post_id );
                  }
              }
          }

      } catch (\Throwable $th) {
          throw new Exception( $th->getMessage() );
      }
  }

Maintenant, nous allons ajouter un bouton permettant de déclencher la récupération des informations :

  global $pagenow;
  if( $pagenow == "edit.php" && isset( $_GET[ "post_type" ] ) && $_GET[ "post_type" ] == "type-hebergement" ) {
      
      // Permet d'ajouter un bouton en haut de la page de vos types d'hébergement
      add_action( 'manage_posts_extra_tablenav', function( $which ) {
          if( $which == "top" ){
              submit_button( __( 'Récupération des nouveaux types d\'hébergement de Resabooking' ), '', "import-rb", false );
          }
      });
    
      // Appel la fonction setup créée précedemment
      add_action( 'pre_get_posts', function( $query ) {
          if( ! isset( $_GET[ "import-rb" ] ) || ! $query->is_main_query() ) return;
          resabooking_setup();
          // Redirection pour raffraichir la page après l'importation
          wp_redirect( admin_url('edit.php?post_type=type-hebergement') );
          exit;
      } );
  }

Place au résultat :

Présence du bouton permettant de récupérer les nouveaux types d'hébergement automatiquement depuis Resabooking
Avant
Apparition des types d'hébergements après avoir cliqué sur le bouton de récupération automatique depuis Resabooking
Après
Exemple du contenu d'un type d'hébergement après la récupération. On voit notamment la présence de l'url de Resabooking pour pouvoir rediriger vers ce lien
Création du type Mobil-home avec le lien vers Resabooking

Un fois que les différents types d’hébergement sont créés, vous pouvez renseigner les informations complémentaires comme l’extrait et l’image mise en avant afin de les finaliser.

Mise en page sur le site

Passons maintenant à la mise en page de ces nouvelles informations sur votre site.

La méthode que vous utiliserez dépendra des extensions et du thème que vous utilisez.

Pour ce guide, nous allons utiliser Elementor Pro, un outil populaire et polyvalent que j’utilise quotidiennement pour la création de sites internet en tant qu’expert Elementor.

Le but est créer pour chaque type la carte suivante :

Exemple de la carte/card à créer sur le site WordPress avec Elementor.

Sur cette carte, on retrouvera le titre, l’image et l’extrait. De plus, la carte sera cliquable et redirigera vers Resabooking.

Alors pour commencer, dirigez-vous dans « Modèles > Constructeur de thème » depuis le menu admin de WordPress. Puis survolez l’onglet « Boucle » à gauche puis cliquez sur le petit +. Le builder Elementor sera alors ouvert.

Pour avoir un visuel cohérent avec ce que vous allez obtenir cliquez sur ce bouton « Réglages de Boucle » :

Barre du haut du builder Elementor avec mise en avant du bouton "Réglages de boucle"

Ensuite sur la partie de gauche, changer la configuration pour prévisualiser un de vos types d’hébergement :

Configuration du builder Elementor pour utiliser les informations d'un type d'hébergement créé.

Pour la carte, en utilisant la structure Elementor à droite, reproduisez :

Résultat de la carte/card avec Elementor

Maintenant que vous avez reproduit ou créé une carte qui vous est propre. Il reste une dernière chose à faire, plus précisément, l’ajout du lien de Resabooking.

Pour se faire, cliquez sur le conteneur parent et allez dans « Mise en page > Options supplémentaires » et changez la balise HTML pour mettre un lien. Puis cliquez sur l’icône « Balises dynamiques » pour avoir accès aux champs ACF.

Options supplémentaires pour rendre la carte cliquable en changeant la balise HTML
Résultat après la bonne configuration du module Elementor sur WordPress

Pour finir, il vous suffit de créer une page avec Elementor et utiliser le module « Grille de boucle » puis sélectionnez la boucle que vous avez créé.

Des projets réalisés avec cette méthode

Pour illustrer concrètement ce qui est possible, j’ai déjà créé plusieurs sites internet pour des campings, notamment celui du camping de Nibelle.

Site WordPress du camping de Nibelle sur téléphone, tablette et ordinateur connecté à Resabooking

Quelles sont les fonctionnalités supplémentaires intéressantes ?

En plus de l’intégration de base, Resabooking offre des fonctionnalités supplémentaires intéressantes.

Par exemple, vous pouvez créer un formulaire de recherche pour vérifier les disponibilités des locations entre deux dates spécifiques ou récupérer les réservations effectuées.

Pour ce faire, vous disposez des routes suivantes :

  • https://{url_api}/availability/{token_rental}/
  • https://{url_api}/booking/

Avec ces étapes, vous êtes maintenant bien équipé pour intégrer Resabooking dans votre site WordPress.

Bonne chance avec votre projet et n’hésitez pas à me contacter si vous avez des questions ou besoin d’aide supplémentaire !

Mes autres articles

Infographie de l'article 10 astuces pour la création de site internet

10 astuces essentielles pour la création de votre premier site internet

10 astuces pour la création site internet ? Alors commencez par imaginer que vous êtes le capitaine d’un vaisseau spatial sur le point de découvrir...

Infographie de l'article "espace insécable html"

Espace insécable en html

Aujourd’hui, nous allons explorer un sujet simple mais crucial en HTML : l’espace insécable. Que vous soyez débutant ou expert, comprendre comment utiliser les espaces...

Infographie de l'article "Fil d'Arianne WordPress"

Fil d’Ariane WordPress

Vous vous êtes sûrement demandé comment ajouter un fil d’Ariane sur votre site WordPress, n’est-ce pas ? Je vais vous guider pas à pas pour...