Come creare una logica condizionale per i coupon

Introduzione

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

Creazione dei coupon

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

Se avete bisogno di aiuto per creare coupon con WPForms, consultate questa guida per ulteriore assistenza.

Creazione del modulo

Successivamente, creeremo il modulo e aggiungeremo i campi obbligatori. Se avete bisogno di assistenza per la creazione del modulo, consultate questa utile documentazione.

Aggiunta delle opzioni a discesa

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

Ai fini di questa esercitazione, le opzioni a discesa saranno le seguenti:

• - Selezionare uno -
• Codice 1
• Codice 2
• Codice 3

Applicare la logica intelligente per il campo Coupon

Successivamente, aggiungeremo il campo Coupon al modulo. Poiché il modulo è già stato assegnato a questi coupon nel primo passo, si vedranno i codici dei coupon quando si aggiunge il campo al modulo.

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

Indicare al campo di mostrare questo campo se il menu a tendina non è - Seleziona uno - che abbiamo impostato quando abbiamo definito le opzioni del campo a tendina nel passaggio precedente. In questo modo, quando il modulo viene caricato, il campo Couponnon viene visualizzato finché non si seleziona un'opzione.

Aggiunta dello snippet

Ora è il momento di aggiungere lo snippet al vostro sito. Se non siete sicuri di come e dove aggiungere gli snippet al vostro sito, consultate questa utile guida 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 guarderà solo all'ID del modulo 3382. Quindi si guarderà all'opzione selezionata dal menu A discesa che è l'ID del campo _38 e assegnare questo valore a una variabile chiamata selectedval.

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

Questo è tutto ciò che serve per impostare la logica condizionale per i coupon. Volete utilizzare la stessa logica anche per un campo Data? Date un'occhiata alla nostra guida dettagliata su Come usare la logica condizionale con un selezionatore di date.

Correlato

Riferimento azione: wpforms_wp_footer_end