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. Das Wesentliche füge ich ebenfalls unten an.

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 leicht, damit ein bestimmtes Produkt angeboten wird. Da jeder, der diese Seite erreicht, ein eingeloggtes Mitglied ist, wird der Abschnitt "Kontodetails" der Kaufabwicklung automatisch ausgeblendet, und wir fragen nicht noch einmal nach diesen Informationen. An diesem Punkt kann das Mitglied die Zahlungsinformationen ausfüllen und den Bestellvorgang abschließen.

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.

Der zweite Ansatz besteht darin, zwei Seiten mit Hilfe von Skripten vorzutäuschen. Bei dieser Methode gibt es nicht wirklich zwei Seiten, und die Mitglieder werden nicht wirklich erstellt, bis sie den gesamten Prozess abgeschlossen haben. Stattdessen werden lediglich Abschnitte der Seite ein- und ausgeblendet und Schaltflächen zur Verfügung gestellt, um sie zu durchlaufen. Auf diese Weise entsteht der Eindruck einer zweistufigen Kaufabwicklung, ohne dass eine zwischengeschaltete kostenlose Mitgliedschaft erstellt wird.

Es handelt sich hierbei eher um eine Aktivität zur Erstellung von Seiten auf mittlerem Niveau, aber wenn Sie daran interessiert sind und mit HTML und grundlegenden Skripten einigermaßen vertraut sind, können Sie die folgende Demonstration verfolgen, um zu sehen, wie es gemacht werden kann.

Elegante 2-Schritt-Checkout-Demonstration

Werfen Sie zunächst einen Blick auf die Checkout Page Vorlage und Sie werden sehen, dass die verschiedenen Abschnitte bereits wie folgt angeordnet sind <div> Blöcke und die automatische Ausblendung von Abschnitten sind ein separates System, das sie umgibt, was für uns sehr praktisch ist. Wir beginnen damit, die Kassenseite im Editor zu öffnen und sie als HTML anzuzeigen.

Die erste Änderung, die wir vornehmen müssen, ist das Hinzufügen von CSS, damit die Seite beim Laden in der gewünschten Konfiguration angezeigt wird. Es gibt verschiedene Möglichkeiten, dies zu tun. Letztendlich ist es vielleicht besser, dies im Abschnitt "Additional CSS" Ihres Themes zu tun, aber für den Moment fügen wir einfach etwas Code ganz oben auf der Checkout-Seite hinzu:

#mm-Rechnungs-Informations-Abschnitt, #mm-Versand-Informations-Abschnitt,
#mm-coupon-block, .mm-purchaseSection, #page-nav-back {display: none;}

Direkt darunter fügen wir einige Skripte für unsere Funktionen zum Ein- und Ausblenden der Seiten ein:

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

Nun müssen wir unsere Navigationsschaltflächen und die zugehörigen Klick-Handler erstellen. Ich habe mich dafür 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ächen ausgeliehen, aber Sie können diese Dinge nach Belieben ändern. In der 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