Come Creare Logica Condizionale per i Coupon

Introduzione

Vuoi creare una logica condizionale per i coupon? Con questo tutorial, sarai in grado di creare un modulo dinamico in cui lo script seleziona in modo intelligente il coupon appropriato in base alla selezione dell'utente. Questo tutorial completo ti guiderà passo dopo passo attraverso il processo di creazione di questo modulo e l'implementazione dello script condizionale per l'applicazione automatica dei coupon. Iniziamo subito!

Creazione dei coupon

Per iniziare, creeremo tre nuovi codici coupon. Ognuno è creato per dare una particolare percentuale di sconto per il coupon.

Se hai bisogno di aiuto nella creazione di coupon con WPForms, dai un'occhiata a questa guida per ulteriore assistenza.

Creazione del modulo

Successivamente, creeremo il modulo e aggiungeremo i campi richiesti. Se hai bisogno di assistenza nella creazione del tuo modulo, ti preghiamo di consultare questa utile documentazione.

Aggiunta delle opzioni a discesa

Ora che abbiamo aggiunto i campi richiesti al modulo, aggiungiamo un campo a discesa. Utilizzeremo questo campo come base per la nostra logica condizionale per il coupon. In base all'opzione selezionata, verrà visualizzato il codice coupon corretto.

Ai fini di questo tutorial, avremo le nostre opzioni a discesa come segue:

• — Seleziona una —
• Codice 1
• Codice 2
• Codice 3

Applica logica intelligente per il campo Coupon

Successivamente, aggiungeremo il nostro campo Coupon al modulo. Poiché hai già assegnato il modulo a questi coupon nel primo passaggio, vedrai i codici coupon quando aggiungi il campo al tuo modulo.

Tuttavia, poiché non vogliamo che questo campo venga visualizzato finché non hanno selezionato il codice, applicheremo anche una logica condizionale al campo. Per applicare questa logica al campo, seleziona il campo Coupon e fai clic sulla scheda Logica intelligente.

Indica al campo di Mostrare questo campo se il Menu a discesa non è — Seleziona una — che abbiamo impostato definendo le opzioni del campo a discesa nel passaggio precedente. In questo modo, quando il modulo viene caricato, il campo Coupon non verrà visualizzato finché non selezionano un'opzione.

Aggiunta dello snippet

Ora è il momento di aggiungere lo snippet al tuo sito. Se non sei sicuro di come e dove aggiungere snippet al tuo sito, ti preghiamo di consultare questa guida utile per maggiori dettagli.

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

Questo snippet esaminerà solo l'ID del modulo 3382. Quindi esaminerà l'opzione selezionata dal campo Menu a discesa, che è l'ID del campo _38, e assegnerà quel valore a una variabile chiamata selectedval.

Le prossime righe dello snippet confronteranno la selezione del menu a discesa con i nomi impostati per ciascun codice coupon. Se selezionano Codice 2, ad esempio, il valore di 25OFF verrà assegnato al campo Coupon, che è l'ID del campo _39. I tuoi visitatori dovranno comunque fare clic sul pulsante Applica per applicare lo sconto, ma la selezione sarà già stata effettuata per loro.

E questo è tutto ciò che ti serve per impostare la logica condizionale per i coupon. Vorresti usare la stessa logica anche per un campo Data? Dai un'occhiata alla nostra guida dettagliata su Come usare la logica condizionale con un Date Picker.

Correlati

Riferimento Azione: wpforms_wp_footer_end