Comment créer une logique conditionnelle pour les coupons

Introduction

Vous souhaitez créer une logique conditionnelle pour les coupons ? Ce tutoriel vous permettra de créer un formulaire dynamique dans lequel le script sélectionnera intelligemment le bon de réduction approprié en fonction de la sélection de l'utilisateur. Ce tutoriel complet vous guidera pas à pas à travers le processus de création de ce formulaire et d'implémentation du script conditionnel pour l'application automatique des coupons. Plongeons dans le vif du sujet !

Création des coupons

Pour commencer, nous allons créer trois nouveaux codes de coupon. Chacun d'entre eux est créé pour donner un pourcentage particulier pour le coupon.

Si vous avez besoin d'aide pour créer des coupons avec WPForms, veuillez consulter ce guide.

Création du formulaire

Ensuite, nous allons créer le formulaire et ajouter nos champs obligatoires. Si vous avez besoin d'aide pour créer votre formulaire, veuillez consulter cette documentation utile.

Ajout des options de la liste déroulante

Maintenant que nous avons ajouté nos champs obligatoires au formulaire, ajoutons un champ déroulant. C'est sur ce champ que nous baserons notre logique conditionnelle pour le coupon. En fonction de l'option sélectionnée, le bon code de coupon sera affiché.

Pour les besoins de ce tutoriel, nous allons utiliser les options suivantes pour notre liste déroulante :

• - Choisir un -
• Code 1
• Code 2
• Code 3

Appliquer la logique intelligente au champ Coupon

Ensuite, nous allons ajouter notre champ Coupon au formulaire. Comme vous avez déjà affecté le formulaire à ces coupons lors de la première étape, vous verrez les codes des coupons lorsque vous ajouterez le champ à votre formulaire.

Cependant, comme nous ne voulons pas que ce champ s'affiche tant que les utilisateurs n'ont pas sélectionné le code, nous allons également appliquer une logique conditionnelle à ce champ. Pour appliquer cette logique au champ, sélectionnez le champ Coupon et cliquez sur l'onglet Logique intelligente.

Indiquer au champ d'afficher ce champ si la liste déroulante n'est pas l'option - Select One - que nous avons définie lors de la définition des options du champ déroulant à l'étape précédente. Ainsi, lors du chargement du formulaire, le champ Couponne s'affichera pas tant que l'utilisateur n'aura pas sélectionné une option.

Ajout du snippet

Il est maintenant temps d'ajouter l'extrait à votre site. Si vous ne savez pas comment et où ajouter des snippets à votre site, consultez ce guide utile pour plus de détails.

/**
 * 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 );

Ce snippet ne va s'intéresser qu'à l'identifiant du formulaire. 3382. Il examinera ensuite l'option sélectionnée dans la liste des options. Liste déroulante qui est l'ID du champ _38 et assigner cette valeur à une variable appelée selectedval.

Les lignes suivantes du snippet comparent la sélection du menu déroulant aux noms que nous avons définis pour chaque code de coupon. S'ils sélectionnent Code 2Par exemple, le value de 25OFF sera attribuée à la Coupon qui est l'ID du champ _39. Vos visiteurs devront toujours cliquer sur le bouton Appliquer pour appliquer la réduction, mais la sélection aura déjà été faite pour eux.

C'est tout ce dont vous avez besoin pour mettre en place une logique conditionnelle pour les coupons. Vous souhaitez utiliser la même logique pour un champ Date? Consultez notre guide détaillé sur Comment utiliser la logique conditionnelle avec un sélecteur de date.

En rapport

Référence de l'action : wpforms_wp_footer_end