typo3 shop mit tt_products: how to 2. Teil

Der Beispielshop für dieses Tutorial befindet sich hier.

Eine geeignete Seiten Struktur für den tt_products Shop wurde bereits im 1. Teil dieses How-To angelegt. Wie dort erwähnt empfiehlt es sich auf der Seite "tt_products shop" ein Extension Template anzulegen. Dort werden dann alle nützlichen Typoscript Konfigurationen für den Shop gespeichert. Im Moment habe wir ausschließlich die Konstanten für den Webshop im Feld "Constants" hinterlegt.

Als nächstes empfiehlt es sich die HTML Templates für den Shop auszulagern. Die Vorlagen dazu befinden sich im Ordner "typo3conf/ext/tt_products/template/". Um effektiv zu arbeiten empfiehlt es sich eine HTML und eine CSS Datei in das eigene Dateisystem auszulagern. Bei mir liegen diese beiden Dateien in folgendem Verzeichn

• fileadmin/template_dateien/templates_ext/shop/tt_products_css.html
• fileadmin/template_dateien/templates_ext/shop/tt_products.css

Der aufwendigste Teil meiner Arbeit war es, diese Templates an meine eigenen Bedürfnisse anzupassen. Deswegen möchte ich hier mal meine Vorlagen zur Verfügung stellen. Es versteht sich von selbst, dass diese weiter bearbeitet werden sollten.

• tt_products_css.html
• tt_products.css

Ich werde die hier angebotenen Dateien bald noch ein wenig anpassen und verbessern. Also nicht wundern wenn ein paar Ungereimtheiten darinnen sind. Anbei auch noch drei Grafiken die ich in meinem Template verwende. Diese Grafiken liegen bei mir in dem Verzeichnis "fileadmin/template_dateien/templates_ext/shop/icons/".

• Warenkorb Bild: basket-big.gif
• Pfeil aktiv: arrow-right-on.gif
• Pfeil passiv: arrow-right-off.gif

Grundlegende Typoscript Einstellungen

In die Constants des Extension Templates kommt nun folgender Typoscript Code:

################################
### Template Datei einbinden ###
################################

plugin.tt_products.file.templateFile = fileadmin/template_dateien/templates_ext/shop/tt_products_css.html

############################
### Grafik Einstellungen ###
############################

# Eigens Symbol für den Shoppingcart definieren
plugin.tt_products.basketPic = fileadmin/template_dateien/templates_ext/shop/icons/basket-big.gif

# Maximale Breite der Bilder in der Listenansicht
plugin.tt_products.maxW_list = 120

# Maximale Breite der Bilder in der Singelansicht
plugin.tt_products.maxW_single = 300

# Maximale Breite und Höhe der Popup Bilder
plugin.tt_products.maxW_popup = 550
plugin.tt_products.maxH_popup = 350

# Maximale Breite der Bilder im Warenkorb
plugin.tt_products.maxW_basket = 60

################
### Diverses ###
################

# maximale Anzahl des selben Produktes
plugin.tt_products.basketMaxQuantity = 20

# Pflichtfelder
plugin.tt_products.requiredInfoFields = name, address, city, zip, email

# Email nur als Plaintext
plugin.tt_products.htmlmail = 0

# Maximale Anzahl der Bilder in der Listenansicht
plugin.tt_products.limitImage = 1

# Maximal Produkte in der Listenansicht, danach Pagebrowser
plugin.tt_products.limit = 10

In das Setup muss folgendes:

# Cache NUR in der Entwicklungsphase ausschalten
config.no_cache = 1

#### SETUP ####

# Eigenes Stylesheet einbinden
page.headerData.1025 = TEXT
page.headerData.1025.value (
   <link rel="stylesheet" type="text/css" href="fileadmin/template_dateien/templates_ext/shop/tt_products.css" />
)

# Default Stylesheet deaktivieren
plugin.tt_products._CSS_DEFAULT_STYLE =

Nun Sollte der Shop schon ein wenig besser aussehen und auch mehr oder weniger funktionieren. Die Einstellungen sind meiner Meinung nach bis jetzt selbsterklärend. Als nächstes werden die Versandoptionen eingestellt und der Shop noch optimaler konfiguriert.