Comment intégrer le React Booking Widget ?

1. Qu'est-ce qu'un widget de réservation React ?

Le widget de réservation est une alternative pour les opérateurs qui fournissent déjà une
description détaillée de leurs offres. Avec le widget de réservation, seules les procédures de
réservation effectuées par l'intermédiaire de votre billetterie seront traitées. La présentation de
vos offres est entièrement laissée à votre appréciation et à celle de votre site web. Sa
configuration se trouve dans votre compte Regiondo :

Configuration de la boutique > Intégration du site web > React Booking Widget

Note
Cliquez sur Booking Widget (React.JS) pour configurer le nouveau widget de réservation. Si
vous ne voyez pas cette option, veuillez envoyer un courriel à support@regiondo.com.

 

2. Quels sont les avantages ?

• Il utilise les dernières technologies
Abonnez-vous à DeepL Pro pour éditer ce document.
Visitez www.DeepL.com/pro pour en savoir plus.
• Les temps de chargement sont plus rapides
• Le design est nouveau et épuré
• Il existe plusieurs options de personnalisation qui ne sont pas possibles avec l'ancien
widget, par exemple l'adaptation de widgets individuels au lieu de tous en même
temps, le widget uniquement pour les bons (sans les ventes de billets avec date) >
CSS

3. Quels sont les paramètres que je peux choisir pour le
widget de réservation ?

Veuillez définir les paramètres suivants avant de générer votre code :
1. Sélectionnez le produit : Sélectionnez votre langue préférée et l'offre pour laquelle vous
souhaitez configurer le processus de réservation en tant que widget. Indiquez la largeur
souhaitée de l'iFrame. Vous avez le choix entre Auto, Plein écran et une largeur spécifique en
pixels.

 

2. Votre code HTML : Après avoir effectué les réglages, votre code HTML personnel sera
généré automatiquement

3. Aperçu : Un aperçu du widget de réservation s'affiche.

4. Où le widget de réservation peut-il être placé sur le site web?

Au chargement de la page, le widget sera affiché à l'intérieur d'une balise DIV. La balise
SCRIPT peut être placée
• à l'intérieur d'une balise HEAD, avec une balise DIV ou
• avant la balise de fermeture BODY.
Si plusieurs extraits de code de widget sont mis en œuvre sur la même page, chaque balise
DIV ne sera traitée qu'une seule fois

 

Attention :
Pour des raisons de sécurité, de nombreux systèmes de gestion de contenu (CMS) bloquent
les balises SCRIPT dans le contenu. Certains systèmes offrent la possibilité de modifier cette
restriction pour autoriser les balises SCRIPT à l'intérieur du contenu. Lorsqu'il n'est pas
possible de lever cette restriction, une balise SCRIPT peut être ajoutée à la page avec le
champ "script personnalisé" correspondant, s'il est présent, ou en modifiant directement les
fichiers du thème.

A noter :
Lorsque le widget est intégré à la page de manière dynamique, par exemple dans des fenêtres
modales ou des barres latérales coulissantes, il est nécessaire que la balise SCRIPT du widget
soit initialement chargée sur la page, afin que PayPal fonctionne correctement lorsque le
client revient sur le site web après un achat réussi ou l'annulation d'un mode de paiement.

Ajouter un widget sur WordPress :
Pour ajouter des widgets sur WordPress, Regiondo a créé un plugin Booking Widget. Après
l'installation, des extraits de code peuvent être ajoutés en tant que widgets intégrés ou
shortcodes. Plus d'informations ici

 

5. Comment personnaliser la fonctionnalité du widget ?

La fonctionnalité du widget peut être personnalisée en ajoutant des attributs supplémentaires à la balise DIV.

5.1 Attributs par défaut des widgets :

Voici la liste des attributs essentiels des widgets :

• data-locale = "en_US"

L'attribut indique la langue locale du produit sélectionné.

• fournisseur de données = "RE000"

L'attribut indique le code unique du fournisseur.

• data-product = "T-RE000-000000"

L'attribut indique le code SKU unique du produit sélectionné. Il est possible de substituer le
code SKU des produits de manière dynamique, afin de mettre en place facilement de
nombreux widgets de produits sur votre site web.

• data-url = "https://regiondo-demo.regiondo.com/"

L'attribut indique le titre du produit sélectionné. Il s'agit d'un attribut informatif qui peut être
omis.

• data-font = "Open Sans"

Cet attribut définit la police de base du widget. S'il est défini, le fichier de police
correspondant sera chargé à partir de Google Fonts. Si le site web dispose déjà du même
fichier de police chargé à partir de Google, il est recommandé de désactiver le chargement
des polices pour le widget. Voir data-disable-font pour savoir comment désactiver le
chargement des polices.
Voici la liste des polices les plus populaires de Google Fonts :

• Open Sans
• Roboto
• Lato
• Oswald
• Source Sans Pro
• Montserrat
• PT Sans
• Raleway
• Lora
• Noto Sans

Le widget ne chargera pas les fichiers de police de Google Fonts si la police spécifiée
correspond à l'une des polices standard du système :

Arial
Verdana
Tahoma
Helvetica
Helvetica Neue
Times New Roman
Temps
Courier New
Courrier
Géorgie
Genève
Palatino
Linotype Palatino
Candara
Cambria

Calibri
Segoe UI
Garamond
Livreur
Livre Antiqua
Lucida Sans Unicode
Lucida Grande
Consoles
Avant Garde
Comic Sans MS
Trebuchet MS
Arial noir
Impact

• data-width = "400px"

Cet attribut définit la largeur maximale du widget. La valeur par défaut est auto, ce qui
signifie que le widget occupera tout l'espace disponible. S'il est nécessaire de limiter la
largeur maximale du widget, la valeur peut être fixée à "400px" ou à "50%" en pourcentage.
Elle peut être omise pour permettre au widget de réagir automatiquement.

• data-layout = "fullscreen" (écran complet)

Cet attribut apparaît à la place de data-width sélectionné comme "Fullscreen". S'il est
sélectionné, le widget sera positionné de manière absolue, avec une largeur et une hauteur de
100 %, afin de couvrir tout l'espace disponible. Ceci est utile si le widget doit être
implémenté à l'intérieur d'une lightbox ou d'une barre latérale coulissante.

5.2 Attributs supplémentaires des widgets :

• data-gift-option = "true" (vrai)

Cet attribut permet de remplacer les paramètres de l'option cadeau du produit dans le tableau
de bord. S'il est défini à "true", cet attribut forcera le widget à afficher les onglets Produit et
Cadeau. S'il vaut "false", l'option cadeau sera désactivée et les onglets seront cachés

 

• data-gift-option-highlighted = "true" (vrai)

En plus de data-gift-option, cet attribut permet d'outrepasser les paramètres afin d'afficher
l'option Gift comme étant activée par défaut. Si la valeur est "true", l'option cadeau sera
activée. Si la valeur est "false", l'onglet Produit sera actif et l'onglet Cadeau sera inactif.

• data-gift-option-only = "true"

Cet attribut permet d'afficher le widget avec l'option "Gift" uniquement. Si la valeur est
"true", les onglets du widget seront cachés et seule l'option Gift sera disponible.
Ceci est utile pour plus de flexibilité, lorsqu'il est nécessaire de désactiver la prise de rendezvous en raison de difficultés temporaires ou de rénovations.

 

• data-date = "2020-12-31"

Cet attribut permet de définir une date présélectionnée pour une réservation, formatée en
"AAAA-MM-JJ :". Si cet attribut est activé, la date spécifiée sera sélectionnée dans le
calendrier. Le client peut toujours modifier la date. Ceci est utile lorsque le site web contient
des listes d'événements ou un calendrier et que le widget doit s'ouvrir en lightbox pour une
date spécifique.

• data-time = "20:20"

En plus de la date des données, cet attribut permet de définir une heure présélectionnée pour
une réservation, formatée en "HH:MM". Si cet attribut est activé, l'heure spécifiée d'un
rendez-vous sera sélectionnée. Le client peut toujours modifier l'heure présélectionnée.

• data-maximum-mois = "2"

L'attribut permet de définir le nombre maximum de mois à afficher simultanément dans le
calendrier. Le widget a une largeur adaptable et, en fonction de l'espace disponible, le client
peut voir jusqu'à 6 mois du calendrier. Cet attribut est utile lorsqu'il est nécessaire de limiter
le nombre de mois du calendrier, par exemple lorsque la largeur d'un mois du calendrier est
affectée par un CSS personnalisé et qu'un seul mois peut tenir sur une ligne.

• data-step = "cart"

Cet attribut permet au widget d'ouvrir une étape spécifiée en tant qu'étape initiale. Si la valeur
est vide ou si elle est omise, le widget se comporte normalement. Par exemple, si la valeur est
"cart", le widget chargera la vue du panier d'achat.
Cet attribut peut être utilisé pour afficher le widget sur une page de panier séparée du site
web, par exemple là où le client peut se rendre en cliquant sur le bouton du panier dans l'entête. Ou lorsqu'il est nécessaire d'ajouter une étape supplémentaire au processus de paiement.
Les valeurs possibles sont : "panier", "contact", "paiement" et "expédition".

• data-skip-cart = "true"

Cet attribut permet de modifier le comportement par défaut du widget afin de sauter l'étape
du panier d'achat. Si la valeur est "true", une fois le produit ajouté au panier, le client passe
directement à la caisse.

• data-disable-loading-animation = "true" (désactivation de l'animation de
chargement)

 

L'attribut permet de désactiver l'animation de chargement du widget.
Cette fonction est utile si le site web dispose de sa propre animation de chargement.

• data-disable-font = "true"

 

Cet attribut permet de désactiver le chargement des fichiers de police de Google Fonts,
spécifiés dans "data-font". Si le site web possède déjà la même police personnalisée, il est
recommandé d'ajouter cet attribut à "true", afin d'éviter des requêtes supplémentaires lors du
chargement de la page.

• data-font-size = "16px"

Cet attribut définit la taille de la police de base du widget. Cela permet de modifier
facilement la taille de la police de base du widget, afin qu'elle corresponde mieux à la
typographie du site web. Il peut également être utile si le site web dispose d'une taille de
police adaptative, basée sur la largeur de l'écran des visiteurs.

• data-font-size-large = "20px"

Similaire à "data-font-size", cet attribut définit la taille de la police pour les titres, les noms de
produits, les boutons, etc.

• data-font-size-small = "14px"

Similaire à "data-font-size", cet attribut définit la taille de la police pour le texte de l'avis, les
étiquettes des champs de saisie, etc.

• data-font-line-height = "1.4"

L'attribut définit la hauteur de ligne de base des lignes de texte.

• data-padding = "0" ou data-padding = "20px"

Cet attribut définit les bordures horizontales pour les côtés gauche et droit des éléments à
l'intérieur du widget. Cela permet de supprimer le rembourrage lorsqu'un widget est mis en
œuvre sur un site web avec des bordures intégrées.

• data-disable-currency-dropdown="true"

L'attribut permet de désactiver la liste déroulante des devises.

• data-disable-language-dropdown="true"

L'attribut permet de désactiver la liste déroulante des langues.

• data-disable-cart-button="true"

Lorsque le panier n'est pas vide, il est possible d'utiliser le bouton "Aller au panier" pour
vérifier le contenu du panier. Cet attribut permet de masquer le bouton, afin de réduire la
hauteur du widget lorsque l'espace disponible sur la page est limité.

• data-disable-reservation-timer="true"

Cet attribut permet également de réduire la hauteur des widgets, en masquant le compte à
rebours des réservations sur la page du panier d'achat.

 

• data-disable-back-button="true"

 

Cet attribut permet de désactiver le bouton "Précédent" du panier d'achat et de la caisse, ce qui est utile pour la mise en œuvre de widgets dans de petites fenêtres modales lorsqu'il existe d'autres boutons "Fermer" permettant de recommencer la sélection des produits.

 

• data-disable-cart-coupon="true"

 

Cet attribut peut s'avérer utile lorsque les coupons et les bons ne sont pas utilisés ou que le champ des coupons doit être masqué pour des produits spécifiques ou pour une courte période.

 

• data-disable-invoice-form="true"

 

Cet attribut permet de masquer le formulaire de facturation de l'étape "Contact" lors de la commande, afin de rendre le processus de commande moins complexe.

 

6. Comment la fonctionnalité du widget peut-elle être personnalisée à l'aide d'une feuille de style CSS ?

 

Le nouveau widget de réservation peut être facilement personnalisé à l'aide de feuilles de style CSS, car tout le contenu du widget est affiché sur la page sans iFrames. Pour ce faire, il faut ajouter des règles CSS au site web avec un fichier .css et une balise ou simplement avec les balises <style></style> .

 

1. Lorsqu'il est possible de télécharger un fichier .css sur le serveur, il est recommandé d'ajouter le fichier .css à l'aide de la balise <link>, car un fichier .css sera mis en cache par le navigateur après le premier chargement de la page. Pour lier le fichier "custom.css" avec toutes les règles CSS qu'il contient, vous pouvez l'inclure dans la section <head> de la page web :

 

<link rel="stylesheet" href="/css/custom.css">

2. S'il n'est pas possible d'ajouter une balise de lien à l'en-tête, il est possible d'injecter le fichier .css avec du JavaScript comme suit :

 

<script>
(function(d) {
    var css = d.createElement('link');
    css.setAttribute('rel', 'stylesheet');
    css.setAttribute('href', '/css/custom.css');
    d.getElementsByTagName('head')[0].appendChild(css);
}(document));
</script>

Sinon, les règles CSS peuvent être placées à l'intérieur des balises et peuvent être incluses n'importe où dans la page, comme ceci :

 

<style>
.regiondo-booking-widget {
    border:2px solid #d0d0d0;
    border-radius:10px;
}
</style>

 

7. Comment les textes et les traductions peuvent-ils être modifiés ?

Des règles CSS spécifiques permettent de modifier non seulement les couleurs ou les styles
des éléments html, mais aussi leur contenu textuel.

Voici des exemples sur la façon de modifier le texte de différents éléments à l'intérieur du
widget de réservation.

7.1 Texte de l'onglet Produits et Cadeaux

Cet exemple montre également comment modifier le texte d'une langue locale spécifique :
Code :

<style>
.regiondo-widget .regiondo-tabs__tab[data-tab="product"]:after {
    content: 'Ticket';
}
.regiondo-widget .regiondo-tabs__tab[data-tab="gift"]:after {
    content: 'Gift';
}
.regiondo-booking-widget[data-locale="de_DE"] .regiondo-tabs__tab[data-tab="product"]:after {
    content: 'Eintrittskarte';
}
.regiondo-booking-widget[data-locale="de_DE"] .regiondo-tabs__tab[data-tab="gift"]:after {
    content: 'Geschenk';
}
</style>

Résultat :

7.2 Texte de la ligne d'introduction

Dans certains cas, il est possible d'ajouter une règle "!important" pour l'écraser. Toutefois, il
est préférable d'utiliser des règles plus spécifiques. En indiquant un ou plusieurs éléments
avant l'élément cible, la règle devient plus spécifique et bénéficie d'une priorité plus élevée :

Note
Si vous utilisez les mêmes classes css dans le widget css que dans votre site web, elles
pourraient être écrasées. Afin d'écraser les règles css avec vos propres règles css, vous
pouvez utiliser "!important".

Code :

<style>
.regiondo-widget .regiondo-intro-text:after {
    content: 'Choose a date below to see available times:' !important;
}
</style>

Code :

<style>
.regiondo-widget .regiondo-content .regiondo-intro-text:after {
    content: 'Choose a date below to see available times:';
}
</style>

Résultat :

7.3 Texte du titre de l'étape Date/Heure/Option

Certains éléments ont des classes spécifiques basées sur l'état de l'élément ou l'action de
l'utilisateur, qui peuvent être utilisées pour modifier le texte, même après que l'utilisateur a
sélectionné une option :

Code :

<style>
.regiondo-widget .regiondo-step-variation .regiondo-step__title:after {
    content: 'Select an Option';
}
.regiondo-widget .regiondo-step-date .regiondo-step__title:after {
    content: 'Select a Date';
}
.regiondo-widget .regiondo-step-time .regiondo-step__title:after {
    content: 'Select a Time';
}
.regiondo-widget .regiondo-step-variation.regiondo-step--selected .regiondo-step__title:after {
    content: 'Option:';
}
.regiondo-widget .regiondo-step-date.regiondo-step--selected .regiondo-step__title:after {
    content: 'Date:';
}
.regiondo-widget .regiondo-step-time.regiondo-step--selected .regiondo-step__title:after {
    content: 'Time:';
}
</style>

Résultat :

7.4 Texte des périodes

L'étape de sélection des heures comporte des titres de périodes. Les plages horaires sont
séparées par des périodes :
• de 0 à 5 est "Nuit"
• de 6 à 11 est "Matin"
• de 12 à 17 est "Afternoon" (après-midi)
• de 18 à 23 est "Soirée"
Les titres de ces périodes peuvent être modifiés comme suit à l'aide d'une feuille de style CSS:

Code :

<style>
.regiondo-widget .regiondo-times__period.regiondo-times--night:after {
    content: 'NIGHT:';
}
.regiondo-widget .regiondo-times__period.regiondo-times--morning:after {
    content: 'MORNING:';
}
.regiondo-widget .regiondo-times__period.regiondo-times--afternoon:after {
    content: 'AFTERNOON:';
}
.regiondo-widget .regiondo-times__period.regiondo-times--evening:after {
    content: 'EVENING:';
}
</style>

Résultat :

Les titres des périodes peuvent également être masqués. Vous pouvez ajouter "display :
inline" pour supprimer les sauts de ligne sur les groupes de temps :

Code :

<style>
.regiondo-widget .regiondo-times__period {
    display: none;
}
.regiondo-widget .regiondo-times__group {
    display: inline;
}
</style>

Résultat :

7.5 Texte des boutons "Ajouter au panier" et "Passer à la caisse".

Voici un exemple de modification du texte d'un bouton, y compris la casse des lettres :
Code :

<style>
.regiondo-widget .regiondo-addtocart .regiondo-button-addtocart:after {
    content: 'Add to Cart';
}
.regiondo-booking-widget[data-locale="de_DE"] .regiondo-addtocart .regiondo-button-addtocart:after {
    content: 'In den Warenkorb';
}
.regiondo-widget .regiondo-button.regiondo-button-checkout:after {
    content: 'Proceed to Checkout';
    text-transform:uppercase;
}
.regiondo-booking-widget[data-locale="de_DE"] .regiondo-button.regiondo-button-checkout:after {
    content: 'Zur Kasse';
    text-transform:uppercase;
}
</style>

Résultat :

7.6 Texte des boutons "Continuer les achats" et "Remplacer le code".

Cet exemple montre comment modifier le texte des boutons secondaires ainsi que le texte
d'un panier d'achat vide. Les éléments ont les mêmes noms de classe pour différentes pages.
Pour les distinguer, nous devons ajouter plus de spécificité à nos règles :

Code :

.regiondo-widget .regiondo-checkout--cart .regiondo-button-back:after {
    content: 'Back';
}
.regiondo-widget .regiondo-checkout--cart .regiondo-button-coupon:after {
    content: 'Have a Coupon?';
}

.regiondo-widget .regiondo-empty-cart .regiondo-button-continue:after {
    content: '« Back to Product';
}
.regiondo-widget .regiondo-empty-cart-text:after {
    content: 'Shopping cart is empty.' !important;
}

Resultat:

<style>
.regiondo-widget .regiondo-checkout-progress .regiondo-progress__cart:after {
    content: 'Cart';
}
.regiondo-widget .regiondo-checkout-progress .regiondo-progress__addons:after {
    content: 'Add-On';
}
.regiondo-widget .regiondo-checkout-progress .regiondo-progress__contact:after {
    content: 'Contact';
}
.regiondo-widget .regiondo-checkout-progress .regiondo-progress__shipping:after {
    content: 'Shipping';
}
.regiondo-widget .regiondo-checkout-progress .regiondo-progress__payment:after {
    content: 'Payment';
}

/* Disable Uppercase */
.regiondo-widget .regiondo-checkout-progress div:after {
    text-transform:none !important;
}

/* Remove Progress steps counter */
.regiondo-widget .regiondo-checkout-progress div::before {
    content:'' !important;
}
</style>

Il est également possible de masquer les étapes de progression de la manière suivante :

Code :

<style>
/* Hide Progress steps on Cart only */
.regiondo-widget .regiondo-checkout--cart .regiondo-checkout-progress {
    display:none;
}

/* Hide Progress steps completely */
.regiondo-widget .regiondo-checkout .regiondo-checkout-progress