{"id":14063,"date":"2022-10-04T07:11:21","date_gmt":"2022-10-04T14:11:21","guid":{"rendered":"https:\/\/membermouse.com\/?p=14063"},"modified":"2023-11-10T16:23:24","modified_gmt":"2023-11-10T21:23:24","slug":"checkout-em-duas-etapas","status":"publish","type":"post","link":"https:\/\/membermouse.com\/pt\/support-stories\/two-step-checkout\/","title":{"rendered":"Como posso criar um checkout em duas etapas? Dois m\u00e9todos elegantes revelados"},"content":{"rendered":"Nesta parte do HelpDesk, um dos membros da nossa equipe revela um m\u00e9todo elegante para criar um checkout em duas etapas. Primeiro, ele explica uma maneira de criar duas p\u00e1ginas separadas, como a maioria dos processos de checkout em duas etapas faz. Em seguida, ele tamb\u00e9m mostra um m\u00e9todo para exibir primeiro apenas o formul\u00e1rio de informa\u00e7\u00f5es de detalhes da conta e, depois, as informa\u00e7\u00f5es de pagamento em uma segunda etapa separada, mas na mesma p\u00e1gina. Observe que essa segunda op\u00e7\u00e3o envolve HTML e alguns scripts b\u00e1sicos.\n\n
\n\nCurioso sobre Checkouts perguntou:<\/strong>\n\n\"I was wondering if there is an easy way to separate the core checkout page into two separate pages. I want to have a page that asks for customer account info (name, email, etc..) , and then go to a page to enter payment info after their account is created.\"\n\n
\n\n
John, do MemberMouse, respondeu:<\/strong>\n\n\"There are two approaches to this. The first one works exactly as you described, where there are two independent checkout pages in series. We have a detailed description of how to build this process in our support article Criar um checkout em duas etapas<\/a>. I'll include the essentials below too.\n\nThe first step is to create a new page for the first checkout step, and place a Formul\u00e1rio de inscri\u00e7\u00e3o para associa\u00e7\u00e3o gratuita<\/a> on the page.\n\nNext, you create a P\u00e1gina de confirma\u00e7\u00e3o espec\u00edfica do produto<\/a> para associa\u00e7\u00f5es gratuitas e, nessa p\u00e1gina de confirma\u00e7\u00e3o, voc\u00ea colocar\u00e1 uma c\u00f3pia do Modelo de p\u00e1gina principal de checkout<\/a> modificando o c\u00f3digo Formul\u00e1rio SmartTag<\/a> 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.\n\nThe main drawback of this approach is that it can be difficult to provide two-step checkout for multiple products on the same site. All members who sign up on the free membership level we created will be offered the product we specified. To offer multiple products this way, one option would be to place a Interruptor do produto<\/a> na segunda etapa do checkout. Como alternativa, voc\u00ea precisaria de um n\u00edvel de associa\u00e7\u00e3o gratuita separado para cada produto vendido e um Decis\u00e3o do membro SmartTag<\/a> to switch between the checkout code for each one at the second step.\n\nThe 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.\n\nThis 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.\n

<\/i> Demonstra\u00e7\u00e3o de checkout elegante em duas etapas<\/strong><\/h3>\n
<\/div>\nPrimeiro, d\u00ea uma olhada no Modelo de p\u00e1gina de checkout<\/a> e você verá que todas as diferentes seções já estão dispostas como <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.\n\nThe 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:\n
#mm-billing-information-section, #mm-shipping-information-section,\n#mm-coupon-block, .mm-purchaseSection, #page-nav-back {display: none;}\n<\/pre>\nLogo abaixo disso, adicionaremos alguns scripts para nossas fun\u00e7\u00f5es que mostram e ocultam as p\u00e1ginas:\n
<script>\nfunction showPageOne() {\n  jQuery( \".mm-purchaseSection\" ).hide();\n  jQuery( \"#mm-account-information-section\" ).show();\n  jQuery( \"#mm-billing-information-section\" ).hide();\n  jQuery( \"#mm-shipping-information-section\" ).hide();\n  jQuery( \"#mm-coupon-block\" ).hide();\n  jQuery( \"#page-nav-back\" ).hide();\n  jQuery( \"#page-nav-forward\" ).show();\n}\n\nfunction showPageTwo() {\n  jQuery( \".mm-purchaseSection\" ).show();\n  jQuery( \"#mm-account-information-section\" ).hide();\n  jQuery( \"#mm-billing-information-section\" ).show();\n  jQuery( \"#mm-shipping-information-section\" ).show();\n  jQuery( \"#mm-coupon-block\" ).show();\n  jQuery( \"#page-nav-forward\" ).hide();\n  jQuery( \"#page-nav-back\" ).show();\n}\n<\/script>\n<\/pre>\nAgora precisamos criar nossos bot\u00f5es de navega\u00e7\u00e3o da p\u00e1gina e os manipuladores de cliques associados. Optei por coloc\u00e1-los na coluna da direita, n\u00e3o tenho certeza se essa \u00e9 a melhor decis\u00e3o de layout, e peguei emprestado um pouco do estilo do bot\u00e3o MemberMouse, mas voc\u00ea pode alterar essas coisas como preferir. Na coluna Modelo de p\u00e1gina principal de checkout<\/a> isso seria inserido entre as linhas 144 e 145, ou seja, logo acima da linha <div class="mm-purchaseSection"> tag:\n
<div id="page-nav-forward">\n<div id="page-nav-forward-button" class="mm-button large green" style="width:220px; text-align:center;">\nInformações de pagamento →<\/div>\n<\/div>\n<div id="page-nav-back">\n<div id="page-nav-back-button" class="mm-button large green" style="width:220px; text-align:center;">\n← Informações da conta<\/div>\n<p> <\/p>\n<\/div>\n\n<script>\njQuery( "#page-nav-forward-button" ).click(function() {\n  showPageTwo();\n});\njQuery( "#page-nav-back-button" ).click(function() {\n  showPageOne();\n});\n<\/script>\n<\/pre>\nYou can certainly use your own buttons or images, they just need to have the correct IDs so that the script can pick them up.\n\nGive this a try and please let me know if you have any questions.<\/blockquote>\n\n
\n\nCurious about Checkouts respondeu:<\/strong>\n\n\"This resolved my issue. Thanks so much for taking the time to give me a detailed response with all the information I needed!\"","protected":false},"excerpt":{"rendered":"
Voc\u00ea j\u00e1 desejou poder criar um checkout em duas etapas para seu site de associa\u00e7\u00e3o? Boas not\u00edcias! Voc\u00ea pode. E, neste artigo, mostraremos a voc\u00ea como.<\/p>","protected":false},"author":20918,"featured_media":14093,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"_strive_editorial_status":"not-started","_strive_copy_of":0,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_strive_checklists":"\"\"","_strive_active_checklist":"","_strive_post_notes":"","footnotes":""},"categories":[117,120],"tags":[],"class_list":["post-14063","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-mm-dash","category-support-stories"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/membermouse.com\/pt\/wp-json\/wp\/v2\/posts\/14063","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/membermouse.com\/pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/membermouse.com\/pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/membermouse.com\/pt\/wp-json\/wp\/v2\/users\/20918"}],"replies":[{"embeddable":true,"href":"https:\/\/membermouse.com\/pt\/wp-json\/wp\/v2\/comments?post=14063"}],"version-history":[{"count":0,"href":"https:\/\/membermouse.com\/pt\/wp-json\/wp\/v2\/posts\/14063\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/membermouse.com\/pt\/wp-json\/wp\/v2\/media\/14093"}],"wp:attachment":[{"href":"https:\/\/membermouse.com\/pt\/wp-json\/wp\/v2\/media?parent=14063"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/membermouse.com\/pt\/wp-json\/wp\/v2\/categories?post=14063"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/membermouse.com\/pt\/wp-json\/wp\/v2\/tags?post=14063"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}