Virtuemart Checkout Step 4 - und gekauft!

Erst, wenn der letzte Klick getan ist, ist der Bezahlvorgang abgeschlossen. Was liegt also näher, als die Bestätigungsseite mit der Zusammenfassung des Checkouts besonders hübsch einladend zu gestalten, um diesen letzten Klick so verführerisch wie möglich zu machen? ;-)

Nein - im Ernst. Auch im letzten Schritt sollte schlicht alles passen, sonst kommt es zum Kaufabbruch.

Der Einfachheit halber habe ich mich für Demozwecke für die ungünstige Bezahlform entschieden: Nachnahme und lande damit  im letzten, hier wie immer ungestylten, Schritt auf der letztendlichen Bestätigungsseite für den Onlinekauf.

Gleich zu Beginn eine Einstellung, wie Sie hierzulande eigentlich üblich ist: die Zustimmung zu den AGB vor jedem Kaufabschluss. Diese Einstellung nimmt man in der globalen Konfiguration des Shops im Backend vor. Die Zusammenfassung präsentiert sich dann folgendermaßen:

Die Dateien im Einzelnen…

Wie bereits für die vorher gehenden Schritte gibt es auch für diesen letzten eine Template Dateie, die wieder im Themes Verzeichnis liegt /components/com_virtuemart/themes/default/templates/checkout oder eben im eigenen Themes Verzeichnis unter /checkout. Sie heißt get_final_confirmation.tpl.php.

Ein erster Punkt, an dem es wahrscheinlich nach Formatierung der <H5> (ersetze durch <H4>???) Handlungsbedarf gibt, ist die Adresse. Im Template wird ab Zeile 37ff. die Adresse ausgegeben, an die geliefert werden soll.

Die Sache fällt vielleicht nicht sofort auf. Viele angehende Shopbetreiber arbeiten nämlich bis zum Ende mit “Washupito’s Tiendita”. Nein, man vermutet falsch, wenn man sich hier spielen möchte, um die Reihenfolge von Postleitzahl und Ort zu verändern, in diesem Fall also nach Konvention die Postleitzahl vorne anstellen… Die Sache ist total simpel und erfordert keinerlei Coding. Die Einstellungen werden nämlich aus der Formatierung der Shopadresse übernommen, deren Reihenfolge man in den Einstellungen zum Shop vornehmen kann.

Die Tabelle insgesamt wirkt etwas “gequetscht”. Eigentlich ist ja genug Platz. Es liegt also nahe, diese Tabelle etwas großzügiger zu gestalten. Ich würde mehrerlei empfehlen…

Der Tabelle würde ich eine CSS ID mitgeben (Zeile 28), beispielsweise id=”final_data”.  Dies ermöglicht schon mal ein gesondertes Styling im Kontext table#final_data tr oder table#final_data tr td - letzteres beispielsweise für Abstände aller Art. Man ist damit sehr flexibel hinsichtlich einer individuellen Gestaltung des letzten Checkout Schritts.

Desweiteren ist es eine Überlegung, an dieser Stelle (und folgenden analog) eine CSS Klasse zu verwenden, also

echo '
‘.$VM_LANG->_(’PHPSHOP_ADD_SHIPTO_2′) . “:

“;

umzuwandeln in

echo '
'.$VM_LANG->_('PHPSHOP_ADD_SHIPTO_2') . ":

“;

Man kann dann nach Lust und Laune die Begrifflichkeiten, die hier englischsprachig als Shipping Address, Shipping Rate und Payment Method angezeigt werden, passend stylen und eventuell sogar noch gestalterisch voneinander abgrenzen.

Der letzte Abschnitt des Templates beschäftigt sich mit dem “senden Sie uns eine Mitteilung” Feld sowie der Zustimmung zu den AGB, sofern aktiviert. Interessant wird es also ab Zeile 80.( Tipp: Die vorhergehende <br /> entfernt man natürlich und gibt dem DIV idealerweise eine ID mit, um Abstände zu regulieren…)

Auch im Folgenden finden sich einige unschönere Zeilenumbrüche. Kein Problem - ich würde vorschlagen, alle einzelnen Elemente wiederum mit DIVs zu “umrahmen”,  diese passend mit IDs auszustatten und schon hat man die Grundlage für elegantes CSS Styling geschaffen. So darf dann auch der “Confirm” Button, der erlösende Klick für den Shopbetreiber, etwas mehr in den Mittelpunkt rücken und dem Spaß am “klick mich” steht hoffentlich nichts mehr im Weg…

Klar- der Kunde soll nach dem Kaufabschluss mit der folgenden Bestätigungsmessage über den erfolgreichen Eingang seiner Bestellung nicht enttäuscht werden. Auch hier gibt es unter Umständen noch einiges zu feilen, ebenso wie an der Bestätigungsemail. Ich werde dies in einer weiteren Folge “Virtuemart checkout” beschreiben.  Und dann soll es im letzten Teil noch um einseitige Checkouts gehen oder solche, die weniger als vier Seiten lang sind, wie im Standard Setting vorgegeben.

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

 

2 Antworten zum Beitrag “Virtuemart Checkout Step 4 - und gekauft!”

  1. am 05 Dez 10 um 22:39 meint

    Maik

    Hi, super erklärt. Hat mir bei der Anpassung sehr geholfen. Ich hab lediglich noch ein Problem mit der Anpassung der letzten Checkout-Seite. Auf den Seiten davor hatte ich in der basket_b2c.tpl die SKU aus dem Warenkorb genommen. Auf der Bestellung absenden- Seite ist die Tabellenzeile plötzlich wieder da und ich weiß nicht, woher diese kommt. In der get_final_confirmation.tpl wird ja lediglich der Warenkorb aufgerufen. Hast du dazu eine Idee?

    Beste Grüße Maik

  2. am 08 Dez 10 um 16:21 meint

    Hallo,

    das Warenkorb-Template gibt es “zweimal”. Auf den ersten Seiten wird das von Dir editierte Template benutzt. Auf der Bestätigungsseite wird das ro_basket_b2c.tpl benutzt (RO=ReadOnly). In diesem Template sind die Formularelemente in den Produktzeilen (Menge, Aktualisieren, Löschen) nicht enthalten.

    Gruß, Thomas

Auch was dazu sagen?