Cómo crear lógica condicional para cupones

Introducción

¿Le gustaría crear una lógica condicional para cupones? Con este tutorial, podrá crear un formulario dinámico en el que el script seleccione de forma inteligente el cupón adecuado en función de la selección del usuario. Este completo tutorial le guiará paso a paso por el proceso de creación de este formulario y la implementación del script condicional para la aplicación automática de cupones. ¡Vamos allá!

Crear los cupones

Para empezar, vamos a crear tres nuevos códigos de cupón. Cada uno se crea para dar una cantidad de porcentaje particular para el cupón.

Si necesita ayuda para crear cupones con WPForms, consulte esta guía para obtener más ayuda.

Creación del formulario

A continuación, crearemos el formulario y añadiremos nuestros campos obligatorios. Si necesitas ayuda para crear tu formulario, revisa esta útil documentación.

Añadir las opciones desplegables

Ahora que hemos añadido nuestros campos obligatorios al formulario, vamos a añadir un campo desplegable. Utilizaremos este campo para basar nuestra lógica condicional para el cupón. En función de la opción seleccionada, se mostrará el código de cupón correcto.

Para el propósito de este tutorial, vamos a tener nuestras opciones desplegables como el siguiente:

• - Seleccione uno -
• Código 1
• Código 2
• Código 3

Aplicar Smart Logic para el campo Cupón

A continuación, vamos a añadir nuestro campo Cupón al formulario. Como ya has asignado el formulario a estos cupones en el primer paso, verás los códigos de los cupones cuando añadas el campo a tu formulario.

Sin embargo, como no queremos que este campo se muestre hasta que hayan seleccionado el código, también vamos a aplicar algo de lógica condicional al campo. Para aplicar esta lógica al campo, seleccione el campo Cupón y haga clic en la pestaña Lógica inteligente.

Dígale al campo que Muestre este campo si el desplegable no es el - Seleccionar uno - que configuramos al definir las opciones del campo desplegable en el paso anterior. De esta forma, cuando se cargue el formulario, el campo Cupónno se mostrará hasta que seleccionen una opción.

Añadir el fragmento

Ahora es el momento de añadir el fragmento a su sitio. Si no está seguro de cómo y dónde añadir fragmentos a su sitio, consulte esta útil guía para obtener más detalles.

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

Este fragmento va a mirar sólo el ID del formulario 3382. A continuación, buscará la opción seleccionada en el menú Desplegable que es el ID del campo _38 y asignar ese valor a una variable llamada selectedval.

Las siguientes líneas del snippet compararán la selección desplegable con los nombres que configuramos para cada código de cupón. Si seleccionan Código 2por ejemplo, el value de 25OFF se asignará al Cupón que es el ID del campo _39. Sus visitantes todavía tendrán que hacer clic en el botón Solicitar para aplicar el descuento, pero la selección ya se habrá hecho por ellos.

Y eso es todo lo que necesita para configurar la lógica condicional para cupones. ¿Le gustaría utilizar la misma lógica para un campo Fecha? Eche un vistazo a nuestra guía detallada sobre Cómo utilizar la lógica condicional con un selector de fecha.

Relacionado

Acción de referencia: wpforms_wp_footer_end