Le bouton de don modal (également appelé bouton de campagne modal) vous permet de placer un bouton qui ouvre un formulaire de don dans une fenêtre contextuelle modale - ou qui renvoie directement à la page de don de la campagne - n'importe où sur votre site. Il est disponible en tant que bloc WordPress et raccourci, et fait partie du système de dons modaux universels de Charitable.

Table des matières

• Exigences
• Démarrage
• Bloc (Éditeur)
• Raccourci
• Comment fonctionne le modal
• Sélecteur de campagne dans le modal
• Dépannage
• Ressources pour les développeurs

Exigences

• Charitable Pro : Version 1.8.13 ou supérieure
• WordPress : Version 6.2 ou supérieure
• PHP : Version 7.4 ou supérieure

Démarrage

Bloc : Modifiez une page ou un article dans l'éditeur de blocs → ajoutez un bloc → recherchez Bouton de don modal ou Charitable → insérez le bloc → choisissez une campagne et configurez le bouton dans la barre latérale.

Raccourci : Utilisez [charitable_modal_button campaign_id="123"] dans n'importe quel article, page ou widget. Remplacez 123 par l'ID de votre campagne. Vous pouvez ajouter des attributs facultatifs pour le texte du bouton et les classes CSS (voir Raccourci).

Avantages clés

• Placer n'importe où : Boutons dans les barres latérales, les pieds de page, les grilles de campagne (par exemple, Vitrine de campagne) ou le contenu intégré.
• Modal ou lien : Le bloc vous permet de choisir « Fenêtre contextuelle modale » (formulaire de don dans une fenêtre contextuelle) ou « Lien vers la page de don » (lien normal). Le raccourci est uniquement modal.
• Pas de rechargement de page : En mode modal, le formulaire se charge via AJAX et s'ouvre dans une superposition ; les donateurs restent sur la même page jusqu'à ce qu'ils soumettent ou ferment.
• Contrôle du sélecteur de campagne : Lorsque le sélecteur de campagne est activé globalement, vous pouvez le masquer pour un bouton spécifique afin que le modal n'affiche que la campagne choisie.

Bloc (Éditeur)

Le bloc est enregistré sous le nom Bouton de don modal (charitable/modal-donate-button) dans la catégorie Widgets.

Paramètres du bloc (barre latérale)

Paramètres

• Campagne – Obligatoire. Sélectionnez la campagne que ce bouton utilisera pour les dons.
• Texte du bouton – Libellé du bouton (par défaut : « Faire un don maintenant »).
• Action du bouton
  • Fenêtre contextuelle modale – Le clic ouvre le formulaire de don dans une fenêtre modale (par défaut).
  • Lien vers la page de don – Le clic renvoie à la page de don de la campagne.
• Ouvrir dans un nouvel onglet – Uniquement lorsque l'action du bouton est « Lien vers la page de don ». Ouvre la page de don dans un nouvel onglet.
• Masquer le sélecteur de campagne – Uniquement lorsque l'action du bouton est « Fenêtre contextuelle modale ». Lorsque cette option est activée, le menu déroulant du sélecteur de campagne est masqué dans ce modal, même s'il est activé dans les paramètres de Charitable.

Couleurs

• Arrière-plan – Couleur d'arrière-plan du bouton.
• Texte – Couleur du texte du bouton.
• Bordure – Couleur de la bordure du bouton.

Survol

• Arrière-plan – Arrière-plan du bouton au survol.
• Texte – Couleur du texte du bouton au survol.

Taille et espacement

• Largeur du bouton – par ex. auto, 100%, 200px.
• Taille de la police – par ex. 16px, 1.2em.
• Rayon de bordure – par ex. 4px, 25px.
• Rembourrage horizontal – par ex. 24px, 2em.
• Rembourrage vertical – par ex. 12px, 1em.

Avancé

• Classe CSS personnalisée – Classe(s) supplémentaire(s) sur l'élément du bouton.
• Classe CSS de la modale – Uniquement lorsque l'Action du bouton est « Fenêtre modale ». Classe(s) supplémentaire(s) sur le conteneur de la modale (la classe de modale par défaut est charitable-universal-modal).

L'éditeur affiche un aperçu du bouton et du nom de la campagne sélectionnée. Sur le frontend, le bloc produit le même comportement que le shortcode (en mode modale) ou un lien stylisé (en mode lien).

Raccourci

Nom du shortcode : charitable_modal_button

Attribut requis

• campaign_id – L'ID de la campagne. Le bouton ouvrira le formulaire de don pour cette campagne dans une modale.

Attributs optionnels

Attribut	Description	Défaut
texte	Libellé du bouton.	« Faire un don maintenant »
classe	Classe(s) CSS supplémentaire(s) pour le bouton.	–
modal_class	Classe(s) CSS supplémentaire(s) pour le conteneur de la modale.	–

Exemples

[charitable_modal_button campaign_id="42"]

[charitable_modal_button campaign_id="42" text="Give to this campaign"]

[charitable_modal_button campaign_id="42" class="my-donate-btn" modal_class="my-modal"]

Remarque : Le shortcode ouvre toujours le formulaire de don dans une modale. Pour lier plutôt vers la page de don, utilisez le bloc avec l'Action du bouton définie sur « Lien vers la page de don », ou utilisez le lien/shortcode de don standard (par ex. [charitable_donate_button] avec la campagne et le comportement de lien appropriés).

Comment fonctionne le modal

1. Déclencheur : Le bouton a la classe charitable-modal-trigger et un attribut data-campaign-id. Le script de la Modale Universelle écoute les clics sur cette classe.
2. Chargement : Au clic, le script charge le formulaire de don via AJAX pour la campagne donnée et l'injecte dans la superposition de la modale.
3. Affichage : La fenêtre modale s'ouvre (en utilisant la même superposition et la même structure que les fenêtres modales existantes de Charitable). Les donateurs peuvent remplir le formulaire ou fermer la fenêtre modale.
4. Sélecteur de campagne : Si la fonctionnalité de sélecteur de campagne est activée dans les paramètres de Charitable et n'est pas remplacée par le bouton (voir ci-dessous), le formulaire peut afficher une liste déroulante pour changer de campagne. Les boutons individuels peuvent la masquer de force avec l'option « Masquer le sélecteur de campagne » du bloc ou en passant data-hide-campaign-selector lors de la création du bouton dans le code.

La fenêtre modale utilise le Système universel de dons modaux (Charitable Pro 1.8.13+), elle fonctionne donc de manière cohérente, que le bouton provienne du bloc, du shortcode ou d'autres fonctionnalités (par exemple, les boutons de don rapide dans le bloc Vitrine des campagnes).

Sélecteur de campagne dans le modal

• Paramètre global : Paramètres Charitable → Général → Formulaire de don → Sélecteur de campagne. Lorsqu'il est activé, les formulaires de don peuvent afficher une liste déroulante « Choisir une campagne ».
• Remplacement par bouton (bloc uniquement) : Dans le bloc Bouton de don modal, lorsque l'Action du bouton est « Fenêtre modale », activez Masquer le sélecteur de campagne pour masquer cette liste déroulante pour la fenêtre modale de ce bouton. Utile lorsque le bouton est destiné à une seule campagne et que vous ne souhaitez pas le sélecteur dans la fenêtre contextuelle.
• Shortcode : Le shortcode n'expose pas d'attribut « masquer le sélecteur de campagne ». Pour le masquer pour un bouton de shortcode, vous devrez ajouter une classe CSS personnalisée et utiliser JavaScript pour définir data-hide-campaign-selector sur le déclencheur, ou utiliser le filtre charitable_modal_donate_button_html pour ajouter l'attribut de données.

Dépannage

Le bouton ne fait rien lorsqu'il est cliqué

• Confirmez que l'ID de la campagne est valide et que la campagne est publiée.
• Assurez-vous que le script de la fenêtre modale universelle est chargé (pas d'erreurs de script ou de suppression agressive des scripts Charitable sur cette page).
• Vérifiez la console du navigateur pour les erreurs JavaScript lors du clic sur le bouton.

La fenêtre modale ne s'ouvre pas ou le formulaire ne se charge pas

• Vérifiez que vous utilisez Charitable Pro 1.8.13+ et qu'aucun plugin/thème ne bloque charitable-universal-modal ou la requête AJAX qui charge le formulaire.
• Testez avec un thème par défaut et les autres plugins désactivés pour exclure les conflits.
• Assurez-vous que la campagne peut recevoir des dons (par exemple, pas terminée, pas entièrement financée si cela bloque les dons).

Le bouton a une apparence incorrecte ou le style est manquant

• Utilisez les options Couleurs, Taille et espacement et Avancé (classe personnalisée) du bloc pour ajuster l'apparence.
• Pour le shortcode, ajoutez une class et stylisez cette classe dans votre thème ou CSS personnalisé. Le déclencheur utilise la classe charitable-modal-trigger plus toutes les classes que vous passez.

« Lien vers la page de don » non disponible

• Cette option existe uniquement sur le bloc. Le shortcode [charitable_modal_button] est uniquement modal. Pour un simple lien vers la page de don, utilisez le bloc avec Action du bouton = « Lien vers la page de don » ou le lien de don de votre thème/plugin pour cette campagne.

Ressources pour les développeurs

PHP

• Fonction de modèle : charitable_get_modal_donate_button( $campaign_id, $args ) – Renvoie le HTML du bouton. Utilisé par le shortcode et le bloc.
• Assistant d'affichage : charitable_modal_donate_button( $campaign_id, $args ) – Affiche le même HTML.

Arguments pour charitable_get_modal_donate_button :

Clé	Type	Défaut	Description
texte	chaîne de caractères	« Faire un don maintenant »	Libellé du bouton.
classe	chaîne de caractères	charitable-modal-trigger	Classes CSS pour le bouton.
modal_class	chaîne de caractères	charitable-universal-modal	Classe CSS pour le conteneur modal.
button_tag	chaîne de caractères	bouton	button ou a.
style	chaîne de caractères	''	Chaîne de style en ligne pour le bouton.
hide_campaign_selector	bool	faux	Lorsqu'il est vrai, ajoute data-hide-campaign-selector="1" pour que la fenêtre modale masque le sélecteur de campagne.

Filtres

• charitablemodaldonatebuttonshortcode_output – Filtre la sortie du shortcode. Paramètres : $output, $args.
• charitablemodaldonatebuttonhtml – Filtre le HTML du bouton de charitable_get_modal_donate_button. Paramètres : $button_html, $campaign_id, $args.

CSS / HTML

• Bouton : Le déclencheur a la classe charitable-modal-trigger et les attributs data-campaign-id, éventuellement data-modal-class, data-hide-campaign-selector.
• Wrapper de bloc : .wp-block-charitable-modal-donate-button.
• Modal : La superposition et le conteneur modal sont créés par le script Universal Modal ; la fenêtre modale utilise la classe que vous passez (par exemple charitable-universal-modal).

Historique des versions

Version	Modifications
1.8.13	Bloc et shortcode Modal Donate Button ; Système de dons Universal Modal ; le bloc prend en charge Popup Modal vs Lien, style, Masquer le sélecteur de campagne ; charitable_get_modal_donate_button gagne style et hide_campaign_selector.

---

Pour les paramètres globaux du formulaire de don et du sélecteur de campagne, voir Sélecteur de campagne. Pour intégrer des formulaires de don complets (pas dans une fenêtre modale), voir la documentation du formulaire de don et du shortcode de campagne.