medamind

Virtuemart: Checkout Step 1- die Lieferadresse

Der Nutzer ist nun registriert, zumindest  hat er schon seine Adressdaten eingegeben und wurde damit vom System erfasst - ein erster Schritt. Nun geht es an die wichtigen Informationen zum Bezahlvorgang. Der Virtuemart Checkout umfasst per Standardeinstellung vier Schritte, die ich der Reihe nach vorstellen wollte, ergänzend dazu abschließend ein weiterer Beitrag zum Thema “Checkout Varianten”.

Die folgenden Schritte sind in gewisser Weise ähnlich aufgebaut: zunächst wird nach den Checkout Schritten der Warenkorb angezeigt, - der an dieser Stelle übrigens auch noch aktualisiert werden kann -  nach dem Basket werden die nötigen Informationen dieses Schritts abgefragt (wieder habe ich die Tabellenzellen markiert!):

Den ersten Teil des Checkouts hatte ich damit schon vorgestellt - die Darstellung entspricht 1:1 dem Basket. Den Checkout Schritten, insbesondere dem, was bei eigenem Design beachtenswert ist, werde ich noch einen eigenen Artikel widmen.

Der zweite Teil kann mehr oder weniger komplett über Theme Dateien gesteuert werden, die wieder im Themes Verzeichnis liegen /components/com_virtuemart/themes/default/templates/checkout. Die Datei zur Anzeige der im vorhergehenden Schritt angezeigten Rechnungsinformationen heißt customer_info.tpl.php, die andere, wichtigere (Shipping Information, also Auswahl der Lieferadresse) heißt get_shipping_address.tpl.php und dann wäre da noch die list_shipping_address.tpl.php.

get_shipping_address.tpl.php ist die Basis des ersten Checkout Schritts, denn sie bindet wiederum zunächst das Template zur Darstellung der Rechnungsadresse, dann eine Klasse  (letztes Foto beinhaltet einige Test-Texte) sowie letztendlich auch die Listung der bereits eingetragenen Lieferadressen ein.

An dieser Stelle wird es leider etwas inkonsistent - wer Wert legt auf eine einheitliche Darstellung, wird also einen Blick in diese beiden Dateien werfen müssen.

Die folgenden Punkte sind wahrscheinlich besonders interessant im Hinblick aufs Layout:

• die Überschrift zur Rechnungsadresse ist als H4 implementiert, die Überschrift zur Shipping Information als sectiontableheader Klasse
• die Tabellenspalten links sind ungleich breit
• die Tabellenbreite der Lieferadressen  ist schmal, so dass der Button “next” nach rechts neben die Tabelle rutscht (noch eklatanter wird dies bei mehreren Lieferadressen)
• die Adressaktualisierung und die Option, eine Lieferadresse hinzuzufügen, sind unterschiedlich

Also mal ein Blick auf diese ganz typischen “könnten Sie da bitte noch kurz…” Maßnahmen:

Ob nun die H4 oder der sectiontableheader das Mittel der Wahl ist… tja, das müsst Ihr selbst entscheiden.  Da fällt mir ein - genau das wäre auch mal einen Blogeintrag wert - einfach um klärend tätig zu werden. Für mich hat die Klasse sectiontableheader eine ganz klare Bedeutung, die sich schon aus ihrem Namen erschließt. Das eine wird in den Dateien get_shipping_address.tpl.php und list_shipping_address.tpl.php definiert, das andere in der customer_info.tpl.php. Bei der Gelegenheit würde ich ja dann auch die Styles entfernen und alles über die template.css des Templates lösen.

Die Tabelle für die Lieferadressenlistung bekommt man über die list_shipping_address.tpl.php in den Griff. Ich empfehle natürlich ganz klar die Nutzung von Klassenstilen für alle Tabellen - so spart man sich fixe Breitenangaben und hat eine durchgängige Lösung geschaffen, die man dann auch in der Datei customer_info.tpl.php einsetzen kann. Warum das alles übrigens interessant ist, klärt sich, sobald man den Checkout Prozess auf weniger als vier Seiten reduziert und damit die Informationen zusammenfasst!

Hier reguliert man dann auch idealerweise die Tabellenbreite.

Wer genau hingesehen hat, dem wird vielleicht aufgefallen sein, dass sich zwischen Straße (Adresse) und Ortsangabe ein Abstand befindet. Grund ist das Rendering in einer neuen Tabellenzeile und ein mitgeliefertes cellpadding - es helfen Enfernung plus passender Klassenstil.  Marginal, aber existent. Da man die Datei customer_info.tpl.php sowieso an deutsche Gegebenheiten anpassen wird, kann man bei dieser Gelegenheit natürlich auch hier noch Anpassungen vornehmen.

Finetuning

Abschließend dann noch ein bisschen Finetuning in der checkout.index.php unter /adminstrator/components/com_virtuemart/html. Ab hier gilt wie immer und ohne weitere Worte selbstverständlich spätestens das Datensicherungsgebot!

Wer sich dann noch an das Tuning des “next” Buttons machen möchte, der muss sich an den Core wagen. Die entsprechende Passage ist folgende in ca. Zeile 150

if( !in_array('CHECK_OUT_GET_FINAL_CONFIRMATION', $checkout_steps[$current_stage]) ) {
?>
<div align=”center” >
<input type=”submit” class=”button” name=”formSubmit” value=”<?php echo $VM_LANG->_(’PHPSHOP_CHECKOUT_NEXT’);?> &gt;&gt;” />
</div>
<?php
}

Hier nur ein kleiner Tipp: nutzt die Chance und verwendet eigene Klassenstile (in diesem Fall darf es auch eine ID sein).

Abschließend noch Grundsätzliches

Virtuemart ist  ein tolles Joomla Addon. Es ist nicht einfach, aber es ist mächtig. Leider hat es einige Altlasten, die für ein gelungenes, schlüssiges Layout unter Umständen einfach beseitigt werden müssen. Wenn ich hier zu Virtuemart schreibe und wie man eben jene Layoutprobleme beseitigt oder noch wichtiger, auch den abwegigsten Kundenwunsch noch realisiert, so dient das einzig der Dokumentation und der Hilfe für den ein oder anderen Virtuemart Nutzer.

Also mal ein Danke an den Sören - vielleicht trägt es ja auch dazu bei, dass einige Ideen in zukünftige Versionen einfließen.

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