Cómo crear lógica condicional para cupones

Introducción

¿Te gustaría crear lógica condicional para los cupones? Con este tutorial, podrás crear un formulario dinámico donde el script selecciona inteligentemente el cupón apropiado según la selección del usuario. Este completo tutorial te guiará paso a paso en el proceso de creación de este formulario y la implementación del script condicional para la aplicación automática de cupones. ¡Vamos a ello!

Creación de los cupones

Para empezar, vamos a crear tres códigos de cupón nuevos. Cada uno está creado para ofrecer un porcentaje determinado para el cupón.

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

Creación del formulario

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

Añadir las opciones de Desplegable

Ahora que hemos añadido nuestros campos necesarios al formulario, añadamos un campo de Desplegable. Usaremos este campo como base para nuestra lógica condicional del cupón. Según la opción seleccionada, se mostrará el código de cupón correcto.

A efectos de este tutorial, nuestras opciones de desplegable serán las siguientes:

• — Selecciona una —
• Código 1
• Código 2
• Código 3

Aplicar Lógica Inteligente para el campo Cupón

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

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

Indica al campo que Muestre este campo si el Desplegable no es el — Selecciona una — que configuramos al definir las opciones del campo desplegable en el paso anterior. De esta manera, cuando el formulario se cargue, el campo Cupón no se mostrará hasta que seleccionen una opción.

Añadir el fragmento

Ahora es el momento de añadir el fragmento a tu sitio. Si no estás seguro de cómo y dónde añadir fragmentos a tu sitio, revisa esta útil guía para 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 solo mirará el ID del formulario 3382. Luego mirará la opción seleccionada del campo Desplegable, que es el ID del campo _38, y asignará ese valor a una variable llamada selectedval.

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

Y eso es todo lo que necesitas para configurar la lógica condicional para cupones. ¿Te gustaría usar la misma lógica para un campo de Fecha? Echa un vistazo a nuestra guía detallada sobre Cómo Usar la Lógica Condicional con un Selector de Fecha.

Relacionado

Referencia de acción: wpforms_wp_footer_end