jetzt anrufen

Skip to main content

Warenkorblösung für tt_products

tt_products: Artikel im Warenkorb
tt_products: Artikel im Warenkorb

Bisher zeichneten sich Shops mit tt_products nicht durch eine einfache Warenkorbbehandlung aus, die dem Benutzer die Navigation im Shop erleichtert.

Ich habe eine kleine Lösung auf Basis eines Formulars ins HTML-Template eingebaut, die auf allen Seiten des Warenkorbes angezeigt wird, bis die Bestellung abgeschlossen ist.

Dabei wird jeweils im Kopf des Shops ein Formular aufgerufen, das zeigt, an welchem Punkt der Bestellung sich der Benutzer befindet.

Die Gestaltung erfolgt über die Div-Container natürlich via CSS.

HTML Template anpassen

HTML Quelltext Warenkorb
HTML Quelltext Warenkorb

Im HTML-Template habe ich am Anfang des Subparts <!---###BASKET_TEMPLATE###--> das erste Formular eingefügt.

Via CSS habe ich anschließend dem ersten Teil des Formulars (class="basket_timeline") Bilder und diesen Links zugewiesen. Wobei lediglich ein Link zum Warenkorb, bzw. zum Formular für die Adresseingabe aktiviert werden kann. Die letzten beiden Bilder sind nicht verlinkt, denn diese Schritte können vom Benutzer nicht ausgewählt werden.

Der zweite Teil (class="basket_timeline_text") stellt die entsprechenden Textlinks dar. Auch hier liegen nur unter den ersten beiden Texten Links. Für die Textlinks habe ich mit CSS Buttons zweckentfremdet, weil mir keine andere Lösung eingefallen ist.

tt_products kennt bisher lediglich für den Warenkorb einen Link wie <!--###LINK_BASEKT###-->, der ein einfacheres Vergehen für dieses Formular erlaubt.

Alle anderen müssen über die Inputs erstellt werden.

Zukünftig soll es jedoch solche Links auch für die anderen Subparts geben und damit das Formular und auch das CSS stark vereinfachen.

Eingabe der Adressdaten

Warenkorb Adressdaten eingeben
Warenkorb Adressdaten eingeben

Das folgende Bild zeigt, dass sich der Besucher nun im nächsten Schritt befindet, der Eingabe seiner Daten. Im Template ist das der Subpart <!-- ###BASKET_INFO_TEMPLATE### -->.

Auch hier wird ein Formular am Anfang des Templates eingefügt.

Anpassung im HTML Template für Step 2

HTML Quelltext Warenkorb: Eingabe der Daten
HTML Quelltext Warenkorb - Adresseingabe

Das HTML-Formular ist im Prinzip identisch mit dem ersten. Allerdings erhält der zweite Link via CSS ein anderes Bild, um den Stand der Bestellung zu verdeutlichen. 

Ob es sinnvoll ist, dem Besucher zu erlauben, zu Schritt 3 zu navigieren, muss man abwägen. Denn er könnte ja auch ein leeres Formular absenden. Aber das ist natürlich über den normalen Submit-Buttons am Ende der Seite auch möglich. Ich habe mich hier für den Link entschieden, aber nicht für dessen Visualisierung.

Fehlerhaft ausgefülltes Formular

HTML Quelltext - Formular im Subpart BASKET_REQUIRED_INFO_MISSING
Fehlerhaft ausgefülltes Formular

Sofern ein Benutzer ein Formular nicht korrekt ausfüllt oder die AGB nicht akzeptiert, leitet tt_products auf eine Fehlerseite weiter, die einen entsprechenden Text ausgibt. Der zugehörige Subpart ist <!-- ###BASKET_REQUIRED_INFO_MISSING### -->.

Auch hier habe ich wieder das Formular eingefügt, das identisch mit dem aus  <!-- ###BASKET_TEMPLATE###  --> ist. Der Besucher kann also lediglich zurück zum Warenkorb oder zur Adresseingabe und seine Daten vervollständigen.

Bestellung abschließen

Warenkorb - Bestellung überprüfen
Warenkorb - Bestellung überprüfen

Sind alle Formularfelder ausgefüllt, geht es nun zum dritten Schritt. Der verantwortliche Subpart ist <!-- ###BASKET_PAYMENT_TEMPLATE###-->.

Dort kann der Besucher seine Bestellung vor dem entgültigen Absenden nochmals überprüfen.

Hier werden wieder Bilder via CSS ausgetauscht, um den Stand der Bestellung zu verdeutlichen sowie die entsprechenden Links eingefügt.

HTML Template Bestellung abschließen

HTML Quelltext Bestellung prüfen
HTML Quelltext Bestellung prüfen

Das Html Template sieht wie folgt aus. Die Links zu Bildern und Texten wurden erweitert, damit der nächste und letzte Schritt der Bestellung durchgeführt werden kann: dem tatsächlichen Abschluss der Bestellung.

Im Prinzig sind das nur kleine Änderungen, die aber notwendig sind, um den Bestellablauf zu visualisieren. Bedenken Sie, dass wir hier nicht in die Extension selbst eingreifen, sondern lediglich das HTML - Template anhübschen.

Bestellung absenden

Warenkorb Bestellung ausgeführt
Warenkorb Bestellung ausgeführt

Im letzten Teil wird die Bestellung letztendlich abgeschlossen. Die Abbildung zeigt dem Benutzer nun, dass er alle Schriftte durchgeführt hat und die Bestellung veranlasst ist. Dieses Formular enthält nun Grafiken derselben Farbe.

Basket Order Confirmation Template

HTML Quelltext - abgeschlossene Bestellung
HTML Quelltext - abgeschlossene Bestellung

Im Subpart <!--###BASKET_ORDERCONFIRMATION_TEMPLATE###--> befindet sich das letzte Formular. Hier wurden alle Grafiken, wieder über CSS, der gleichen Farbe eingefügt. Die Links können aktiviert sein, werden hier jedoch nicht mehr ausgeführt, denn die Bestellung ist bereits abgeschlossen.

jetzt anrufen