So erstellen Sie bedingte Logik für Gutscheine

Einleitung

Möchten Sie bedingte Logik für Coupons erstellen? Mit diesem Tutorial können Sie ein dynamisches Formular erstellen, bei dem das Skript intelligent den passenden Coupon basierend auf der Auswahl des Benutzers auswählt. Dieses umfassende Tutorial führt Sie Schritt für Schritt durch den Prozess der Erstellung dieses Formulars und der Implementierung des bedingten Skripts zur automatischen Coupon-Anwendung. Legen wir los!

Erstellung der Coupons

Zuerst erstellen wir drei neue Gutscheincodes. Jeder von ihnen ist so erstellt, dass er einen bestimmten Prozentsatz für den Gutschein gewährt.

Wenn Sie Hilfe bei der Erstellung von Coupons mit WPForms benötigen, lesen Sie bitte diesen Leitfaden für weitere Unterstützung.

Erstellung des Formulars

Als Nächstes erstellen wir das Formular und fügen die erforderlichen Felder hinzu. Wenn Sie Unterstützung bei der Erstellung Ihres Formulars benötigen, lesen Sie bitte diese nützliche Dokumentation.

Hinzufügen der Dropdown-Optionen

Nachdem wir unsere erforderlichen Felder zum Formular hinzugefügt haben, fügen wir ein Dropdown-Feld hinzu. Wir werden dieses Feld verwenden, um unsere bedingte Logik für den Coupon darauf zu basieren. Basierend auf der ausgewählten Option wird der richtige Gutscheincode angezeigt.

Für dieses Tutorial werden unsere Dropdown-Optionen wie folgt lauten:

• — Bitte auswählen —
• Code 1
• Code 2
• Code 3

Intelligente Logik für das Gutscheinfeld anwenden

Als Nächstes fügen wir unser Gutschein-Feld zum Formular hinzu. Da Sie das Formular in einem ersten Schritt bereits diesen Coupons zugeordnet haben, sehen Sie die Gutscheincodes, wenn Sie das Feld zu Ihrem Formular hinzufügen.

Da wir jedoch nicht möchten, dass dieses Feld angezeigt wird, bis sie den Code ausgewählt haben, werden wir auch für das Feld eine bedingte Logik anwenden. Um diese Logik auf das Feld anzuwenden, wählen Sie das Gutschein-Feld aus und klicken Sie auf die Registerkarte Intelligente Logik.

Weisen Sie dem Feld an, dieses Feld anzeigen, wenn das Dropdown nicht das — Bitte auswählen — ist, das wir bei der Definition der Optionen des Dropdown-Felds im vorherigen Schritt festgelegt haben. Auf diese Weise wird das Gutschein-Feld beim Laden des Formulars nicht angezeigt, bis eine Option ausgewählt wurde.

Hinzufügen des Snippets

Jetzt ist es an der Zeit, den Snippet auf Ihrer Website hinzuzufügen. Wenn Sie nicht sicher sind, wie und wo Sie Snippets zu Ihrer Website hinzufügen, lesen Sie bitte diesen hilfreichen Leitfaden für weitere Details.

/**
 * Conditional logic for coupons
 *
 * @link https://wpforms.com/developers/how-to-display-the-age-from-a-date-picker-field/
*/
  
function wpf_dev_conditional_logic_for_coupons() {
    ?>
    <script>
        jQuery(function($){
             
            // Look only at form ID 3382
            $( "form#wpforms-form-3382" ).on( 'change', function () {
                 
                // Set the value of the Dropdown field ID 38 that has been selected
                // to a variable named selectedval
                var selectedval = $( "#wpforms-3382-field_38 option:selected" ).text();
				
                // If the dropdown selection is our Code 1 coupon code, 
                // populate the coupon field ID 39 with the coupon code 25OFF
                if(selectedval == "Code 1"){
                    document.getElementById( 'wpforms-3382-field_39' ).value = '25OFF';
                } 
				// If the dropdown selection is our Code 2 coupon code, 
				// populate the coupon field ID 39 with the coupon code 50OFF
                else if(selectedval == "Code 2") {
                    document.getElementById( 'wpforms-3382-field_39' ).value = '50OFF';
                }
				// If the dropdown selection is our Code 3 coupon code, 
				// populate the coupon field ID 39 with the coupon code 75OFF
                else if(selectedval == "Code 3") {
                    document.getElementById( 'wpforms-3382-field_39' ).value = '75OFF';
                }
            });
           });
    </script>
    <?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_conditional_logic_for_coupons', 10 );

Dieser Snippet wird nur die Formular-ID 3382 betrachten. Dann wird er die ausgewählte Option aus dem Dropdown-Feld, das die Feld-ID _38 ist, betrachten und diesen Wert einer Variablen namens selectedval zuweisen.

Die nächsten Zeilen des Snippets vergleichen die Dropdown-Auswahl mit den Namen, die wir für jeden Gutscheincode festgelegt haben. Wenn sie beispielsweise Code 2 auswählen, wird der Wert von 25OFF dem Feld Gutschein zugewiesen, dessen Feld-ID _39 ist. Ihre Besucher müssen immer noch auf die Schaltfläche Anwenden klicken, um den Rabatt anzuwenden, aber die Auswahl wurde bereits für sie getroffen.

Und das ist alles, was Sie für die Einrichtung bedingter Logik für Gutscheine benötigen. Möchten Sie dieselbe Logik auch für ein Datumsfeld verwenden? Schauen Sie sich unseren detaillierten Leitfaden an: Bedingte Logik mit einem Datumsauswahlfeld verwenden.

Verwandt

Aktionsreferenz: wpforms_wp_footer_end