Anzeige
Anzeige
E-Commerce
Artikel merken

Mit der Extension „tt_products“ schnell zum einfachen Shop: TYPO3-Shop für Einsteiger

Die TYPO3-Extension „tt_products“ bietet kleinen und mittelständischen Unternehmen einen guten Einstieg in die Welt der Shopsysteme. In dieser Einführung soll möglichst schnell ein einfaches Shopsystem in eine vorhandene TYPO3-Installation integriert werden. Folgende Voraussetzungen werden in diesem Schnelleinstieg geschaffen: Installation von „tt_products“ und – falls noch nicht vorhanden – notwendiger „Hilfs-Extensions“, Anlegen eines TypoScript-Shop-Template, Erstellen eines SysOrdners für die Produkte sowie Aufbau der notwendigen Shopseiten über das Einfügen von Plugins.

7 Min. Lesezeit
Anzeige
Anzeige

Installieren Sie über den Extensionmanager zunächst „tt_products“ in der Version 2.6.0 mit allen notwendigen „Hilfs-Extensions“. Bei entsprechender Konfiguration fordert „tt_products“ diese Extensions an und sie werden automatisch mitinstalliert (table, fh_library, div, xajax). Erstellen Sie nun ein Extension-Template in Ihrem Template-SysOrdner und weisen Sie dort über „Include static (from extensions)“ das statische Shoptemplate „Shop System Old Style (tt_products)“ zu. Setup und Constants bleiben zunächst unberücksichtigt. Binden Sie das Template wie gewohnt ins Root-Template der Webseite ein.

Shopseiten anlegen

Anzeige
Anzeige

Erstellen Sie im Seitenbaum eine Hauptseite für Ihren Shop und fügen Sie dort das Shop-Plugin ein. Wählen Sie in den Plugin-Optionen „Produkte: Liste“ aus und speichern Sie den Datensatz ab. Auf dieser Seite werden später Ihre Produkte gelistet.

Legen Sie nun eine weitere Seite für die Detailansicht der Produkte an, fügen Sie das Shop-Plugin ein und wählen Sie in den Plugin-Optionen „Produkte: Einzelansicht“ aus. Diese Seite muss im Menü versteckt sein. Ein Klick auf den Produkttitel beziehungsweise einen entsprechenden Link leitet von der Listen- zu dieser Einzelansicht mit weiteren Detailinformationen.

Anzeige
Anzeige

Für den Warenkorb wird eine weitere Seite benötigt, die ebenfalls das Plugin enthält. Die zu verwendende Option lautet „Warenkorb: Inhalt“. Für die Auswahl der Bezahl- und Liefermethode legen Sie jetzt eine zusätzliche Seite mit dem Shop-Plugin an und wählen aus den Optionen „Warenkorb: Kontrolle und Bezahlung“ aus. Diese Seite muss ebenfalls im Menü versteckt sein.

Anzeige
Anzeige

Um die Bestellung abschließen zu können, wird eine weitere Seite benötigt. Diese enthält als Inhaltselement das Shop-Plugin mit der Option „Warenkorb: Bestellung abschließen“. Auch diese Seite muss wie die vorherigen im Menü versteckt sein.

Der Produkte-SysOrdner

Erstellen Sie unterhalb dieser Seiten einen SysOrdner für Ihre Produkte. Dieser SysOrdner dient als Ausgangspunkt der soeben angelegten Shopseiten, und an dieser Stelle sucht der Shop nach den Produkten. Wird er auf den notwendigen Seiten nicht eingebunden, können später dementsprechend auch keine Produkte angezeigt werden.

Anzeige
Anzeige

Über „Neuen Datensatz anlegen“ können Sie Ihre Produkte anlegen, dies geschieht am besten über das Webmodul „Liste“. Dazu wählen Sie aus der erscheinenden Liste „Produkte“ aus und befüllen das nun erscheinende Backend-Formular (siehe Abbildung) entsprechend mit allen relevanten Informationen über Ihr erstes Testprodukt. Eine Überschrift, ein kurzer Infotext, ein Preis und eventuell ein Bild sollen für die ersten Tests ausreichen. Legen Sie im nächsten Schritt nach dem selben Verfahren einige weitere Testprodukte an.

Das Extension-Template

Als nächstes müssen Sie in das noch leere Extension-Template und dort in die Constants oder den Constant-Editor wechseln, um einige notwendige Konfigurationsschritte vornehmen zu können. Legen Sie den Steuersatz fest, zum Beispiel 19 % und setzen Sie den Haken bei „TAXincluded“, damit die Steuer als Bestandteil des Produktpreises ausgewiesen wird. Definieren Sie der Einfachheit halber zunächst mit „always in stock = 1“ (im Constant-Editor den Haken setzen), dass die Produkte immer ab Lager vorhanden sein sollen. Diese Option kann nachträglich geändert werden, indem Sie im Feld für die Anzahl im Backendformular des Produktdatensatzes die tatsächlich verfügbaren Produkte eintragen. Der Eintrag erleichtert die Bestellungen während der Testphase Ihres Shops.

Da der SysOrdner mit den Produkten auf den Shopseiten bereits als Ausgangspunkt eingetragen ist, muss „PID_list“ für den SysOrdner nicht zwingend gesetzt werden, setzen Sie „PID_list“ der Ordnung halber aber dennoch. Im nächsten Schritt setzen Sie hier die Seiten-ID des Ordners. Für die Anzeige der Einzelansicht setzen Sie bei „PID for single item display“ die entsprechende ID der Detailseite ein. So gehen Sie im Folgenden auch für die Listenansicht (PID for list items display), die Warenkorbseite (PID for basket page), die Seite für die Bezahl- und Liefermethoden (PID for payment page) sowie für die Seite für den Bestellabschluss (PID for finalize page) vor. Ihre Constants sollten nun wie folgt aussehen:

Anzeige
Anzeige
TYPOSCRIPT 
plugin.tt_products.TAXpercentage =19
plugin.tt_products.TAXincluded = 1
plugin.tt_products.alwaysInStock=1
plugin.tt_products.PIDlistDisplay= 123
plugin.tt_products.PIDbasket=234
plugin.tt_products.PIDitemDisplay=345
plugin.tt_products.PIDpayment=456
plugin.tt_products.PIDfinalize=567

Listing 1

Diese Angaben sollen für die ersten Gehversuche mit dem Shop genügen. Wechseln Sie nun ins Setup und nehmen Sie dort die ersten Einstellungen für die möglichen Zahlungsweisen vor. In dieser Grundinstallation sind das Rechnung, Barzahlung und Nachnahme.

Konfigurierung von Versand- und Bezahlmethoden

TYPOSCRIPT 
plugin.tt_products.payment >
plugin.tt_products.payment {
	radio=0
	TAXpercentage=19
	10.title = Rechnung
	20.title = Barzahlung
	30.title = Nachnahme
	plugin.tt_products.shipping {
		TAXpercentage=19
		10.title = Versand innerhalb Deutschland
		10.price = 4.50
		10.TAXincluded=1
		10.excludePayment=20, 30
		20.title = Selbstabholer
		20.price =
		20.TAXincluded=1
		20.excludePayment=10, 30
		30.title = Nachnahme innerhalb Deutschland
		30.price = 8.50
		30.TAXincluded=1
		30.excludePayment=10,20
	}
}

Listing 2

Im Payment wurde mit „radio=0“ zunächst die Anzeige der Zahlungsmethoden im Frontend über Comboboxen definiert, die 1 bedeutet die Auswahl über Radiobuttons. Der Steuersatz wird mit 19 Prozent angegeben und die Zahlungsmöglichkeiten werden gelistet. Der Zahlung gegen Rechnung wird der Versand innerhalb Deutschlands zugewiesen. Hier wird eine Versandkostenpauschale von 4,50 Euro, inklusive Steuern, erhoben. Über excludePayment wird ausgeschlossen, dass die beiden anderen Zahlungsmethoden ausgewählt werden können.

Barzahler holen die Ware im Shop ab, dabei fallen keine weiteren Gebühren an. Ausgeschlossen werden bei dieser „Liefermethode“ die Zahlungsmöglichkeiten Rechnung (10) und Nachnahme (30). Für die Nachnahme fallen zusätzliche Gebühren an, darum erhöht sich die Versandkostenpauschale auf fiktive 8,50 Euro inklusive Steuern. Die Bezahlmethode gegen Rechnung und Barzahlung werden wieder über excludePayment ausgeschlossen.

Anzeige
Anzeige

Damit ist ein einfacher Shop für Testzwecke bereits lauffähig, was natürlich nicht heißt, dass er sich bereits für den produktiven Einsatz eignet.

Versandkostenstaffel mit Count

Beachten Sie, dass sich die hier angegebenen Versandkosten auf die gesamte Warenlieferung beziehen.
Über Count können Sie die Versandkosten an die Liefermengen anpassen. Eine solche Staffel für das Shipping könnte wie folgt aussehen:

TYPOSCRIPT 
10.price.type = count
10.price.1 = 4.50
10.price.2 = 8
10.price.3 = 12
10.price.4 = 16
10.price.5 = 20
10.price.6 = 25
10.price.10 = 30
10.price.noCostsAmount = 500

Listing 3

Als Sahnehäubchen entfallen die Versandkosten ab einem Bestellwert von 500 Euro.

Anzeige
Anzeige

Eigenes HTML-Template einbinden

Das Template wird zu diesem Zeitpunkt aus der Extension „tt_products“ entnommen. Sofern Sie ein eigenes Template anpassen möchten, laden Sie dieses HTML-Template (über Fileadmin) und weisen es in den Constants zu.

TYPOSCRIPT 
plugin.tt_products {
	file.templateFile = fileadmin/osp/templates/tt_products_css.html
}

Listing 4

Dieses Template, das bereits über die meisten Features und Marker verfügt, basiert auf einem tabellenfreien Layout mit CSS-Klassen. Sie finden das HTML-Template und eine zugehörige CSS-Datei auf der Website von Open Source Press [1].

AGBs zuweisen

In Deutschland müssen Sie Ihre AGBs offenlegen. Zu diesem Zweck sollten Sie im Shop-Seitenbaum eine reguläre TYPO3-Seite anlegen und als Textinhalt Ihre AGBs hinterlegen. Diese Seite soll im Menü sichtbar sein. In den Constants des Shop-Template weisen Sie diese Seite über folgende TypoScript-Zeile zu:

Anzeige
Anzeige
TYPOSCRIPT 
plugin.tt_products.PIDagb = 241

Listing 5

Damit ist diese Seite nicht nur über den Seitenbaum sondern auch über die Warenkorbseite, auf der die AGBs akzeptiert und die Adressdaten eingegeben werden müssen, ansprechbar.

Damit die AGBs als Dateianhang in den Bestätigungs-E-Mails versendet werden, legen Sie die Textdatei mit den AGBs ebenfalls im Fileadmin-Verzeichis ab und ergänzen dies in den Constants:

TYPOSCRIPT 
plugin.tt_products {
	file.templateFile = fileadmin/osp/templates/tt_products_css.html
	AGBattachment = fileadmin/osp/templates/tt_products/agb.txt
}

Listing 6

Die Kür: Features für den professionellen Einsatz

Diese Grundkonfiguration ist zunächst einmal lauffähig und kann mit einigen wenigen Anpassungen über den Constant-Editor, wie der E-Mail-Adresse des Shops, für kleine Shops bereits ausreichend sein. Der Shop ist jedoch wesentlich leistungsfähiger und bietet diverse weiterführende Features an. So verfügt er über ein Artikelsystem (darunter versteht man im Allgemeinen Varianten eines Produkts wie Farben, Größen etc.), ermöglicht die Zuordnung von Produkten in Kategorien und bietet über Formulare beziehungsweise Zusatz-Extensions Zahlungsmöglichkeiten mit Kreditkarten an. Ein Gutschein- und Kundenwerbungssystem steht ebenfalls zur Verfügung.

Anzeige
Anzeige

Darüber hinaus kann der Shop auch mit registrierten Benutzern betrieben werden (zum Beispiel über eine Frontend-Benutzerregistrierung) und ermöglicht so, auch verschiedene Kundengruppen anzusprechen – sei es, um zwischen Händler- und Endkundenpreisen zu unterscheiden oder um unterschiedliche Rabatte zu gewähren.

Auch das Layout kann individuell an die eigenen Bedürfnisse angepasst werden. Über Template–Suffixe können zudem verschiedene zusätzliche Designs erstellt werden – beispielsweise, wenn bei einem dreispaltigen Layout ein Shop-Plugin mit einer Listenansicht in der rechten, schmaleren Spalte implementiert werden soll, aber dort weniger Platz zur Verfügung steht und darum eingeschränkte Informationen und kleinere Bilder angezeigt werden sollen.

Eine Merkliste und ein Miniwarenkorb sowie Informationen zu der Produktverfügbarkeit können mit „tt_products“ ebenfalls genutzt werden. Ein Tracking-System bietet zudem die Möglichkeit, den Kunden stets über den Stand seiner Bestellungen zu informieren. Weitere Features sind unter anderem eine einfache Bestellverwaltung, der mehrsprachige Einsatz und die Möglichkeit, mehrere voneinander unabhängige Shops in einer TYPO3-Instanz zu betreiben.

Fazit

Wer schnell einen einfachen Webshop aufsetzen möchte und über eine überschaubare Anzahl an Artikeln verfügt, gelangt mit „tt_products“ schnell an sein Ziel. Die Extension bietet allerdings auch eine stattliche Anzahl an Features für einen professionellen Einsatz.

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
12 Kommentare
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Bert

Schreibfehlerkorrektur:
AGBattachment = fileadmin/osp/templates/tt_products/agb.txt

Antworten
Bert

In den letzten beiden Zeilen (Nachnahme (30)) muss 30 statt 10 stehen.

Antworten
Jan Christe

@Bert Danke für die Hinweise. Habe beide Fehler soeben korrigiert.

Antworten
Andy

Ließe sich tt_products auch als Download-Repository einsetzen? Die ‚Produkte‘ wären in diesem Fall Downloads und der Warenkorb am Ende der ‚Bestellung‘ eine Liste mit Downloadlinks.

Antworten
Andrea Herzog-Kienast

Hallo Andy,
aber sicher doch. Ein Produkt ist ein Produkt ist ein Produkt. Was aber nicht geht, ist ein automatischer Download. Du musst die PDFs an den Kunden versenden.

Beste Grüße,

Andrea

Antworten
hh

„Erstellen Sie nun ein Extension-Template in Ihrem Template-SysOrdner und weisen Sie dort über „Include static (from extensions)“ das statische Shoptemplate „Shop System Old Style (tt_products)“ zu.“

Das ist nicht einsteigergerecht geschrieben!
Ich beschäftige mich jetzt schon eine Weile mit TYPO3, aber ich kann den Anweisungen oben leider nicht folgen, weil ich schlichtweg nicht herausfinde wie.
Wie erstelle ich ein Erweiterungs-Template? Diese Option habe ich bisher immer nur gesehen, wenn es noch keine Templates für die Seite gibt.
Wie weise ich dieses Shoptemplate zu? Wie heißt die Option auf Deutsch? Muss ich da klicken oder es per TypoScript eingeben? Bilder wären hilfreich.
Woher kommt dieses Shop System Old Style Template?

Wie soll das nur was werden, wenn es schon zu Beginn so hapert???

Antworten
Andrea

Das kann ich nicht nachvollziehen.
Das sind TYPO3 Bascis. Ein Extensiontemplate kann man in einem Sysordner oder auf der Startseite des Shops erstellen. z. B. Template in der Modulleiste anklicken und die Seite mit dem Shop auswählen. Dann fragt das System, ob man ein Extensiontemplate erstellen möchte.

Auf der RegisterkarteIncludes bzw. Enthält kann man das statische Template einbinden: Statische Templates einschließen (aus Erweiterungen):. Das statische Template bringt der Shop mit.

Antworten
jürgen

In der aktuellen Version von TYPO3 gibt es einige Änderungen, weshalb Neueinsteiger durch ältere Tutorien vielleicht etwas verwirrt werden. Zum Beispiel gibt es keine Sysordner mehr, sondern nur noch Ordner.
Wenn das angepasst wird, und vielleicht auch solche Basis-Zwischenschritte kurz in einem Nebensatz erklärt werden, dürfte es für einige bestimmt wieder klarer sein.

Ich kann mich gut an meine Anfänge erinnern, bei denen ich schlicht erschlagen war von den tausend TYPO3-Möglichkeiten und auch die einfachsten Dinge nicht gefunden habe, weil die Tutorien oftmals davon ausgingen, daß man soetwas schon beherrscht. Manchmal fühlt man sich dann etwas doof, wenn es heißt „für Einsteiger“, es aber dann doch nicht so ganz für Einsteiger verständlich ist. ;-)

Antworten
Marcel

Hallo zusammen,

ich brech mir grade die Finger bei der Installation der Version 2.7.2.
Gibt es dazu irgendwo eine Anleitung, welche Extensions (die es auch noch zu finden gibt) benötigt werden?
Sobald ich das Statische Template „Shop System CSS Styled (ttproducts)“ einschließe, gibt´s einen Server-Error 500.
Hab´ ich was übersehen?

Gruß, M.

Antworten
christian

Hey, super Tutorial. Vielen Dank!

Antworten
Andrea

Benötigte Extensions sind die aktuelle Version von table, div2007, static_info_tables

Gruß,
Andrea

Antworten
Hendrik

Hallo,

zunächst erstmal danke für dieses Tutorial. Klasse, dass sich jemand die Zeit nimmt und bereit ist, sein Wissen mit z.B. Neueinsteigern zu teilen.

Ich beschäftige mich seit einigen Monaten mit TYPO3 und wollte mich nun an dem Shop ausprobieren. Leider muss ich auch sagen, dass die Anleitung an manchen Stellen nicht sehr aussagekräftig sind. Ich habe es 3x ausprobiert und bin nicht zum gewünschten Erfolg gekommen.

Die Frontend-Seite bleibt bis auf die Überschrift leer.

Alle notwendigen Extensions sind installiert. Erweiterungs-Template ist allerdings in einem Ordner außerhalb des Shopbaumes, aber in die ROOT eingebunden. Muss den Shopseiten vielleicht ein Ordner für die Datensatzsammlung zugewiesen werden?

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige