Der Modal Spenden-Button (auch bekannt als Kampagnen-Modal-Button) ermöglicht es Ihnen, überall auf Ihrer Website einen Button zu platzieren, der ein Spendenformular in einem Modal-Popup öffnet – oder direkt zur Spenden-Seite der Kampagne verlinkt. Er ist sowohl als WordPress-Block als auch als Shortcode verfügbar und Teil von Charitables universellem Modal-Spenden-System.

Inhaltsverzeichnis

• Voraussetzungen
• Erste Schritte
• Block (Editor)
• Shortcode
• Funktionsweise des Modals
• Kampagnenauswahl im Modal
• Fehlerbehebung
• Entwicklerressourcen

Voraussetzungen

• Charitable Pro: Version 1.8.13 oder höher
• WordPress: Version 6.2 oder höher
• PHP: Version 7.4 oder höher

Erste Schritte

Block: Bearbeiten Sie eine Seite oder einen Beitrag im Block-Editor → Block hinzufügen → suchen Sie nach Modal Spenden-Button oder Charitable → fügen Sie den Block ein → wählen Sie eine Kampagne und konfigurieren Sie den Button in der Seitenleiste.

Shortcode: Verwenden Sie [charitable_modal_button campaign_id="123"] in jedem Beitrag, jeder Seite oder jedem Widget. Ersetzen Sie 123 durch Ihre Kampagnen-ID. Sie können optionale Attribute für den Button-Text und CSS-Klassen hinzufügen (siehe Shortcode).

Hauptvorteile

• Überall platzierbar: Buttons in Seitenleisten, Fußzeilen, Kampagnen-Grids (z. B. Kampagnen-Showcase) oder Inline-Inhalten.
• Modal oder Link: Der Block ermöglicht Ihnen die Wahl zwischen „Modal-Popup“ (Spendenformular in einem Popup) oder „Link zur Spenden-Seite“ (normaler Link). Der Shortcode ist nur modal.
• Kein Seiten-Neuladen: Im Modal-Modus wird das Formular über AJAX geladen und in einer Überlagerung geöffnet; Spender bleiben auf derselben Seite, bis sie absenden oder schließen.
• Kampagnenauswahl-Steuerung: Wenn die Kampagnenauswahl global aktiviert ist, können Sie sie für einen bestimmten Button ausblenden, sodass das Modal nur die ausgewählte Kampagne anzeigt.

Block (Editor)

Der Block wird als Modal Spenden-Button (charitable/modal-donate-button) unter der Kategorie Widgets registriert.

Blockeinstellungen (Seitenleiste)

Einstellungen

• Kampagne – Erforderlich. Wählen Sie die Kampagne aus, die dieser Button für Spenden verwenden soll.
• Button-Text – Beschriftung des Buttons (Standard: „Jetzt spenden“).
• Button-Aktion
  • Modal-Popup – Klick öffnet das Spendenformular in einem Modal (Standard).
  • Link zur Spenden-Seite – Klick leitet zur Spenden-Seite der Kampagne weiter.
• In neuem Tab öffnen – Nur wenn die Button-Aktion „Link zur Spenden-Seite“ ist. Öffnet die Spenden-Seite in einem neuen Tab.
• Kampagnenauswahl ausblenden – Nur wenn die Button-Aktion „Modal-Popup“ ist. Wenn aktiviert, wird die Dropdown-Liste der Kampagnenauswahl in diesem Modal ausgeblendet, auch wenn sie in den Charitable-Einstellungen aktiviert ist.

Farben

• Hintergrund – Hintergrundfarbe des Buttons.
• Text – Textfarbe des Buttons.
• Rand – Randfarbe des Buttons.

Hover

• Hintergrund – Button-Hintergrund beim Hover.
• Text – Button-Textfarbe beim Hover.

Größe & Abstand

• Button-Breite – z.B. auto, 100%, 200px.
• Schriftgröße – z.B. 16px, 1.2em.
• Abgerundete Ecken – z.B. 4px, 25px.
• Horizontaler Innenabstand – z.B. 24px, 2em.
• Vertikaler Innenabstand – z.B. 12px, 1em.

Erweitert

• Benutzerdefinierte CSS-Klasse – Zusätzliche Klasse(n) für das Button-Element.
• Modal-CSS-Klasse – Nur wenn die Button-Aktion „Modal-Popup“ ist. Zusätzliche Klasse(n) für den Modal-Container (die Standard-Modal-Klasse ist charitable-universal-modal).

Der Editor zeigt eine Vorschau des Buttons und des ausgewählten Kampagnennamens. Im Frontend gibt der Block das gleiche Verhalten wie der Shortcode (im Modal-Modus) oder ein formatierter Link (im Link-Modus) aus.

Shortcode

Shortcode-Name: charitable_modal_button

Erforderliches Attribut

• campaign_id – Die Kampagnen-ID. Der Button öffnet das Spendenformular für diese Kampagne in einem Modal.

Optionale Attribute

Attribut	Beschreibung	Standard
Text	Button-Beschriftung.	„Jetzt spenden“
Klasse	Zusätzliche CSS-Klasse(n) für den Button.	–
modal_class	Zusätzliche CSS-Klasse(n) für den Modal-Container.	–

Beispiele

[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"]

Hinweis: Der Shortcode öffnet immer das Spendenformular in einem Modal. Um stattdessen auf die Spendenseite zu verlinken, verwenden Sie den Block mit der Button-Aktion „Link zur Spendenseite“ oder verwenden Sie den Standard-Spendenlink/-shortcode (z.B. [charitable_donate_button] mit der entsprechenden Kampagne und dem entsprechenden Link-Verhalten).

Funktionsweise des Modals

1. Auslöser: Der Button hat die Klasse charitable-modal-trigger und ein data-campaign-id Attribut. Das Universal Modal-Skript lauscht auf Klicks auf diese Klasse.
2. Laden: Beim Klicken lädt das Skript das Spendenformular per AJAX für die angegebene Kampagne und fügt es in die Modal-Überlagerung ein.
3. Anzeige: Das Modal öffnet sich (unter Verwendung des gleichen Overlays und der gleichen Struktur wie die vorhandenen Modals von Charitable). Spender können das Formular ausfüllen oder das Modal schließen.
4. Kampagnenauswahl: Wenn die Funktion „Kampagnenauswahl“ in den Charitable-Einstellungen aktiviert ist und nicht durch den Button überschrieben wird (siehe unten), kann das Formular ein Dropdown zum Wechseln von Kampagnen anzeigen. Einzelne Buttons können dies mit der Option des Blocks „Kampagnenauswahl ausblenden“ erzwingen oder data-hide-campaign-selector übergeben, wenn der Button im Code erstellt wird.

Das Modal verwendet das universelle Modal-Spendensystem (Charitable Pro 1.8.13+), sodass es konsistent funktioniert, egal ob der Button aus dem Block, dem Shortcode oder aus anderen Funktionen stammt (z. B. Schnellspenden-Buttons im Kampagnen-Showcase-Block).

Kampagnenauswahl im Modal

• Globale Einstellung: Charitable Einstellungen → Allgemein → Spendenformular → Kampagnenauswahl. Wenn aktiviert, können Spendenformulare ein Dropdown „Kampagne auswählen“ anzeigen.
• Pro-Button-Überschreibung (nur Block): Im Block „Modal-Spenden-Button“ aktivieren Sie bei „Button-Aktion“ die Option „Modal-Popup“ und dann Kampagnenauswahl ausblenden, um dieses Dropdown für das Modal dieses Buttons auszublenden. Nützlich, wenn der Button für eine einzelne Kampagne bestimmt ist und Sie die Auswahl im Popup nicht wünschen.
• Shortcode: Der Shortcode bietet kein Attribut „Kampagnenauswahl ausblenden“. Um sie für einen Shortcode-Button auszublenden, müssten Sie eine benutzerdefinierte CSS-Klasse hinzufügen und JavaScript verwenden, um data-hide-campaign-selector auf dem Trigger zu setzen, oder den Filter charitable_modal_donate_button_html verwenden, um das Datenattribut hinzuzufügen.

Fehlerbehebung

Button tut nichts, wenn er angeklickt wird

• Bestätigen Sie, dass die Kampagnen-ID gültig und die Kampagne veröffentlicht ist.
• Stellen Sie sicher, dass das universelle Modal-Skript geladen wird (keine Skriptfehler oder aggressive Entfernung von Charitable-Skripten auf dieser Seite).
• Überprüfen Sie die Browserkonsole auf JavaScript-Fehler, wenn Sie auf den Button klicken.

Modal öffnet sich nicht oder Formular wird nicht geladen

• Vergewissern Sie sich, dass Sie Charitable Pro 1.8.13+ verwenden und dass kein Plugin/Theme charitable-universal-modal oder die AJAX-Anfrage zum Laden des Formulars blockiert.
• Testen Sie mit einem Standard-Theme und deaktivierten anderen Plugins, um Konflikte auszuschließen.
• Stellen Sie sicher, dass die Kampagne Spenden erhalten kann (z. B. nicht beendet, nicht vollständig finanziert, wenn dies Spenden blockiert).

Button sieht falsch aus oder es fehlen Stile

• Verwenden Sie die Optionen Farben, Größe & Abstände und Erweitert (benutzerdefinierte Klasse) des Blocks, um das Erscheinungsbild anzupassen.
• Fügen Sie für den Shortcode eine class hinzu und stylen Sie diese Klasse in Ihrem Theme oder benutzerdefinierten CSS. Der Trigger verwendet die Klasse charitable-modal-trigger plus alle von Ihnen übergebenen Klassen.

„Link zur Spendenseite“ nicht verfügbar

• Diese Option ist nur im Block verfügbar. Der Shortcode [charitable_modal_button] ist nur für Modals. Für einen einfachen Link zur Spendenseite verwenden Sie den Block mit der Schaltflächenaktion „Link zur Spendenseite“ oder den Spendenlink Ihres Themes/Plugins für diese Kampagne.

Entwicklerressourcen

PHP

• Vorlagenfunktion: charitable_get_modal_donate_button( $campaign_id, $args ) – Gibt das HTML für die Schaltfläche zurück. Wird vom Shortcode und Block verwendet.
• Echo-Helfer: charitable_modal_donate_button( $campaign_id, $args ) – Gibt dasselbe HTML aus.

Argumente für charitable_get_modal_donate_button:

Schlüssel	Typ	Standard	Beschreibung
Text	Zeichenkette	„Jetzt spenden“	Button-Beschriftung.
Klasse	Zeichenkette	charitable-modal-trigger	CSS-Klasse(n) für die Schaltfläche.
modal_class	Zeichenkette	charitable-universal-modal	CSS-Klasse für den Modal-Container.
button_tag	Zeichenkette	Schaltfläche	button oder a.
Stil	Zeichenkette	''	Inline-Stil-Zeichenkette für die Schaltfläche.
hide_campaign_selector	bool	false	Wenn true, wird data-hide-campaign-selector="1" hinzugefügt, damit das Modal den Kampagnenselektor ausblendet.

Filter

• charitablemodaldonatebuttonshortcode_output – Filtert die Ausgabe des Shortcodes. Parameter: $output, $args.
• charitablemodaldonatebuttonhtml – Filtert das HTML der Schaltfläche aus charitable_get_modal_donate_button. Parameter: $button_html, $campaign_id, $args.

CSS / HTML

• Schaltfläche: Der Trigger hat die Klasse charitable-modal-trigger und die Attribute data-campaign-id, optional data-modal-class, data-hide-campaign-selector.
• Block-Wrapper: .wp-block-charitable-modal-donate-button.
• Modal: Das Overlay und der Modal-Container werden vom Universal Modal-Skript erstellt; das Modal verwendet die von Ihnen übergebene Klasse (z. B. charitable-universal-modal).

Versionshistorie

Version	Änderungen
1.8.13	Modal Donate Button Block und Shortcode; Universal Modal Donation System; Block unterstützt Modal Popup vs Link, Styling, Kampagnenselektor ausblenden; charitable_get_modal_donate_button erhält style und hide_campaign_selector.

---

Informationen zu globalen Einstellungen für das Spendenformular und den Kampagnenselektor finden Sie unter Kampagnenselektor. Informationen zum Einbetten vollständiger Spendenformulare (nicht in einem Modal) finden Sie in der Dokumentation für den Shortcode für Spendenformulare und Kampagnen.