Virtuemart Checkout Step 3 - Bezahlen

Schritt 3 des Checkouts bei Virtuemart nach Auswahl der Versandart standardmäßig die Auswahl der Bezahlmethode. Hier geht es mir zwar um die optische Gestaltung, trotzdem möchte ich unbedingt auch darauf hinweisen, wie wichtig die Auswahl der Bezahlmethode für den Erfolg eines Online Shops ist…

Ich kaufe relativ viel im Internet ein. Und ich kaufe am liebsten “unproblematisch” und vor allem schnell ein. Nur Vorauskasse? Nee, da fände ich bestimmt noch einen anderen Anbieter mit ähnlichen Konditionen, der mir vor allem eines bieten kann: keine überflüssigen Wartezeiten. Denn am liebsten habe ich, wie wahrscheinlich viele andere, mein neues Produkt morgen oder übermorgen in der Post. Klar entstehen vor allem bei Kreditkartenzahlung einfach Kosten für den Shopbetreiber, aber es hilft nichts, als diese einfach durchzukalkulieren und dabei immer die Konkurrenzfähigkeit im Auge zu behalten. Vielleicht auch das eigene Kaufverhalten?

Jetzt aber zum Checkout. Ich habe wieder wahllos eingekauft und vom entsprechenden Schritt - ohne vorherige Virtuemart Anpassungen- einen Screenshot gemacht, in dem die Tabellenzellen markiert sind. Im oberen Bereich des Screenshots wieder der Basket, den ich bereits erläutert hatte.

Es fält sofort die besondere Darstellung der Kreditkarte auf, ich habe daher einen weiteren Screenshot nach Deaktivierung der Kreditkartenzahlung gemacht:

Auch für diesen Schritt gibt es Template Dateien, die wieder im Themes Verzeichnis liegen /components/com_virtuemart/themes/default/templates/checkout oder eben im eigenen Themes Verzeichnis an passender Stelle. Analog zum Versand spielen hier wieder zwei Dateien zusammen: die get_payment_method.tpl.php und die list_payment_methods.tpl.php. Schauen wir uns die Dateien also mal genauer an.

get_payment_method.tpl.php ist ziemlich unspektakulär, sie kümmert sich schlicht um das Gesamtbild der dritten Checkout Seite und ruft dann eine Core Datei auf. ps_checkout.php, die im Verzeichnis /classes unter /adminstrator/components/com_virtuemart/ liegt und keine Rolle spielen soll. Technisch spielt diese Datei natürlich eine große Rolle, denn sie kümmert sich unter anderem um den Aufruf der zweiten beteiligten Template Datei, in der es dann interessant wird, wenn es ums Layouten geht: list_payment_methods.tpl.php.

Schon in der ersten Zeile (eigentlich Zeile 19) wird ein bisschen klarer, wie hier gedacht wird:

if( $nocc_payments &&  $cc_payments )...
also die Frage nach Kreditkartenzahlung und Nicht-Kreditkartenzahlung.

Wenn also beides zutreffend ist, wird erstmal eine Tabelle mit Spaltenbreite 50% aufgemacht (nächste Zeile). Das Ergebnis sieht man recht schön in der ersten Abbildung.

Sofern es keine Kreditkartenzahlung gibt, sind die folgenden Zeilen nicht zutreffend, es geht dann erst weiter mit Zeile 106, nachdem bisher alle Tabellenelemente abhängig waren von obiger Abfrage nach Kreditkartenzahlung und Nicht-Kreditkartenzahlung. Dass ohne Kreditkarte keine Tabelle im Spiel ist, sieht man schön an Abbildung 2. Übrigens gilt das Gleiche für “reine Kreditkartenzahlungen” (kein typisch deutsches Szenario, sicher aber ein internationales).

Nicht so wirklich verbreitet ist die Verwendung von Fieldsets - höchstens vielleicht im Backend eines CMS.  Oder empfinde nur ich das so? Hier werden eventuell Änderungswünsche fällig. Achtung: in diesem Fall ist es wichtig, in der Template Datei den Überblick zu behalten, denn es gibt hier relativ viele logische Abfragen. Zusätzlich zu Fieldset sollte übrigens natürlich auch Legend als Tag entfernt und entsprechend durch eine Hx ersetzt werden.

Aus

<fieldset><legend><strong><?php echo $title ?></strong></legend>
<table border="0" cellspacing="0" cellpadding="2" width="100%">
<tr>
<td colspan="2"><?php
$ps_payment_method->list_nocheck($payment_method_id,  false);
$ps_payment_method->list_bank($payment_method_id,  false);
$ps_payment_method->list_paypalrelated($payment_method_id,  false); ?>
</td>
</tr>
</table>
</fieldset>

wird dann also beispielsweise

<h4><?php echo $title ?></strong></h4>
<table border="0" cellspacing="0" cellpadding="2" width="100%">
<tr>
<td colspan="2"><?php
$ps_payment_method->list_nocheck($payment_method_id, false);
$ps_payment_method->list_bank($payment_method_id, false);
$ps_payment_method->list_paypalrelated($payment_method_id, false); ?>
</td>
</tr>
</table>

Überlegungen

Ich habe lange überlegt, ob die Trennung von Kreditkarte und nicht-Kreditkarte in optischer Hinsicht Sinn macht und üblicherweise gewünscht wird. Ich denke, es ist eine Ermessensfrage und natürlich eine des Designs. Eine gemeinsame Darstellung aller Payment Methoden in einer einspaltigen Tabelle erfordert mindestens eines: eine übersichtliche Gestaltung der Tabellenzellen.

Hier wird es dann aufwändiger (und ich muss gestehen, dass ich glücklicherweise noch nicht vor diesem Problem stand), wenn nicht gar fast unmöglich : Wie an Abbildung 1 erkennbar, wird erst der Anbieter gewählt, dann werden (entsprechend zutreffend) die Kreditkarteninformationen abgefragt (einmal angezeigt, für die jeweils gewählte Variante gültig).  Es ist auch nur eine Kreditkarte vorgesehen. Hier muss man also massiv auf die Logik achten, sofern man die Darstellung der Template Datei völlig umstrukturieren möchte.

Finetuning

Das Finetuning, das ich hier noch ansprechen möchte, betrifft die Darstellung der nicht-Kreditkarten Zahlung.  Die entsprechende Datei heißt ps_payment_methods.php und liegt in /adminstrator/components/com_virtuemart/classes, die entsprechende Funktion list_payment_radio() (Zeile 374). Die Darstellung beginnt ab ca. Zeile 410. Achtung: wie immer gilt ab hier das Datensicherungsgebot!

Und weiter

Mit diesem Schritt ist der wesentliche Teil des Bestellprozesses abgeschlossen - im Schritt 4 folgt dann noch die Bestätigung der gesamten Bestellung und der letztendliche (für den Shopbetreiber erlösende) Klick auf (AGB und) absenden. Das wird dann auch schon fast das letzte Kapitel der Virtuemart Checkout Reihe sein.

Wichtig - noch einmal und immer wieder:  Der Checkout ist finale Element für den Erfolg eines Shops. Der hängt an dieser Stelle nicht nur von einem ansprechenden, konsistenten Layout, sondern in erster Linie auch von den Konditionen ab. Gerade Neulinge im Online Business werden nicht alle Notwendigkeiten sofort verstehen (wollen). Umso wichtiger ist eine umfassende Beratung…

Die einzelnen Steps:

Intro: Kauf mich!

Vorspann: der Basket

Checkout: kennen wir uns schon?

Step 1: Wohin soll’s denn geliefert werden?

Step 2: Wie sollen wir liefern?

Step 3: Bezahlen, bitte!

Step 4: Nochmal alles zusammengefasst oder der letzte Klick

Step 5: Dankeschön, bis zum nächsten Mal

 

Eine Antwort zum Beitrag “Virtuemart Checkout Step 3 - Bezahlen”

  1. am 17 Jan 11 um 09:59 meint

    Hallo!

    Sehr schöne Anleitung. Habe leider nur ein Problem, dass die Kreditkartenzahlung + Bankeinzug und Paypal zu breit für mein Design ist.

    Kannst du mir da vielleicht helfen? Emailadresse ist angegeben.

    Danke für die Anleitung

Auch was dazu sagen?