Virtuemart: Checkout Step 2 - Versandart

Nachdem mit Step 1 geklärt wurde, wohin denn verschickt werden soll, geht es in Step 2 um die Versandart Auswahl, soweit der Kunde hier auswählen kann.

Der Versand übrigens, das soll an dieser Stelle mal gesagt werden, auch wenn es eigentlich nicht Thema ist, wird von vielen angehenden Shopbetreibern gerne unterschätzt und als Fragestellung hintenangestellt. Ein fataler Fehler: Versandkosten sind Teil der Gesamtkalkulation. Leider machen es uns die großen Versender nicht unbedingt einfach… wer viel versendet, bekommt gute Konditionen. Wer gerade erst startet, muss sich hocharbeiten und damit noch härter kalkulieren, während er gleichzeitig konkurrenzfähig bleiben muss.

Die Standardeinstellungen

Der Checkout Step 2 sieht (inkl. markierter Tabellenzellen und Block Elemente) ohne großartiges Styling so aus:

Interessant hinsichtlich des optischen Tunings ist vor allem der Bereich unterhalb des Basket ab “Please select…”.

Die Betrachtung der Versandkosten funktioniert an dieser Stelle nicht ohne einen Blick ins Backend. Versandkosten sind von mehreren Faktoren abhängig:

  • vom Shipping Modul
  • von der Lieferadresse
  • ggf vom Gewicht
  • ggf vom Einkaufswert (Flex Shipping)

Flex Shipping ist standardmäßig aktiviert. Die Kosten entsprechen den Standard Versandkosten (hier Standard Shipping $ 43,28). Zusätzlich werden standardmäßig die konfigurierten Versandkosten des Standard Versandkostenmoduls (Standard Shipping Modul) angezeigt (die Verwendung von Standard an dieser Stelle übrigens vielleicht etwas verwirrend).

Die Theme Dateien

Leider geben die beiden Theme Dateien unter ../components/com_virtuemart/themes/default/checkout/ get_shipping_method.tpl.php und list_shipping_methods.tpl.php für die Auswahl der Versandart relativ wenig Stylingmöglichkeiten her.

Zunächst greift get_shipping_method.tpl.php, danach oder besser als deren “Innenleben” die list_shipping_methods.tpl.php.

Was dazwischen greift, ist- je nach Konfiguration- eine passende Datei aus ../administrator/components/com_virtuemart/classes/shipping. Also mal wieder der Core. Und mal wieder gilt: ab hier nur weiter mit Backup und nur für den, der weiß, was er tut.

Meines Erachtens (und das ist eher intuitiv gesteuert), ist es unabdingbar, die Flex Shipping Kosten etwas transparenter zu machen, sprich zu erläutern. Ich als Kunde würde an dieser Stelle nicht so recht verstehen, was der Unterschied zu den weiter gelisteten Methoden ist - ganz abgesehen davon, dass hier nicht klar wird, durch wen versandt wird. Eine nicht unerhebliche Fragestellung. Gerne weiß ich als Kunde, ob ich mein Paket an der Paketstation abholen kann, beim Nachbarn, im Hermes Versand Partnershop oder bei UPS irgendwo in der Nähe… Die hierfür verantwortliche Zeile findet man unter ../administrator/components/com_virtuemart/classes/shipping in der Datei flex.php in Zeile 83ff:

$html .= "<label for=\"flex_shipping_rate\">Standard Shipping: ";

Sollte man an dieser Stelle ergänzend Änderungen vorhaben, so empfehle ich:

  • Ergänzung der Sprachdatei um eine Variablen für ein beliebiges Textsnippet
  • Einbindung dieser Variablen an gewünschter Stelle

Das wirklich Problematische ist die Inkonsistenz der Funktionen list_rates innerhalb der Shipping Klassen und das wiederum scheint auf das gewachsene System Virtuemart und die unterschiedlichen Autoren zurückzuführen zu sein.

Wer also an dieser Stelle Optimierungsbedarf hat, sollte sich eben jene Funktion in der für ihn passenden Datei ansehen ( hier flex.php und standard_shipping.php). Da ich aber kein Freund von Core Änderungen bin, hier das Pflichtprogramm zur Begrenzung von individuellen Hacks und “Anpassungen”:

  • darauf achten, Tabellenzellen im Template oder in der theme.css einen passenden (Innenabstand) mitzugeben
  • Styling der sectiontableentry1/2 Klassen wirklich ausreizen
  • Labels stylen
  • Inputs stylen
  • Styles für den Kontext #vmMainPage

Eine Sache übrigens wird man ohne Core Anpassung oder Überschreiben nicht los und die findet sich in standard_shipping.php ungefähr in Zeile 98:

$html .= "<td width=\"10\">

Glücklicherweise wird es in der Praxis meist anders aussehen: da werden die Versandkosten in irgendeiner Form so gestaltet sein, dass die Einbindung eines einzigen Shipping Moduls vollkommen ausreichend ist.

Fazit

Das Styling des Checkout Schritts 2 für die Versandart ist eng mit der Konfiguration der Versandkosten verknüpft. Je mehr verschiedene Versandmodule eingebunden sind, desto umfangreicher und entsprechend langwieriger werden die womöglich anfallenden Stylingaufgaben.

Wer allgemein auf die oben unter “Pflichtprogramm” gelisteten Stylingtipps achtet, wird hier abseits verschiedener Shippingmethoden grundsätzlich ein klares, wenn auch vielleicht kein individuelles Styling bekommen, ohne dabei Änderungen am Core vornehmen zu müssen.

Und so soll es ja auch sein…

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

 

3 Antworten zum Beitrag “Virtuemart: Checkout Step 2 - Versandart”

  1. am 16 Nov 10 um 15:43 meint

    schöne beschreibung ohne die ich wohl nur sehr langsamer weiter gekommen wäre.
    ich habe die formatierung der “standard_shipping.php” für mich (VM 1.1.5) mit ner dynamischen tabelle gelöst indem ich mehrere “ ”: eingefügt habe:

    zeile 72 das 100% rausgemacht, jetzt:
    $html = “\n ” ;

    zeile 73 mit “&nbsp’s”, jetzt:
    $html .= “” . $VM_LANG->_(’PHPSHOP_INFO_MSG_CARRIER’) . “     ” ;

    zeile 73 mit “&nbsp’s”, jetzt:
    $html .= $VM_LANG->_(’PHPSHOP_INFO_MSG_SHIPPING_METHOD’) . “     ” ;

    zeile 113 mit “&nbsp’s”, jetzt:
    $html .= “f( “shipping_rate_id” ) . “\”>” . $dbc->f( “shipping_carrier_name” ) . “      ” ;

    zeile 114 mit “&nbsp’s”, jetzt:
    $html .= “f( “shipping_rate_id” ) . “\”>” . $dbr->f( “shipping_rate_name” ) . “      ” ;

  2. am 17 Nov 10 um 12:23 meint

    Anne-Kathrin

    Hallo Jürgen,

    Diesen Abstand hättest du allerdings auch erzeugen können, indem Du die angezeigten Infos beispielsweise in HTML-Spans packst und mit CSS formatierst…

  3. am 29 Apr 11 um 12:23 meint

    Hi und vielen Dank für die ausführliche Infos. Wirklich sehr, sehr nützlich! Grüße aus Berlin, Paulina

Auch was dazu sagen?