Warenkorblösung für tt_products
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
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
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
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
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
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
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
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
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.