Como Criar Lógica Condicional para Cupons

Introdução

Você gostaria de criar uma lógica condicional para cupons? Com este tutorial, você poderá criar um formulário dinâmico onde o script seleciona inteligentemente o cupom apropriado com base na seleção do usuário. Este tutorial abrangente irá guiá-lo passo a passo pelo processo de criação deste formulário e implementação do script condicional para aplicação automática de cupons. Vamos começar!

Criando os cupons

Para começar, vamos criar três novos códigos de cupom. Cada um é criado para oferecer uma porcentagem específica para o cupom.

Se precisar de ajuda para criar cupons com o WPForms, consulte este guia para obter mais assistência.

Criando o formulário

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

Adicionando as opções de Dropdown

Agora que adicionamos nossos campos necessários ao formulário, vamos adicionar um campo Dropdown. Usaremos este campo como base para nossa lógica condicional para o cupom. Com base na opção selecionada, o código do cupom correto será exibido.

Para fins deste tutorial, teremos as seguintes opções de dropdown:

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

Aplicar Lógica Inteligente para o campo Cupom

Em seguida, adicionaremos nosso campo Cupom ao formulário. Como você já atribuiu o formulário a esses cupons na primeira etapa, verá os códigos dos cupons ao adicionar o campo ao seu formulário.

No entanto, como não queremos que este campo seja exibido até que eles selecionem o código, aplicaremos também uma lógica condicional ao campo. Para aplicar essa lógica ao campo, selecione o campo Cupom e clique na guia Lógica Inteligente.

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

Adicionando o snippet

Agora é hora de adicionar o snippet ao seu site. Se você não tem certeza de como e onde adicionar snippets ao seu site, revise 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, ele 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 snippet compararão a seleção do menu suspenso com os nomes que configuramos para cada código de cupom. Se eles selecionarem Code 2, por exemplo, o value de 25OFF será atribuído ao campo Coupon, que é o ID do campo _39. Seus visitantes ainda precisarão clicar no botão Apply para aplicar o desconto, mas a seleção já terá sido feita para eles.

E é tudo o que você precisa para configurar a lógica condicional para cupons. Você também gostaria de usar a mesma lógica para um campo Date? Dê uma olhada em nosso guia detalhado sobre Como Usar Lógica Condicional Com um Date Picker.

Relacionado

Referência de Ação: wpforms_wp_footer_end