Como Criar Lógica Condicional para Cupons

Introdução

Gostaria de criar lógica condicional para cupões? Com este tutorial, poderá criar um formulário dinâmico onde o script seleciona inteligentemente o cupão apropriado com base na seleção do utilizador. Este tutorial abrangente irá guiá-lo passo a passo através do processo de criação deste formulário e implementação do script condicional para aplicação automática de cupões. Vamos começar!

Criação dos cupões

Para começar, vamos criar três novos códigos de cupão. Cada um é criado para dar uma percentagem específica para o cupão.

Se precisar de ajuda na criação de cupões com o WPForms, consulte este guia para mais assistência.

Criação do formulário

Em seguida, criaremos o formulário e adicionaremos os campos necessários. Se precisar de alguma assistência na criação do seu formulário, reveja esta documentação útil.

Adicionar as opções de Dropdown

Agora que adicionámos os nossos campos necessários ao formulário, vamos adicionar um campo Dropdown. Usaremos este campo para basear a nossa lógica condicional para o cupão. Com base na opção selecionada, o código de cupão correto será exibido.

Para efeitos deste tutorial, teremos as nossas opções de dropdown como as seguintes:

• — Selecione Um —
• Código 1
• Código 2
• Código 3

Aplicar Lógica Inteligente para o campo Cupão

Em seguida, vamos adicionar o nosso campo Cupão ao formulário. Como já atribuiu o formulário a estes cupões no primeiro passo, verá os códigos de cupão quando adicionar o campo ao seu formulário.

No entanto, como não queremos que este campo apareça até que eles selecionem o código, vamos aplicar alguma lógica condicional ao campo também. Para aplicar esta lógica ao campo, selecione o campo Cupão e clique no separador Lógica Inteligente.

Diga ao campo para Mostrar este campo se o Dropdown não for o — Selecione Um — que configurámos ao definir as opções do campo dropdown no passo anterior. Desta forma, quando o formulário for carregado, o campo Cupão não será exibido até que eles selecionem uma opção.

Adição do trecho de código

Agora é hora de adicionar o snippet ao seu site. Se não tem a certeza como e onde adicionar snippets ao seu site, reveja este guia útil para mais detalhes.

/**
 * 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 snippet irá apenas verificar o ID do formulário 3382. Em seguida, irá verificar a opção selecionada no campo Dropdown, que é o ID do campo _38, e atribuir esse valor a uma variável chamada selectedval.

As próximas linhas do excerto compararão a seleção do menu suspenso com os nomes que configurámos para cada código de cupão. Se selecionarem Código 2, por exemplo, o value de 25OFF será atribuído ao campo Cupão, que é o ID do campo _39. Os seus visitantes ainda terão de clicar no botão Aplicar para aplicar o desconto, mas a seleção já terá sido feita por eles.

E é tudo o que precisa para configurar a lógica condicional para cupões. Gostaria também de usar a mesma lógica para um campo de Data? Dê uma vista de olhos ao nosso guia detalhado sobre Como Usar Lógica Condicional Com um Seletor de Data.

Relacionado

Referência de Ação: wpforms_wp_footer_end