Como criar uma lógica condicional para cupões

Introdução

Gostaria de criar uma lógica condicional para cupões? Com este tutorial, será capaz de criar um formulário dinâmico em que o script seleciona inteligentemente o cupão adequado 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 da implementação do script condicional para a aplicação automática de cupões. Vamos mergulhar de cabeça!

Criar os cupões

Para começar, vamos criar três novos códigos de cupão. Cada um deles foi criado para dar um determinado valor percentual para o cupão.

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

Criar o formulário

Em seguida, criaremos o formulário e adicionaremos os campos obrigatórios. Se precisar de ajuda para criar o seu formulário, consulte esta documentação útil.

Adicionar as opções do menu suspenso

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

Para efeitos deste tutorial, as nossas opções de lista pendente são as seguintes:

• - Selecionar um -
• Código 1
• Código 2
• Código 3

Aplicar a lógica inteligente ao campo Cupão

De seguida, vamos adicionar o nosso campo de cupão ao formulário. Uma vez que já atribuiu o formulário a estes cupões no primeiro passo, verá os códigos dos cupões quando adicionar o campo ao seu formulário.

No entanto, uma vez que não queremos que este campo seja apresentado até que o utilizador tenha selecionado o código, vamos também aplicar alguma lógica condicional ao campo. 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 menu pendente não for o - Selecionar um - que definimos quando definimos as opções do campo pendente no passo anterior. Desta forma, quando o formulário for carregado, o campo do cupãonão será apresentado até que o utilizador selecione uma opção.

Adicionar o snippet

Agora é hora de adicionar o snippet ao seu site. Se não tiver a certeza de como e onde adicionar snippets ao seu site, consulte este guia útil para obter 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 vai olhar apenas para o ID do formulário 3382. Em seguida, a opção selecionada na lista Menu suspenso campo que é o ID do campo _38 e atribui esse valor a uma variável chamada selectedval.

As linhas seguintes do snippet irão comparar a seleção do menu pendente com os nomes que definimos para cada código de cupão. Se for selecionado Código 2, por exemplo, o value de 25OFF será atribuído ao Cupão campo, que é o ID do campo _39. Os seus visitantes continuarão a ter de clicar no Aplicar para aplicar o desconto, mas a seleção já terá sido feita para eles.

E isto é tudo o que precisa para configurar a lógica condicional para cupões. Também gostaria de usar a mesma lógica para um campo de data? Dê uma olhada no nosso guia detalhado sobre Como usar a lógica condicional com um selecionador de data.

Relacionadas

Referência da ação: wpforms_wp_footer_end