Virtuemart: der Basket

Bevor es um den eigentlichen Checkout geht, ein kurzer Blick in den Basket, den Warenkorb. Den Basket gibt es in zwei Varianten: B2C und B2B, die sich in erster Linie im Handling der Mehrwertsteuer unterscheiden. Zu jeder der beiden Varianten gibt es zusätzlich eine “read only” Variante -diese kommt im letzten Schritt des Checkouts zur Überprüfung der Bestellung durch den Kunden zum Einsatz.

Mein Testszenario, auch für die folgenden Beiträge, ist das aktuelle E-Commerce Bundle mit Virtuemart 1.1.2 und Joomla 1.5.9 (der Einfachheit halber). Um zu zeigen, wie es aussehen kann, wenn man von Beginn an startet, habe ich das wirklich gelungene Template und Theme deaktiviert und arbeite nun mit Rhuk Milkyway und dem Default Virtuemart Theme inklusive mitgelieferter Beispieldateien. Das Szenario entspricht damit optisch einer Standard Joomla Installation mit separatem Virtuemart und Beispieldateien.

Zutaten im Folgenden unter anderem: die template.css des Templates sowie ggf. die theme.css des Virtuemart Themes.

Der Warenkorb, um den es geht, sieht dann so aus (ich habe wahllos “eingekauft” und die Tabellenzellen markiert):

Man sieht schon: das mit den Tabellen klappt recht gut und ist an dieser Stelle auch sinnvoll - aber vielleicht möchte man es ja etwas anders haben…

Die passende Datei findet man in /components/com_virtuemart/themes/default/basket - je nachdem die passende Variante. Diese handelt - das sei vielleicht noch hinzugefügt- ausschließlich die Tabelle zur Anzeige der Produkte im aktuellen Warenkorb.

Das erste Interessante sind die Tabellenüberschriften - <th> und die Breite der Tabellenspalten.

<tr align="left" class="sectiontableheader">
<th><?php echo $VM_LANG->_('PHPSHOP_CART_NAME') ?></th>
<th><?php echo $VM_LANG->_('PHPSHOP_CART_SKU') ?></th>
<th><?php echo $VM_LANG->_('PHPSHOP_CART_PRICE') ?></th>
<th><?php echo $VM_LANG->_('PHPSHOP_CART_QUANTITY') ?> / <?php echo $VM_LANG->_('PHPSHOP_CART_ACTION') ?></th>
<th><?php echo $VM_LANG->_('PHPSHOP_CART_SUBTOTAL') ?></th>
</tr>

Es ist natürlich eine Überlegung, wie man damit nun umgeht - ich würde aus Gründen der Konstistenz komplett auf eigene Stilzuweisungen verzichten und das Ganze lieber über vernünftige Abstandsangaben für tr.sectiontableheader th lösen, was dann logischerweise auch in der template.css und nicht in der theme.css passieren sollte (gut, das ist Geschmackssache).

Interessanter aber wird es bei der Darstellung der eigentlichen Inhalte, hier das Innere der Schleife für die Auflistung der Produkte im Warenkorb:

<tr valign="top" class="<?php echo $product['row_color'] ?>”>
<td><?php echo $product['product_name'] . $product['product_attributes'] ?></td>
<td><?php echo $product['product_sku'] ?></td>
<td align=”right”><?php echo $product['product_price'] ?></td>
<td><?php echo $product['update_form'] ?>
<?php echo $product['delete_form'] ?>
</td>
<td align=”right”><?php echo $product['subtotal'] ?></td>
</tr>

Ich bin ganz ehrlich, was mich ein bisschen stört, ist hier ganz klar das align. Übrigens auch einige Zeilen weiter, bei der Angabe der Summen und Steuern. Mir persönlich würde eine rechtsbündige Klasse deutlich besser gefallen, insbesondere ist die ja auch wiederverwendbar und allgemeingültiger. Übrigens kann man natürlich auch das valign getrost weglassen, so lange die sectiontableentry Definitionen das bereits vorsehen. (An dieser Stelle muss ich dringend loswerden, dass es mich ziemlich nervt, genau für dieses top immer was schreiben zu müssen - diese mittigen Tabelleninhalte haben bei mir echt Seltenheitswert…, hier halte ich den Default für nicht sonderlich gelungen).

Wiederverwendung fänden rechtsbündige Klassen dann auch in der Anzeige der Summe, ebenso können alle als strong deklarierten Elemente über eine passende Klasse abgehandelt werden, falls gewünscht.

Leider übrigens sehen immer wieder mal (non-commercial) Themes keine weiteren Stile für die sectiontableentry Klassen vor - gerne klatscht da alles mal direkt am Tabellenzellenrand. Es ist ganz gelungen, irgendwo an zentraler Stelle eine Definition für entsprechenden Tabellenzellen-Innenabstände anzulegen oder die sectiontableentry Einträge zu erweitern.

Wichtig am Basket ist für Anfänger vor allem eines: die Schleife möglichst in Ruhe zu lassen und nur an Tabellenzellen oder Zeilen mit Klassenstilen oder (wenn es denn unbedingt sein muss auch Inline Styles) zu manipulieren.

Auch die Icons finden sich übrigens im Theme, jeweils im images Verzeichnis. Hier sei für Stylingfreunde vielleicht angemerkt, dass die Bilder als align=middle deklariert sind. Interessant wahrscheinlich vor allem bei eigenen Bildern, die in der Größe von den bestehenden Theme Bildern abweichen.

Angewandte Basket-”Manipulation”

Es kann passieren, dass der spätere Shopbetreiber sich fragt, warum hier die Textabstände zwischen Produktname und Produktbeschreibung so groß sind und sich eine passende Änderung wünscht.  Ein Blick in den Quellcode hilft hier weiter: Man sieht, dass zwischen dem Artikelnamen und der Attributsbeschreibung, d.h. der Beschreibung der Produktausführung hartkodierte Breaklines eingefügt sind. Hier wird man also mit reinem CSS nicht weiter kommen.

Hier geht es dann an die basket.php, die sich in /administrator/components/com_virtuemart/html befindet. Achtung: dies sind Core Änderungen, die natürlich alles andere als begrüßenswert und damit zu vermeiden sind. Sicherungsdateien sind das A und O - und das Wissen um das, was man hier tut: Die entsprechenden Anweisungen finden sich ab Zeile 84.

Dies also nur der Vollständigkeit halber… Einen gut strukturierten und ansprechenden Warenkorb bringt Virtuemart also schon mit - wer es etwas anders mag, hat eine Menge Möglichkeiten, sich durch Klassen einen sehr individuellen Basket zuzulegen.

Eine Variante, die übrigens für (fast) jede Templatedatei ziemliche Freiheiten bietet, ist ein DIV-Container für das gesamte Element (oder auch einzelne Elemente), fällt mir da noch ein… und plötzlich macht das alles noch mehr Spaß!

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: der Basket”

  1. am 30 Mrz 10 um 14:14 meint

    Hallo Anne-Kathrin,

    Hey, hast du schon gemerkt, dass man wahnsinns tolle gelb-grüne Balken sieht, wenn man gebannt deine Zeilen liest und dann auf die Tastatur kuckt? Kommt vom dem knackigen Pink. Toller Effekt.

    Das nur am Rande. Sagen wollt ich eigentlich: one-stop wäre schön. Aber VM lässt die letzten beiden Punkte des Checkouts (bei mir?) nicht zusammenlegen (durch gleiche nummern unter “Bestellung” für die Steps) sondern bringt immer so eine nervige Besätigungsseite. Hast vielleicht einen Punkt in deiner Lösung vergessen?

    Hilf HImmel hilf!

    Danke

    Daniel

  2. am 30 Mrz 10 um 14:31 meint

    Anne-Kathrin

    Halo Daniel,

    was ist denn eine “nervige Bestätigungsseite”?
    Was wird dort bestätigt?

    Anne

  3. am 04 Aug 10 um 17:23 meint

    Hallo, bei meinem Waren korb werden die Produkte, die ich dort “reinbestelle” soweit nach rechts gerückt, dass die Zahlen schon außerhalb des Menüs erscheinen, statt mittig oder rechtsbündig innerhalb des Warenkorbs. Ich finde es nicht so toll, dass im Warenkorb unterhalb des Strichs/Trennlinie und oberhalb dieser die Produkte angezeigt werden. Oberhalb würde genügen. Ich habe VM 1.1.4. Daher ist es auch sehr schwierig in Foren etwas entsprechendes zu finden.
    Ich würde mich über Hilfe sehr freuen. Denn der Shop, der entstehen soll, ist social entrepreneurship und soll dem Projekt deutsches-haus-rivne.de unterstützen.
    Vielleicht bis auf eine Antwort.
    MfG
    Stefan M.

Auch was dazu sagen?