Le module de réservation se charge et s'affiche en JS, ce qui vous permet de modifier le CSS directement par vos fichiers en faisant référence aux classes des éléments générés par la lib JS.
:root {
/* Texts */
--text: #0d1e3d; /* Couleur des textes par défaut */
--text-light: #6b7a91; /* Couleur des textes des détails */
--text-invert: #c7ccd4; /* Couleur des textes disable */
--family-primary: 'Source Sans Pro',sans-serif; /* Typographie à utiliser */
/* Couleurs de fond (backgrounds) */
--background: #f1f3f5; /* Couleur de fond générale */
--white: #ffffff; /* Fonds blancs et quelsues textes blancs */
/* Bordures */
--border: #0d1e3d; /* Bordures des éléments sélectionnés */
--border-light: #e2e5e9; /* Bordures des éléments non sélectionnés */
--radius: 5px; /* Arrondis des images, inputs, sélecteurs... */
--radius-large: 8px; /* Arrondi des cartes */
--radius-rounded: 9999px; /* Arrondi des boutons */
/* Boutons et liens */
--primary: #30604A; /* Couleur des boutons principaux */
--primary-invert: #FFFFFF; /* Textes des boutons principaux */
--black: #0d1e3d; /* Couleur des boutons secondaires et checkbox */
--link: #08947b; /* Couleur des liens */
}
Il arrive fréquemment que le menu du site sur lequel on installe le panier reste devant la popup GUIDAP. Ce problème apparaît selon le thème utilisé. Voici le code qui devrait résoudre le soucis :
div#guidap-popups {
position: fixed;
z-index: 9999; /* Modifier ce nombre jusqu'à ce que la popup GUIDAP passe au-dessus du menu (ex.: 999999) */
}
Vous pouvez facilement personnaliser les textes des boutons en ajoutant le texte souhaité entre les balises HTML.
Le code ci dessous :
<guidap-reserve-button></guidap-reserve-button>
Donne le résultat :
En ajoutant le texte souhaité (ici : Réservation en ligne) entre les balises HTML, le texte par défaut est remplacé :
Le code ci dessous :
<guidap-reserve-button>
Réservation en ligne
</guidap-reserve-button>
Donne le résultat :
Il est possible de cacher le bouton panier lorsqu’il est vide pour ne pas perturber la navigation avec cette information tant que le consommateur n’a rien ajouté au panier.
Pour cela, ajoutez le code CSS ci-dessous à votre site :
/* Cacher le bouton panier tant qu'il est vide */
.guidap-cart-button.gdp-scoped-ui.guidap-cart-button-empty {
display: none;
}