Wie kann ich eine 2-Schritt-Kasse erstellen? Zwei elegante Methoden aufgedeckt

In diesem Beitrag aus dem HelpDesk zeigt eines unserer Teammitglieder eine elegante Methode zur Erstellung einer zweistufigen Kaufabwicklung. Zunächst erklärt 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ächst 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.

---

Neugierig auf Checkouts gefragt:

"Ich habe mich gefragt, ob es eine einfache Möglichkeit gibt, die Hauptseite der Kasse in zwei separate Seiten aufzuteilen. Ich möchte eine Seite haben, die nach Kundenkontoinformationen fragt (Name, E-Mail, etc..), und dann zu einer Seite gehen, um Zahlungsinformationen einzugeben, nachdem ihr Konto erstellt wurde.

---

John von MemberMouse hat geantwortet:

"Hierfür gibt es zwei Ansätze. Die erste funktioniert genau so, wie Sie es beschrieben haben, nämlich mit zwei unabhängigen, hintereinander geschalteten Checkout-Seiten. In unserem Support-Artikel finden Sie eine detaillierte Beschreibung, wie Sie diesen Prozess aufbauen können Erstellen Sie eine 2-Schritt-Kasse. I’ll include the essentials below too.

Der erste Schritt besteht darin, eine neue Seite für den ersten Checkout-Schritt zu erstellen und eine Anmeldeformular für die kostenlose Mitgliedschaft auf der Seite.

Als nächstes erstellen Sie eine Produktspezifische Bestätigungsseite für kostenlose Mitgliedschaften, und auf dieser Bestätigungsseite platzieren Sie eine Kopie der Kasse Hauptseite Vorlage Code, die Änderung der Formular 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.

Der größte Nachteil dieses Ansatzes ist, dass es schwierig sein kann, eine zweistufige Kaufabwicklung für mehrere Produkte auf derselben Website anzubieten. Allen Mitgliedern, die sich auf der von uns erstellten kostenlosen Mitgliedschaftsstufe anmelden, wird das von uns angegebene Produkt angeboten. Um mehrere Produkte auf diese Weise anzubieten, wäre eine Möglichkeit, eine Produkt Schalter im zweiten Schritt der Kaufabwicklung. Alternativ dazu müssten Sie für jedes verkaufte Produkt eine eigene kostenlose Mitgliedschaftsstufe und eine Mitgliederentscheid SmartTag um im zweiten Schritt zwischen den einzelnen Kassencodes zu wechseln.

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.

Elegante 2-Schritt-Checkout-Demonstration

Werfen Sie zunächst einen Blick auf die Checkout Page Vorlage 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-Rechnungs-Informations-Abschnitt, #mm-Versand-Informations-Abschnitt,
#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 Kasse Hauptseite Vorlage zwischen den Zeilen 144 und 145 eingefügt werden, also direkt über der <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;">
Informationen zur Zahlung →</div>
</div>
<div id="page-nav-back">
<div id="page-nav-back-button" class="mm-button large green" style="width:220px; text-align:center;">
← Kontoinformationen</div>
<p> </p>
</div>

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

Sie können natürlich Ihre eigenen Schaltflächen oder Bilder verwenden, sie müssen nur die richtigen IDs haben, damit das Skript sie erkennen kann.

Probieren Sie es aus und lassen Sie mich bitte wissen, wenn Sie Fragen haben.

---

Neugierig auf Checkouts geantwortet:

"Damit ist mein Problem gelöst. Vielen Dank, dass Sie sich die Zeit genommen haben, mir eine ausführliche Antwort mit allen Informationen zu geben, die ich brauchte!"

---

Verwandte Inhalte

---

• Teilen Sie