Generischer Warenkorb für TYPO3 mit wt_cart

Wer kennt das nicht: das Projekt ist beinahe fertig, plötzlich hätte der Kunde "schnell" noch gerne eine "Kleinigkeit" hier oder da umgesetzt, einen kleinen Warenkorb, 'Youtube Funktionalität' oder Ähnliches.

Die Warenkorbfunktionalität betreffend gibt es für TYPO3 mittlerweile eine einigermaßen elegante, weil generische Lösung, nämlich die Erweiterung wt_cart.

Mit dieser Erweiterung im Zusammenspiel mit der zusätzlichen Erweiterung powermail lassen sich einfache Anfragevorgänge im Stil eines kleinen Shops umsetzen, ohne gleich eine der großen, umfangreichen, aufwändig zu konfigurierenden und administrierenden Erweiterungen benutzen zu müssen.

Erweiterung besorgen: Auf TYPO3.org ist die Erweiterung wt_cart (Link auf Extension im TER) in Version 3.0.0 als Betaversion für TYPO3 4.5 - 6.2 kostenlos verfügbar. Des Weiteren gibt es eine Produktwebseite auf der die Macher von wt_cart einige nützliche Informationen rund um die Erweiterung bereitstellen. Außerdem hat man die Möglichkeit die Weiterentwicklung der Erweiterung durch Sponsoring zu unterstützen: wt-cart.com.

Die Konfiguration ist vergleichsweise einfach und man kommt mit der gebotenen Dokumentation bereits recht weit. Daher werde ich hier auf die Standardanforderungen nicht eingehen. Das Wissen darum, wie man eine TYPO3-Erweiterung installiert, konfiguriert, integriert und testet setze ich beim geneigten Leser voraus.

Doch ein kleines Feature ist leider noch nicht ganz ausgereift, nämlich das Hinzufügen von Produkten zum Warenkorb mittels AJAX. Das mitgelieferte eID-Script ist leider etwas veraltet und aufgrund der fehlenden Dokumentation nicht ganz einfach zur korrekten Arbeit zu überreden.

Aber es gibt einen simplen Workaround, der sich zumindest für kleine und mittlere Seiten (Traffic) anbietet, bei dem man auf das genannte eID-Script komplett verzichten kann. Das Vorgehen eignet sich im Übrigen generell für diverse schnell umzusetzende AJAX Funktionalitäten und kommt mit TYPO3 Bordmitteln aus. Wie gesagt, die Performance ist bei einem gut durchdachten eID-Script natürlich besser, aber was nützt uns das, wenn selbiges nicht in ausreichender Qualität vorliegt.

Für unseren Workaround benötigen wir diesfalls jQuery und eine funktionierende Colorbox. Natürlich kann man das Ganze auch mit gleichwertigem Ersatz durchführen, wenn man das entsprechende Know-How mitbringt, da ich persönlich aber ein großer jQuery Fan bin, kommt bei unserem Beispiel dieses zum Einsatz.

Weiters benötigen wir ein zusätzliches PAGE-Objekt in TYPO3.

Und zum Schluß sind noch einige wenige Zeilen JavaScript-Code vonnöten.

Ich verwende hier ein kurzes schnelles Standard-TypoScript. Natürlich könnte man auch ein FLUID Template oder ähnliches verwenden. Außerdem ist das PAGE-Objekt auf den Einsatz in einem iframe optimiert. Wenn man keinen iframe in der Colorbox benutzen will, müsste man natürlich die entsprechenden Optionen für den Header-Code etc... bearbeiten.

Außerdem ist hier Raum für Optimierung! Ich weise der Einfachheit halber alle JavaScript und CSS Dateien der Hauptseite auch dieser Seite zu. Eigentlich reichen aber einige wenige Anweisungen für das Aussehen des Warenkorbs und des Anfrageformulars. Da die Dateien aber ohnehin lokal gecached werden, ist auch diese Optimierungsmöglichkeit für später vorzumerken, wenn tatsächlich Hunderte oder gar Tausende von Besuchern am Tag das Formular aufrufen sollten.

Hier nun der entsprechende TypoScript-Code für das Feld 'Setup':

## Global Cart Iframe PageObject
objPageGlobal_cartframe = PAGE
objPageGlobal_cartframe {
  typeNum = 77
  includeCSS < objPage.includeCSS
  includeJSlibs < objPage.includeJSlibs
  includeJS < objPage.includeJS
  jsInline < objPage.jsInline
  config {
    admPanel = 0
    no_cache = 1
    debug = 0
  }
  shortcutIcon = /favicon.ico
  10 = TEMPLATE
  10 {
    template = FILE
    template.file = fileadmin/path/to/template.tmpl
    workOnSubpart = CR_DOCUMENT_POPUP
    marks {
            CR_CONTENT = CONTENT
            CR_CONTENT {
                table = tt_content
                select {
                    pidInList = {pageId.ofCart}
                    where = colPos=0
                    orderBy = sorting
                    languageField = sys_language_uid
                }
            }
        }
  }
}

Ein schnelles, einfaches Template im herkömmlichen Marker-Stil ist im Normalfall völlig ausreichend:

<!-- ###CR_DOCUMENT_POPUP### begin -->
  <center>
    <div style="width:90%;text-align:left;" class="innerWrap">
      ###CR_CONTENT###
    </div>
  </center>
<!-- ###CR_DOCUMENT_POPUP### end -->

Die folgende JavaScript Funktion soll nun bei jedem Laden der Seite aufgerufen werden. Überflüssig zu erwähnen, dass {pageId.ofCart} natürlich ersetzt werden muss durch die Seiten-ID der Warenkorb-Seite.

function riccWtCart_eid() {
    jQuery('.wtcart_form form').submit(function() {
        var actionUrl = "/index.php?id={pageId.ofCart}&type=77";
        jQuery.post(
            actionUrl,
          jQuery(this).serialize(),
            function(data) {
                jQuery.colorbox({
                    href: actionUrl,
                    iframe: true,
                    innerWidth: '70%',
                    innerHeight: '70%'
                });
            },
            'html'
        );
        return false;
    });
}

Und das war's auch schon. Das Ganze funktioniert nun so, dass bei jedem Klick auf den 'Warenkorb-hinzufügen' Knopf eine Colorbox öffnet, mit dem Inhalt der Seite des Warenkorbs. Und dorthin wird auch via JavaScript das jeweilige Produktformular gesendet, was ein Hinzufügen des Produktes zum Warenkorb zur Folge hat.

Der Besucher kann dann entweder den Warenkorb weiter bearbeiten, oder die Colorbox schließen und weiter einkaufen.

Falls der Besucher JavaScript deaktiviert hat, wird automatisch das Standardverhalten der wt_cart Erweiterung angewandt.

Die hier vorgestellte Lösung ist also einfach, robust und effektiv. Außerdem ist die Methode sehr flexibel und von der jeweils eingesetzten Erweiterung völlig unabhängig. Man muss lediglich den entsprechenden JavaScript-Aufruf anpassen (Selektor für das Formular-Element, bzw. generell der Daten-POST).

Mit der Einschränkung auf der Performance-Seite kann man meiner Meinung nach bei 80% - 90% der Seiten gut leben ohne auch nur einen einzigen Gedanken daran verschwenden zu müssen.

Gutes Gelingen!