How to Modulentwicklung [Teil 5]

Wie integriere ich meinen neuen Tab “Fragen & Antworten” auf der Produktdetailseite im Frontend?

Ziel ist es einen neuen Tab Fragen und Antworten inklusive Formular zu hinterlegen über den der Shopbesucher seine Frage hinterlassen kann und alle bisher beantworteten Fragen sehen kann.

Die OXID eShop Frontend Integration von Modul Frontend Templates ist eine sehr anspruchsvolle Aufgabe, weil jeder Shop ein individuelles Theme besitzt.

Wir werden uns nun Schritt für Schritt der Frontend Integration annähern.

Frontend Template ermitteln

Wir möchten gerne die Produktdetailseite um einen neuen Tab Fragen & Antworten erweitern. Dazu müssen wir im Standard Theme Azure das Template und die Stelle der Anpassung ermitteln.

Für die Untersuchung von Webseiten verwende ich die Firefox Erweiterung Firebug.

Ich untersuche mit Hilfe von Firebug die Produktdetailseite und den Quellcode der dargestellten Tabs. Suche mir eine eindeutige CSS id heraus.

Meine CSS id die ich zum Durchsuchen des Azure Theme Template Verzeichnisses /application/views/azure/tpl/ verwende lautet:
detailsRelated.

Die CSS id detailsRelated befindet sich in der Template Datei fullproductinfo.tpl wieder. Die Datei fullproductinfo.tpl liegt im Verzeichnis /application/views/azure/tpl/page/details/inc/.

Innerhalb der Datei fullproductinfo.tpl entdecken wir die Einbindung der Template Datei tabs.tpl. Die Template Datei tabs.tpl wird über [{include file="page/details/inc/tabs.tpl"}] eingebunden.

Eigenen Tab hinzufügen

Die Template Datei tabs.tpl ist in mehreren OXID Blöcken aufgeteilt. Dabei steht jeder OXID Block für ein Tab. Wir orientieren uns an dem OXID Block details_tabs_tags der Tags.

Wir definieren unseren eigenen OXID Block bis_details_tabs_question_answer nach dem Tags Block details_tabs_tags.

Über die IF-Abfrage prüfen wir unser eigenes definierte Tabellenfeld oxarticles__bisinneedofexplanation in der Datenbank ab.

Zur Erinnerung wir hatten die im Admin die Checkbox Produkt erklärungsbedürftig? unter -> Artikel verwalten -> Artikel -> Erweitert Tab angelegt.

Sollte die Checkbox Produkt erklärungsbedürftig? beim Artikel ausgewählt sein – wird der neue Tab Fragen und Antworten auf der Produktdetailseite im Frontend angezeigt.

Eigene Frontend Template Datei anlegen

Wir haben in unseren OXID Block bis_details_tabs_question_answer eine neue Template Datei namens bisquestionanswer.tpl im Azure Theme Unterverzeichnis page/details/inc/ eingebunden.

Daher legen wir die Template Datei bisquestionanswer.tpl im Azure Theme Unterverzeichnis page/details/inc/ an.

Innerhalb der Template Datei bisquestionanswer.tpl platzieren wir eine Foreach-Schleife zum Durchlaufen der bisherigen Fragen und Antworten. Darunter legen wir das Formular zum Stellen neuer Fragen.

Das Formular ist am Kontaktformular des Azure Theme orientiert und es wird neben der Frage noch über eine Captcha Abfrage sichergestellt, dass kein Spam in unserer Datenbank landet.

SEO URL ausschalten

Eins bleibt im OXID Framework immer gleich, dies sind die Controller welche im Frontend die Ansicht der Standardseitentypen wie z.B. Produktlisten- und Produktdetailseite steuern.

Damit wir den Controller und zugehöriges Model der Frontendansicht die wir gerne erweitern möchten herausfinden gibt es im OXID Framework die Möglichkeit über die Variable $this->blSeoMode mit dem Wert false die lesefreundliche SEO URL auszuschalten.

Die Variable $this->blSeoMode wird dabei in der config.inc.php ergänzt. Die Schreibrechte der config.inc.php Datei müssen dafür angepasst werden, damit man diese editieren kann.

Zum Editieren die Schreibrechte auf 644 setzen. Anschließend sollte man die Schreibrechte aus Sicherheitsgründen auf 444 zurück setzen.

Controller ermitteln und erweitern

Controller ermitteln

Nachdem wir die SEO URLs ausgeschaltet haben können wir den Controller der Frontendansicht über einen Seitenaufruf der Produktdetailseite ermitteln.

Die URL enthält den GET-Parameter cl mit denen der Controller Aufruf gesteuert wird. Für die Detailseite der Wert des Get-Parameters cl gleich details.

Während ich das Modul programmierte fiel mir auf, dass wir uns in unserem Beispiel schon sehr tief im Azure Template befanden. Der komplete Inhalte des Div’s mit der CSS id="details_container" gehört zum Widget oxwArticleDetails.

Daher müssen wir anstatt den Controller details den Widget Controller oxwArticleDetails überladen.

Da unsere Methode bisGetArticleQuestionsAnswersList() innerhalb der Foreach-Schleife in unserer Template Datei bisquestionanswer.tpl nicht zur Verfügung stehen würde, wenn wir den Controller details überladen würden.

Redirect Fehler

Wenn ein Redirect Fehler vorliegt leitet das OXID Framework uns auf die Startseite des Onlineshops index.php?cl=start&redirected=1.

Häufigste Fehlerursache ist das eine im Template definierte Methode nicht verfügbar ist.

EXCEPTION_LOG.txt

Bei einem Redirect Fehler legt das OXID Framework im Verzeichnis log die Fehlerdatei EXCEPTION_LOG.txt an.

In der Fehlerdatei EXCEPTION_LOG.txt finden wir weitere Informationen zum Fehler in Form einer Ablaufverfolgung der PHP internen Funktion debug_backtrace.

Die Fehlermeldung in der EXCEPTION_LOG.txt verrät uns, dass wir uns in unserer Template Datei bisquestionanswer.tpl bereits in der Widget Klasse oxwArticleDetails befinden und deswegen unsere Methode bisGetArticleQuestionsAnswersList in unser zuerst überladenen Klasse details nicht verfügbar ist.

oxSystemComponentException-oxException (time: 2015-03-16 21:25:54): [0]: Function ‘bisGetArticleQuestionsAnswersList’ does not exist or is not accessible! (oxwArticleDetails)

Controller erweitern

Überladung bekannt machen

Nach unseren kleinen Exkurs über die Fehlersuche überladen wir den Widget Controller oxwArticleDetails.

Dazu müssen wir unsere Überladung in unser metadata.php im extend Array innerhalb des OXID Frameworks bekannt machen.

Überladungscontroller anlegen

Da wir diesmal das OXID Framework erweitern legen wir in unseren Modulverzeichnis den Unterordner extend dadurch können wir überblicken welche Dateien bestehende Klassen im OXID Framework erweitern und welche Dateien wir selbst bekannt gemacht haben.

Unsere neue Unterverzeichnisstruktur lautet /modules/bisQuestionAnswer/extend/application/components/widgets/.

Innerhalb der Unterverzeichnisstruktur legen wir unseren Überladungscontroller bis_oxwarticledetails.php an.

Da wir im OXID Admin freigeschaltete Fragen und Antworten über unsere Methode bisGetArticleQuestionsAnswersList() über eine Foreach-Schleife im Frontend darstellen, definieren wir unsere Methode in unseren Überladungscontroller und geben eine Liste der Fragen und Antworten zurück.

Innerhalb unseres Formulars zum Abschicken einer weiteren Frage haben wir zwei versteckte Forumlarfelder definiert – über die versteckten Formularfelder wird gesteuert – welcher Controller und welche Methode das abgeschickte Formular entgegennimmt und verarbeitet.

Der hidden Parameter cl bestimmt den Controller und der hidden Parameter fnc bestimmt die Methode wohin das Formular beim Abschicken gesendet wird.

Der hidden Parameter enthält unseren überladenen Widget Controller oxwarticledetails. Dieser ist gleich zusetzen mit unserer neuen Klasse bis_oxwarticledetails die den Widget Controller oxwarticledetails überlädt bzw. erweitert.

Daher definieren wir die Methode bisAddQuestion in unserer Klasse bis_oxwarticledetails.

Unsere Methode bisAddQuestion übernimmt das Verarbeiten der Formulardaten, veranlasst die Speicherung der Frage und gibt dem Fragensteller Feedback über den erfolgreichen Eingang der Frage.

Model bisQuestionAnswer erweitern

Unser Model bisQuestionAnswer erweitern wir um die Methoden bisGetQuestionsAnswersList und bisSaveQuestion, welche wir in unserer Klasse bis_oxwarticledetails verwenden.

Frontend Ergebnis

Wir haben es geschafft! Im Frontend auf der Produktdetailseite haben wir unseren Tab Fragen und Antworten integriert.

Key Learnings

  • Frontend Template Datei ermitteln zur Erweiterung
  • Eigenen Tab im Azure Theme auf der Produktdetailseite hinzufügen
  • Eigene Frontend Template Datei im Azure Theme anlegen
  • SEO URL ausschalten für die Modulentwicklung
  • config.inc.php Bearbeiten, Rechte vergabe
  • Controller der Seite ermitteln zur Überladung
  • Einen der häufigsten OXID eShop Fehler kennen gelernt – Redirect Fehler
  • Fehlerdebugging mit Hilfe der EXCEPTION_LOG.txt kennen gelernt
  • OXID eShop Controller überladen

Der Beitrag How to Modulentwicklung [Teil 5] erschien zuerst auf Bischoff Webentwicklung.


0 Antworten

Hinterlassen Sie einen Kommentar

Wollen Sie an der Diskussion teilnehmen?
Feel free to contribute!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *