Comment créer une logique conditionnelle pour les coupons

Introduction

Souhaitez-vous créer une logique conditionnelle pour les coupons ? Avec ce tutoriel, vous pourrez créer un formulaire dynamique où le script sélectionne intelligemment le coupon approprié en fonction de la sélection de l'utilisateur. Ce tutoriel complet vous guidera étape par étape dans 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 est créé pour offrir un pourcentage spécifique pour le coupon.

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

Création du formulaire

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

Ajout des options déroulantes

Maintenant que nous avons ajouté nos champs requis au formulaire, ajoutons un champ Déroulant. Nous utiliserons ce champ pour baser notre logique conditionnelle pour le coupon. En fonction de l'option sélectionnée, le code de coupon correct sera affiché.

Aux fins de ce tutoriel, nous allons avoir nos options déroulantes comme suit :

• — Sélectionner —
• Code 1
• Code 2
• Code 3

Appliquer la logique intelligente pour le champ Coupon

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

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

Indiquez au champ Afficher ce champ si le Déroulant n'est pas le — Sélectionner — que nous avons défini lors de la définition des options du champ déroulant à l'étape précédente. De cette façon, lorsque le formulaire se charge, le champ Coupon ne sera pas affiché tant qu'ils n'auront pas sélectionné une option.

Ajout du snippet

Il est maintenant temps d'ajouter le extrait à votre site. Si vous ne savez pas comment et où ajouter des extraits à votre site, veuillez consulter 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 );

Cet extrait ne regardera que l'ID du formulaire 3382. Ensuite, il regardera l'option sélectionnée dans le champ Déroulant, qui est l'ID du champ _38, et attribuera cette valeur à une variable appelée selectedval.

Les quelques lignes suivantes de l'extrait compareront la sélection du menu déroulant aux noms que nous avons configurés pour chaque code promo. S'ils sélectionnent par exemple Code 2, la valeur 25OFF sera attribuée au champ Coupon, qui est l'ID de champ _39. Vos visiteurs devront toujours cliquer sur le bouton Appliquer pour appliquer la remise, mais la sélection aura déjà été faite pour eux.

Et voilà tout ce dont vous avez besoin pour configurer la logique conditionnelle pour les coupons. Souhaitez-vous également 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.

Articles associés

Référence d’action : wpforms_wp_footer_end