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

intenet, webdesign, Titanium, Appcelerator, Webtechnologien,iPhone, iPad, objective-c
Apfel für die Hosentasche

Titanium von Appcelerator ermöglicht die Erstellung von mobilen Anwendungen auf Basis von etablierten Webtechnologien - auch für iPhone und iPad.
internet, webdesign, microsoft, webmatrix beta 3, editor, php, html, css, javascript, sql server
Auf dem Prüfstand

Mit WebMatrix entwickelt Microsoft einen Web-Baukasten, der neben einem Webserver Editoren für PHP, HTML, CSS und JavaScript sowie den SQL Server…
Die besten CMS-Themes auf Basis von HTML5
Give me five!

HTML5 gehört zu den wenigen Trends, die alle Software-Hersteller nicht nur mit vollmundigen Worten, sondern auch tatkräftig unterstützen.…
PHP
Web-Programmierung

Nach langer Betaphase wurde jetzt die Version 5.4 der Web-Scriptsprache PHP veröffentlicht. Sie verspricht nicht nur mehr Performance sondern auch…
Page-Flip-Aktionen für mobile Apps erstellen
Ratgeber: "CSS"

Wir zeigen Ihnen an einfachen Beispielen wie Sie Page-Flip-Aktionen einbinden. Gerade im mobilen Bereich ist dies sehr beliebt, hierbei verschwindet…
News
Video
SciFi-Action mit Ryan Gosling und Harrison Ford
Video
Agatha-Christie-Verfilmung mit Johnny Depp
Video
Kinostart: 23.11.2017