Virtuemart: Checkout Optimierungen

Der Checkout ist das Herzstück eines jeden Shops (wenn es das überhaupt gibt - hatte ich das nicht auch schon zur Produktdetailseite geschrieben?), allein schon, weil sich genau hier entscheidet, ob der Kunde sich durchklickt und bestellt oder die Bestellung abbricht. Und Kaufabbruchraten sind hoch, auch noch im Warenkorb. Das eine sind die Konditionen, die da den ein oder anderen im letzten Schritt doch noch abschrecken, das andere aber sind auch die Themen Usability und Optik.

Eine Serie zum Thema Checkout Optimierung für Virtuemart 1.3. Teil 1: um was geht es überhaupt?

Virtuemart, das muss man leider sagen, macht es einem nicht ganz so leicht. Virtuemart macht es einem aber auch nicht unmöglich, insbesondere kann viel Tuning über die Theme Dateien des Verzeichnisses /components/com_virtuemart/themes erledigt werden. Leider ist gerade der Checkout eines der komplexeren Themen und so kommen da schnell Berührungsängste auf.

Requisiten

Das A und O des Webdesigners ist ein sauberes HTML und ein schlüssiges, sauberes CSS. Dies gilt selbstverständlich ganz allgemein, insbesondere aber für Virtuemart, denn es kann einem eine Menge Arbeit sparen. Mit sauber meine ich hier tabellenfrei und ein bisschen wiederverwendbar - aber auch ein standardkonformes HTML und CSS. Keine Angst - Tabellen, bei denen man sich austoben kann, bringt Virtuemart selbst noch genug mit.

Ich schreibe genau das so explizit, weil ein unschlüssiger Code schon generell zu Ärger führen (ganz abgesehen, dass er einfach wenig elegant ist), hier aber wirklich Probleme schaffen kann, die eigentlich nicht da sind. Ich empfehle aus diesem Grund auch dringend eine Bereinigung der theme.css im Themeverzeichnis.

Vielleicht auch noch ein bisschen was zum Theme generell. Die vielen Dateien mögen ja zunächst abschreckend wirken, insbesondere für weniger PHP-bewanderte Webmacher oder Hobbybastler. Eine Sicherungsdatei hilft und so schwer ist das Experimentieren auch nicht. Im Übrigens empfinde ich die Erstellung eines eigenen Templates natürlich sehr elegant. Dafür muss nur einfach das Default Theme kopiert und umbenannt werden. Idealerweise passt man dann noch die theme.xml Datei an, die im Basisverzeichnis liegt.
Mein Tipp für Anfänger ist:

  • Sicherungsdatei anlegen (klar!)
  • alten Code stehen lassen, höchstens auskommentieren (auch wenn damit alles kurzfristig doppelt aufgeführt werden sollte)
  • zunächst eine leere Struktur aus DIVs und Dummytext entwerfen, Klassenstile definieren und im theme.css festlegen
  • im letzten Schritt mit den aus dem ja noch bestehenden Code mit den passenden PHP Variablen befüllen
  • erst im allerallerletzten Schritt alles entfernen, was nicht benötigt wird.

Die meisten Variablen übrigens sind ihrer Benennung nach wirklich selbsterklärend.

Nun aber zum Checkout…

Die Anatomie des Checkout

Der Checkout Prozess besteht aus dem auszucheckenden Warenkorb (Cart als die Logik/Basket als der visuelle Teil - mehr zu dieser Unterscheidung im Folgenden, falls nötig) und einer Reihe von Angaben zum Benutzer, zur Bezahlmethode, zum Versand und zur Lieferung, die in bis zu vier Schritten durchlaufen werden können (auch das ist konfigurierbar). Virtuemart bietet ja einige Optionen zum Checkout, beispielsweise Registrierung, stille Registrierung oder auch ohne Benutzerregistrierung, so dass verschiedene Konstellationen möglich sind.

Ohne besondere Einstellungen geht es beim Checkout durch folgende Steps:

  • der Warenkorb (Basket) mit Link “zur Bestellung”
  • Login oder Registrierung von Neukunden, ohne Registrierung Eingabe der Rechnungsadresse, die zunächst automatisch zur Lieferadresse wird
  • Angabe und Auswahl einer Lieferadresse mit Möglichkeit zur Eingabe abweichender Lieferadressen
  • Auswahl bzw. reine Anzeige der Versandmethode
  • Auswahl der Bezahlmethode
  • Überprüfung der Daten und des Warenkorbs (nun angezeigt inklusive der für die gewählte Versandart anfallenden Versandkosten)
  • Redirect mit Anzeige der Eingangsbestätigung der Bestellung

Die Schritte 3-6 entsprechen dabei dem eigentlichen Checkout Prozess. An jedem dieser Schritte sind verschiedene Dateien beteiligt, die ich in den nächsten Folgen anhand eines relativ wenig “getunten” Beispiels vorstellen will:

Die Basket Dateien: alle Dateien im Verzeichnis /basket des Themes liegenden Dateien zum Tuning der Tabellenansicht, unterschieden nach B2C und B2B sowie dem Warenkorb während des Bestellprozesses als auch für die letztendliche Bestellung ( die “ro” (read only) Varianten).

Die Registrierungsdateien: die man am Besten per CSS und ohne Codeänderungen angehen sollte

Die einzelnen Checkout Steps: alle Dateien im Verzeichnis /checkout des Themes liegenden Dateien zum Tuning der Ansicht sowie ein Blick hinter die Kulissen, nämlich die im Verzeichnis /adminstrator/components/com_virtuemart liegenden Dateien.

Die kleinen Helferlein Dateien

Nicht alle potenziellen Wünsche sind über das Theme handlebar - aber das meiste hinsichtlich der Optik lässt sich mit etwas trickreichem Styling gut hinbekommen. Ebenso soll es ein bisschen um die typischen Kundenwünsche gehen: hier noch ein Stück… macht es Sinn, das auch anzuzeigen,… die Formulierung wäre anders schöner…. also rundrum alles, was der zukünftige Shopbetreiber möchte, um einen benutzerfreundlichen Shop anbieten zu können.

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

  1. am 07 Apr 10 um 10:48 meint

    Fein..

    Alle Schritte schön beschrieben..
    Hier findet man sich doch direkt zu recht..

    Grußle Ced

Auch was dazu sagen?