Como posso criar um checkout em duas etapas? Dois métodos elegantes revelados

Nesta parte do HelpDesk, um dos membros da nossa equipe revela um método elegante para criar um checkout em duas etapas. Primeiro, ele explica uma maneira de criar duas páginas separadas, como a maioria dos processos de checkout em duas etapas faz. Em seguida, ele também mostra um método para exibir primeiro apenas o formulário de informações de detalhes da conta e, depois, as informações de pagamento em uma segunda etapa separada, mas na mesma página. Observe que essa segunda opção envolve HTML e alguns scripts básicos.

---

Curioso sobre Checkouts perguntou:

"Gostaria de saber se há uma maneira fácil de separar a página principal de checkout em duas páginas separadas. Quero ter uma página que solicite informações da conta do cliente (nome, e-mail etc.) e, em seguida, ir para uma página para inserir informações de pagamento depois que a conta for criada."

---

John, do MemberMouse, respondeu:

"Há duas abordagens para isso. A primeira funciona exatamente como você descreveu, em que há duas páginas de checkout independentes em série. Temos uma descrição detalhada de como criar esse processo em nosso artigo de suporte Criar um checkout em duas etapas. Incluirei os itens essenciais abaixo também.

A primeira etapa é criar uma nova página para a primeira etapa de checkout e colocar um Formulário de inscrição para associação gratuita na página.

Em seguida, você cria um Página de confirmação específica do produto para associações gratuitas e, nessa página de confirmação, você colocará uma cópia do Modelo de página principal de checkout modificando o código Formulário SmartTag ligeiramente para que um produto específico seja oferecido. Como quem chega a essa página é um membro conectado, a seção Detalhes da conta do checkout é automaticamente ocultada e não solicitamos essas informações novamente. Nesse ponto, o membro poderá preencher as informações de pagamento e concluir o processo de checkout.

A principal desvantagem dessa abordagem é que pode ser difícil fornecer checkout em duas etapas para vários produtos no mesmo site. Todos os membros que se inscreverem no nível de associação gratuito que criamos receberão o produto que especificamos. Para oferecer vários produtos dessa forma, uma opção seria colocar um Interruptor do produto na segunda etapa do checkout. Como alternativa, você precisaria de um nível de associação gratuita separado para cada produto vendido e um Decisão do membro SmartTag para alternar entre o código de checkout de cada um na segunda etapa.

A segunda abordagem é falsificar duas páginas usando scripts. Com esse método, não há realmente duas páginas, e os membros não são realmente criados até que concluam todo o processo. Em vez disso, você está apenas ocultando e mostrando seções da página e fornecendo botões para avançar por elas. Isso cria a experiência de checkout em duas etapas sem a criação de uma associação gratuita intermediária.

Essa é mais uma atividade de construção de página de nível intermediário, mas se você estiver interessado e se sentir confortável com HTML e scripts básicos, poderá seguir a implementação de demonstração abaixo para ver como isso pode ser feito.

Demonstração de checkout elegante em duas etapas

Primeiro, dê uma olhada no Modelo de página de checkout e você verá que todas as diferentes seções já estão dispostas como <div> e a ocultação automática da seção é um sistema separado que os envolve, o que é muito conveniente para nós. Começaremos abrindo a página de checkout no editor e visualizando-a como HTML.

A primeira alteração que precisamos fazer é adicionar algum CSS para que, quando a página for carregada, ela esteja na configuração desejada. Há várias maneiras diferentes de fazer isso e, em última análise, talvez seja melhor colocá-lo na seção Additional CSS do seu tema, mas, por enquanto, adicionaremos apenas um código na parte superior da página de checkout:

#mm-billing-information-section, #mm-shipping-information-section,
#mm-coupon-block, .mm-purchaseSection, #page-nav-back {display: none;}

Logo abaixo disso, adicionaremos alguns scripts para nossas funções que mostram e ocultam as páginas:

<script>
function showPageOne() {
  jQuery( ".mm-purchaseSection" ).hide();
  jQuery( "#mm-account-information-section" ).show();
  jQuery( "#mm-billing-information-section" ).hide();
  jQuery( "#mm-shipping-information-section" ).hide();
  jQuery( "#mm-coupon-block" ).hide();
  jQuery( "#page-nav-back" ).hide();
  jQuery( "#page-nav-forward" ).show();
}

function showPageTwo() {
  jQuery( ".mm-purchaseSection" ).show();
  jQuery( "#mm-account-information-section" ).hide();
  jQuery( "#mm-billing-information-section" ).show();
  jQuery( "#mm-shipping-information-section" ).show();
  jQuery( "#mm-coupon-block" ).show();
  jQuery( "#page-nav-forward" ).hide();
  jQuery( "#page-nav-back" ).show();
}
</script>

Agora precisamos criar nossos botões de navegação da página e os manipuladores de cliques associados. Optei por colocá-los na coluna da direita, não tenho certeza se essa é a melhor decisão de layout, e peguei emprestado um pouco do estilo do botão MemberMouse, mas você pode alterar essas coisas como preferir. Na coluna Modelo de página principal de checkout isso seria inserido entre as linhas 144 e 145, ou seja, logo acima da linha <div class="”mm-purchaseSection”"> tag:

<div id="page-nav-forward">
<div id="page-nav-forward-button" class="mm-button large green" style="width:220px; text-align:center;">
Informações de pagamento →</div>
</div>
<div id="page-nav-back">
<div id="page-nav-back-button" class="mm-button large green" style="width:220px; text-align:center;">
← Informações da conta</div>
<p> </p>
</div>

<script>
jQuery( "#page-nav-forward-button" ).click(function() {
  showPageTwo();
});
jQuery( "#page-nav-back-button" ).click(function() {
  showPageOne();
});
</script>

Você certamente pode usar seus próprios botões ou imagens, eles só precisam ter os IDs corretos para que o script possa pegá-los.

Experimente e, se tiver alguma dúvida, entre em contato comigo.

---

Curious about Checkouts respondeu:

"Isso resolveu meu problema. Muito obrigado por dedicar seu tempo para me dar uma resposta detalhada com todas as informações de que eu precisava!"

---

Conteúdo relacionado

---

• Compartilhar