Typogento

Frontend Shop integrieren

image.jpg

© Internet Magazin

Auswahl: In der Produkt-Detailansicht wählen Sie ein Produkt.

Der Code bindet die Magento-Basisbibliotheken ein. Sie sind nun prinzipiell in der Lage, Produkte aus Magento anzeigen zu lassen. Die Typo3-Extension ist in der Lage, alle Blöcke aus Magento einzubinden. Der Block right muss auf allen Seiten des Shops eingebunden werden, da er ein für den Bestellprozess nötiges JS enthält. Die Einbindung kann etwa wie folgt aussehen:

# Einbinden des Magentoblocks right
obj_contentright = COA
obj_contentright {
10 = TEXT
10.value = <div class="col-right
side-col">
20 = USER_INT
20{
userFunc = tx_fbmagento_pi1->main
block=right
nowrap=1
}
30 = TEXT
30.value = </div>
}

Technisch steckt dahinter der Aufruf einer UserFunc, einer PHP-Funktion von Typogento, die sich um die Anbindung kümmert. Die Kategorienavigation können Sie mit diesem Typoscript-Codeschnipsel einbinden:

# Einbinden einer Kategorienavigation
und Erstellen des benötigten Content-
Elements für das Frontend
includeLibs.user_tx_fbmagento_navi
gation = EXT:fb_magento/lib/class.
tx_fbmagento_navigation.php
obj_magenavi = HMENU
obj_magenavi{
special = userfunction
special{
userFunc = user_tx_fbmagento_naviga
tion->categories
pid=1
startcategory=1
}
expAll = 0
1 = TMENU
1 {
itemArrayProcFunc = user_tx_fbmagen
to_navigation->clear
wrap = <ul style="text-align: left">|</ul>
noBlur = 1
expAll = 1
wrap = <ul id="sub-level1">|</ul>
NO {
wrapItemAndSub = <li class="first">|</
li> |*| <li>|</li> |*| <li class=
"last">|</li>
}
}
}

Auch hier ist wieder eine Userfunktion die Basis. Die Formatierung übernimmt dann ein Typo3-TMENU-Objekt. Mit den entsprechenden wrap-Elementen geben Sie an, in welche HTML-Elemente die Navigation eingeschlossen wird.In unserem Fall ist das eine ungeordnete Liste, die Standardlösung für Navigationen. Hier können Sie natürlich auch eigene HTML-Tags und CSS-Klassen definieren. Zu guter Letzt weisen wir die Werte noch dem HTML Template zu:

Haupttemplate = TEMPLATE
Haupttemplate {
template = FILE
template.file = fileadmin/template/
html/template.html
workOnSubpart = RAHMEN
subparts.HEADER = TEXT
subparts.HEADER.value = TYPOGENTO im
Einsatz
subparts.MAGENAVI < obj_magenavi
subparts.INHALT < styles.content.get
subparts.RAND < obj_contentright
}
# Default PAGE object:
page = PAGE
page.10 < Haupttemplate
page.includeCSS {
file1 = fileadmin/template/css/style.
css
}

Angenommen, Sie wollen ein bestimmtes Produkt auf einer Ihrer CMS-Seiten anzeigen lassen, dann legen Sie unterhalb Ihres Root-Templates eine neue Seite an, wählen Sie dort als Inhaltselement Plugins/Magento und geben im Reiter Plug-in unter Anzeigebereich Produktdetailansicht an.Es folgt eine Liste mit all Ihren Produkten. Wählen Sie das gewünschte Produkt aus und speichern Sie die Seite. Das Produkt wird im Frontend Ihrer Seite angezeigt. Damit Bilder auch angeklickt werden können, müssen Sie diese Funktionalität noch im Root Template aktivieren:

# Bilder im Bereich Produktdetails
klickbar machen
[userFunc = tx_fbmagento_getvars
(route|catalog)] && [userFunc =
tx_fbmagento_getvars
(controller|product)] && [userFunc =
tx_fbmagento_getvars(action|gallery)]
page.10 >
page.10 = USER_INT
page.10 {
userFunc = tx_fbmagento_pi1->main
block=content
route=catalog
controller=products
action=gallery
nowrap=1
}
[global]

Das fertige Resultat ist eine einfache Shopseite mit Bildern und Typo3-Inhaltselementen in derselben Inhaltsspalte. Das Bild ist entsprechend anklickbar. Typogento bietet eine hochwertige Integration von Content-Management-System und Online Shop. Es ist ein Leichtes, Daten zwischen den Systemen auszutauschen und Besucher Ihrer Site merken nicht einmal, dass es sich um zwei Systeme handelt. Selbst bei einer Anmeldung werden die User in beiden Systemen konsistent gespeichert.

image.jpg

© Internet Magazin

Ergebnis: TYPO3 Frontend mit Magento Produktdetail-Ansicht aus der Sample Data.

Des Weiteren kann die gesamte grafische Oberfläche des Frontends zentral in einem System (Magento) gesteuert werden. Um Typogento nutzen zu können, bedarf es eines leistungsstarken Webservers, da vor allem Magento als Ressourcenfresser bezeichnet werden kann. Es handelt sich außerdem um Enterprise Software, die entsprechendes Know-how erfordert.Aufgrund der Kompatibilitätsprobleme muss man einige Hürden überwinden, um Typogento zum Laufen zu bringen. Außerdem sollte man sich mit beiden Systemen gut auskennen, um das gewünschte Ergebnis zu erreichen. Wenn alles läuft, dann bietet Typogento eine mächtige Plattform mit zahllosen Funktionen für den professionellen Einsatz als integrierter Onlineshop und CMS.

Mehr zum Thema

HTML 5
Webgestaltung

Google Web Designer ist spezialisiert auf HTML5. Ein Vorteil dieses Standards ist das einfache Einbinden von Videos mit dem Element video. Wir zeigen…
Wir verraten, wie Sie Fritzboxen und andere Router vor Hackern schützen.
Fritzbox, Asus, Belkin und Co.

Fritzbox, Asus, Belkin oder DLink - die Liste der geknackten Router ist lang. Hacker stahlen Passwörter oder NAS-Daten. So machen Sie Ihren Router…
Wir führen Sie zur eigenen Windows-App - unserem PC-Magazin-RSS-Feed.
C# und XAML

Wir zeigen, wie Sie Windows 8.1 Apps selbst programmieren können. Lernen Sie das App erstellen an Hand unseres Beispiels: dem RSS-Feed von PC…
Windows Tipps & Tricks: Benutzerrechte unter Windows 8.1
Programme richtig installieren

Wir zeigen Ihnen, wie Sie sich unter Windows 8.1 alle Benutzerrechte verschaffen und Programme richtig installieren.
Windows 8: Starbildschirm
Microsoft Project Siena

Erstellen Sie sich selbst eine App für Windows 8, die auf alle Funktionen Ihres Tablets zugreifen kann, inklusive Kamera, Mikrofon und Lautsprecher.…