{"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":"zweistufiger-checkout","status":"publish","type":"post","link":"https:\/\/membermouse.com\/de\/support-stories\/two-step-checkout\/","title":{"rendered":"Wie kann ich eine 2-Schritt-Kasse erstellen? Zwei elegante Methoden aufgedeckt"},"content":{"rendered":"In diesem Beitrag aus dem HelpDesk zeigt eines unserer Teammitglieder eine elegante Methode zur Erstellung einer zweistufigen Kaufabwicklung. Zun\u00e4chst erkl\u00e4rt er eine Methode, bei der zwei separate Seiten erstellt werden, wie es bei den meisten zweistufigen Kaufabwicklungen der Fall ist. Dann zeigt er auch eine Methode, bei der zun\u00e4chst nur das Formular mit den Kontodaten angezeigt wird und dann die Zahlungsinformationen in einem zweiten, separaten Schritt, aber auf derselben Seite. Bitte beachten Sie, dass diese zweite Option HTML und einige grundlegende Skripte erfordert.\n\n
\n\nNeugierig auf Checkouts gefragt:<\/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 von MemberMouse hat geantwortet:<\/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 Erstellen Sie eine 2-Schritt-Kasse<\/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 Anmeldeformular f\u00fcr die kostenlose Mitgliedschaft<\/a> on the page.\n\nNext, you create a Produktspezifische Best\u00e4tigungsseite<\/a> f\u00fcr kostenlose Mitgliedschaften, und auf dieser Best\u00e4tigungsseite platzieren Sie eine Kopie der Kasse Hauptseite Vorlage<\/a> Code, die \u00c4nderung der Formular 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 Produkt Schalter<\/a> im zweiten Schritt der Kaufabwicklung. Alternativ dazu m\u00fcssten Sie f\u00fcr jedes verkaufte Produkt eine eigene kostenlose Mitgliedschaftsstufe und eine Mitgliederentscheid 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> Elegante 2-Schritt-Checkout-Demonstration<\/strong><\/h3>\n
<\/div>\nWerfen Sie zun\u00e4chst einen Blick auf die Checkout Page Vorlage<\/a> und Sie werden sehen, dass die verschiedenen Abschnitte bereits wie folgt angeordnet sind <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-Rechnungs-Informations-Abschnitt, #mm-Versand-Informations-Abschnitt,\n#mm-coupon-block, .mm-purchaseSection, #page-nav-back {display: none;}\n<\/pre>\nDirekt darunter f\u00fcgen wir einige Skripte f\u00fcr unsere Funktionen zum Ein- und Ausblenden der Seiten ein:\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>\nNun m\u00fcssen wir unsere Navigationsschaltfl\u00e4chen und die zugeh\u00f6rigen Klick-Handler erstellen. Ich habe mich daf\u00fcr entschieden, diese in der rechten Spalte zu platzieren. Ich bin mir nicht sicher, ob dies die beste Layout-Entscheidung ist, und ich habe mir einfach das Styling der MemberMouse-Schaltfl\u00e4chen ausgeliehen, aber Sie k\u00f6nnen diese Dinge nach Belieben \u00e4ndern. In der Kasse Hauptseite Vorlage<\/a> zwischen den Zeilen 144 und 145 eingefügt werden, also direkt über der <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;">\nInformationen zur Zahlung →<\/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← Kontoinformationen<\/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\nNeugierig auf Checkouts geantwortet:<\/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":"
Haben Sie sich jemals gew\u00fcnscht, eine zweistufige Kaufabwicklung f\u00fcr Ihre Mitgliederseite zu erstellen? Gute Nachrichten! Das k\u00f6nnen Sie. Und in diesem Artikel zeigen wir Ihnen, wie.<\/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\/de\/wp-json\/wp\/v2\/posts\/14063","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/membermouse.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/membermouse.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/membermouse.com\/de\/wp-json\/wp\/v2\/users\/20918"}],"replies":[{"embeddable":true,"href":"https:\/\/membermouse.com\/de\/wp-json\/wp\/v2\/comments?post=14063"}],"version-history":[{"count":0,"href":"https:\/\/membermouse.com\/de\/wp-json\/wp\/v2\/posts\/14063\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/membermouse.com\/de\/wp-json\/wp\/v2\/media\/14093"}],"wp:attachment":[{"href":"https:\/\/membermouse.com\/de\/wp-json\/wp\/v2\/media?parent=14063"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/membermouse.com\/de\/wp-json\/wp\/v2\/categories?post=14063"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/membermouse.com\/de\/wp-json\/wp\/v2\/tags?post=14063"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}