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. I’ll include the essentials below too.

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 slightly so that a specific product is offered. Since anyone who reaches this page is a logged-in member, the Account Details section of the checkout is automatically hidden, and we don’t prompt for that information again. At this point, the member would be able to fill out payment information and finish the checkout process.

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.

The second approach is to fake two pages using scripting. With this method, there aren’t really two pages, and members are not really created until they complete the entire process. Instead, you’re just hiding and showing sections of the page, and providing buttons to advance through them. This creates the experience of two-step checkout without an intermediary free membership being created.

This is more like an intermediate-level page-building activity, but if you’re interested and somewhat comfortable with HTML and basic scripts, you can follow the demonstration implementation below to see how it can be done.

Demonstração de checkout elegante em duas etapas

Primeiro, dê uma olhada no Modelo de página de checkout and you’ll see that all the different sections are already laid out as <div> blocks and our section auto-hiding is a separate system that surrounds them, so that’s really convenient for us. We’ll start by opening the checkout page in the editor and viewing it as HTML.

The first change we need to make is to add some CSS so that when the page loads it will be in the desired configuration. There’s a bunch of different ways to do this, ultimately it might be better to have it in your theme’s Additional CSS section, but for now we’ll just add some code to the very top of the checkout page:

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

Just underneath that, we’ll add some scripting for our functions that show and hide the pages:

<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>

Now we need to create our page navigation buttons, and the associated click handlers. I’ve elected to put those in the right column, I’m not sure that this is the very best layout decision, and I just borrowed some MemberMouse button styling, but you can change these things around as you prefer. In the 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