Loading...

Modulentwicklung

Der OXID eShop ist installiert, Kategorien, Artikel und Versandkostenregeln angelegt. Erste Schritte bei der Individualisierung Deines Online-Shops sind über ein Child-Theme vorgenommen. Was noch fehlt, ist die Erweiterung des Funktionsumfanges.

Der OXID eShop erfüllt meist nur die Grundfunktionalitäten der eigenen Unternehmensanforderungen. Um die eigenen Unternehmensanforderungen abzubilden, gibt es die Möglichkeit seinen Shop über Module entsprechend in der Logik zu erweitern.

Ich selbst unterteile Module für OXID eShop gerne in zwei Bereiche: Standard und shopspezifische Modullösungen. Eine Standard-Modullösung sollte in allen OXID eShops einsatzfähig sein und eine Shopspezifische-Modullösung muss nur im eingesetzten OXID eShop funktionieren.

OXID eShop Modulentwicklung
Bild von Mudassar Iqbal auf Pixabay

Einleitung

Bevor man überhaupt in die Umsetzung geht empfiehlt es sich zu prüfen ob es nicht bereits eine Modullösung gibt welche die eigene Anforderung abdeckt. Leider sind die wenigsten Module im offiziellen OXID eSales Store gelistet.

Sollten Deine Recherchen keine bestehende Modullösung hervorbringen, dann bleibt Dir nichts anderes übrig die entsprechende Modullösung selber umzusetzen oder umsetzen zu lassen.

Ein wichtiger Kostenfaktor ist, ob Dein geplantes Modul nur in Deinem Online-Shop funktionieren soll oder das Modul wiederverwendbar sein soll um es auch in anderen OXID eShops installieren zu können. Eine Shopspezifische-Modullösung stellt die deutlich kostengünstigere Variante dar.

Kosten Modulentwicklung

Icon

Shopspezifische-Modullösung

2.500,- €
( Ø Entwicklungskosten )

  • Standard Shop Funktionalitäten erweitern
  • Nahtlose Integration ins Shop-Theme
  • Lizenzform CE, PE oder EE bekannt
  • Shop-Version bekannt
  • Modullösung wiederverwendbar
Icon

Standard-Modullösung

30.000,- €
( Ø Entwicklungskosten )

  • Standard Shop Funktionalitäten erweitern
  • Unterstützt die bekannten Standard Themes
  • Kompatibel mit CE, PE und EE Lizenzen
  • Unterstützt mehrere Shop-Versionen
  • Modullösung wiederverwendbar

Blog-Serie (Stand 2015)

Blogserie zur OXID eShop Modulentwicklung – Schritt für Schritt Anleitung.

Teil 1: Warum? Was? Wie? – Modulentwicklung

Im 1. Teil gehen wir der Frage nach Warum? man ein Modul schreibt und machen uns vorab in einer Planungsphase Gedanken über das Problem was unser Modul lösen soll und die Idee wie wir das Problem über unser Modul lösen möchten.

How to Modulentwicklung [Teil 1]

Teil 2: Grundlagen

Im 2. Teil gucken wir uns die wichtigste Datei eines Moduls im Detail an – die metadata.php. Dies gehört zu den Grundlagen die man zur Modulentwicklung wissen muss.

Über eine Daumenregel zeige ich auf wie man im Admin Controller, Model und View einer Ansicht identifiziert. Dies ist wichtig um zu wissen welche Klasse oder Block man mit seinen Modul erweitert.

Dann steigen wir auch schon in die Modulentwicklung ein und erweitern eine Adminansicht über eine Block Überladung mit einer eigenen Checkbox.

Für unsere eigene Checkbox erweitern wir die Datenbanktabelle um eine eigene Spalte.

Zusätzlich sorgen wir über ein Modulevent dafür, dass unsere eigene Spalte bei Modulaktivierung automatisch angelegt wird.

How to Modulentwicklung [Teil 2]

Teil 3: Admin erweitern – Grundgerüst

Im 3. Teil geht es darum wie man einen eigenen Menüpunkt im Admin anlegt.

Wir schauen uns an welche Klassen und Template Dateien wir anlegen müssen und legen diese im Grundgerüst an.

Außerdem lernen wir wie man eigene Sprachkonstanten für den Admin definiert.

How to Modulentwicklung [Teil 3]

Teil 4: Admin Grundgerüst – Funktionalität hinterlegen

Im 4. Teil lernen wir wie wir das Admin Grundgerüst aus dem 3. Teil mit Leben füllen und die Funktionalität hinterlegen.

Um unser Admin Grundgerüst mit Leben zu füllen, definieren wir eigene Datenbanktabellen und ein eigenes Model.

Für die Anzeige und Speicherung lernen wir die Methoden render und save kennen.

How to Modulentwicklung [Teil 4]

Teil 5: Modullogik ins Theme integrieren

Im 5. Teil beschäftigen wir uns wie wir unsere neue Modullogik im meist individuellen Theme des Shops im Frontend integrieren.

Im Detail schauen wir uns an wie wir das Standard Theme Azure auf der Produktdetailseite um einen weiteren Tab erweitern.

Dann blicken wir auf das Formular welches das Abschicken neuer Fragen zum Produkt ermöglicht.

Zusätzlich lernen wir das Fehlerhandling über die Datei EXCEPTION_LOG.txt kennen und wie man über die Datei config.inc.php die SEO URLs ausschaltet.

How to Modulentwicklung [Teil 5]

Teil 1: Warum? Was? Wie?

Warum schreibe ich ein OXID eShop Modul?

Der Shop bietet die Option 137 nicht an, welche man gerne zur Verfügung hätte. Dies stellt ein Problem dar. Die Lösung der Shop muss über ein Modul individualisiert werden.

Zuerst sollte man überlegen ob man das Problem nicht mit den Bordmitteln vom Shop über Umwege irgendwie lösen kann.

Sollte dies nicht möglich sein, schaut man im eXchange nach ob bereits eine fertige Modullösung existiert.

Erst wenn dies nicht der Fall ist oder einem die angebotenen Module nicht zufriedenstellen sollten – schreibt man sein eigenes Modul.

Planungsphase

  1. Analyse: Was ist das Problem?
  2. Konzeption: Idee
  3. Planung: Wie löse ich dieses Problem?

Was ist das Problem?

Manche Produkte sind sehr erklärungsbedürftigt und der Kunde hat eine Frage die nicht über die Produktbeschreibung beantwortet werden konnte.

Idee

Die Idee um das Problem zu lösen ist die Möglichkeit Fragen zu einem erklärungsbedürftigen Produkt stellen zu können.

Die Lösung soll ein eigener Tab im Frontend bei der Produktdetailseite sein, wo der Kunde seine Frage zum Produkt stellen kann.

Damit bereits beantwortete Fragen nicht doppelt gestellt werden, sollen die Fragen und Antworten nach Freischaltung veröffentlicht werden.

Wie löse ich dieses Problem?

Admin

  • Artikel verwalten -> Artikel -> Erweitert -> Neue Checkbox “Produkt erklärungsbedürftig?”
  • Artikel verwalten -> Neuer Menüpunkt “Fragen & Antworten”

Frontend

  • Produktdetailseite -> Neuer Tab “Fragen & Antworten” mit Auflistung freigeschalteter Fragen und Antworten
  • Produktdetailseite -> Innerhalb des neuen Tabs ein Formular um eine Frage zu stellen

Datenhaltung

  • Neue Spalte in der Tabelle oxarticles für die Checkbox
  • 2 neue Tabellen: Fragen und Antworten, Verknüpfungstabelle (zwischen Fragen & Antworten und Artikel)

Fortsetzung

Im 2. Teil der Modulentwicklung geht es nächste Woche weiter mit: Wie schreibe ich ein OXID eShop Modul?

Key Learnings

  • Option 137 nicht vorhanden
  • Bereits gelöst?
  • Problem
  • Idee
  • Lösung

Teil 2: Grundlagen

OXID eShop Admin Daumenregel
Screenshot OXID eShop Admin

Wie schreibe ich ein OXID eShop Modul?

Die metadata.php Datei

Die wichtigste Datei bei der Modulentwicklung ist die metadata.php Datei.

In der metadata.php Datei werden alle technischen Modulinformationen hinterlegt, die das OXID Framework benötigt um die eigenen Anpassungen zu adoptieren.

Zuerst legt man ein eigenes Modulverzeichnis an. Der Name des Modulverzeichnisses beginnt mit dem Entwicklerkürzel und dann folgt der Modulname.

Nachdem man das eigene Modulverzeichnis angelegt hat, legt man die metadata.php Datei innerhalb des eigenen Modulverzeichnisses an.

Die metadata.php Datei enthält zwei Variablen. Diese sind die Metadata Version Variable $sMetadataVersion = '1.1' und die Modul Array Variable $aModule = array(...).

Die Metadata Version Variable enthält die Metadata Versionsnummer und die Modul Array Variable enthält Pflichtfelder und optionale Felder.

Pflichtfelder metadata.php Datei

Erklärungen zu den Pflichtfeldern

id
Eindeutige Modul ID mit Entwicklerkürzel bis und Modulname QuestionAnswer
title
Modulbezeichnung Modul für Fragen und Antworten zum Artikel
extend
Das extend Array zeigt alle überladeten OXID Framework Klassen an
files
Das files Array zeigt alle eigene Klassen an die dem OXID Framework bekannt gemacht werden sollen
blocks
Das blocks Array zeigt alle erweiterten oder überschriebenen OXID Blocks an
settings
Das settings Array zeigt die Modulkonfigurationen und -einstellungen an

Admin Tab um eigenes Feld erweitern

Zu allerest möchten wir eine Checkbox ergänzen. Wir haben festgelegt, dass wir gerne eine Checkbox mit der Bezeichnung Produkt erklärungsbedürftig? bei der Artikelverwaltung im Tab Erweitert ergänzen möchten.

Ziel ist es bei jedem Artikel individuell festlegen zu können ob im Frontend der Tab Fragen & Antworten angezeigt wird.

Das OXID Framework bietet dort die Möglichkeit dies über eine Block Überladung zu bewerkstelligen.

Jetzt ist die große Frage was ist ein Block?

Ein Block ist ein definierter Codeabschnitt, diesen Codeabschnitt kann man über eine Blocküberladung ändern oder erweitern.

In unserem Fall möchten wir den Block gerne erweitern. Beim Erweitern eines Blocks kann man vor oder nach dem Codeabschnitt des Blocks seinen Code platzieren.

Wir entscheiden uns dafür unseren Codeabschnitt nach dem Codeabschnitt des Blocks zu platzieren.

An zweiter Stelle fragen wir uns wie ist ein Block als solcher im Quellcode zu erkennen?

Ein Block steht wie folgt in der Smarty Template Datei:

An dritter Stelle fragen wir uns wie finde ich nun den Blocknamen aus dem Erweitert Tab um diesen Block zu überladen?

Daumenregel um Admin Controller, Model und View zu identifizieren

Wenn man sich in den Adminbereich einloggt und über die linken Adminmenüpunkte drüber hovern, dann sieht man unten Links den Link eingeblendet wohin die Reise geht.

Innerhalb dieses Links ist über den Parameter cl der Controller definiert. Hinter dem Parameter cl folgt der Controllername.

Den Controllername findet man im OXID Framewort unter dem Verzeichnis /application/controllers/admin/ wieder.

Öffnet man den entsprechenden Controller article.php findet man die Template Variable protected $_sThisTemplate = 'article.tpl', welche den Namen des verwendeten Templates enthält.

Die Template Datei article.tpl findet man im Verzeichnis /application/views/admin/tpl/ wieder.

Schaut man sich die Template Datei an findet man ein HTML Dokument mit Frames vor. Im Frameset Tag sind 2 Frames enthalten:

Die 2 Frames enthalten die Listen- und Detailansicht:

  • die Liste article_list.tpl
  • die Detailansicht article_main.tpl

Die Listenansicht und Detailansicht Templates besitzen im OXID Framework immer die gleichen Suffixes. Die Suffixes lauten _list und _main.

Wenn es sich nun im Admin um einen Tab handelt. Findet man den zugehörigen Controller, Model und View anhand des Namens welcher sich hinter der Route beim drüber hovern des Tabs unten links angezeigt wird.

In unseren Fall wäre dies für den Erweitert Tab #article_extend, das Template heißt also article_extend.tpl.

Unser Block den wir gerne erweitern möchten heißt admin_article_extend_form.

Block Überladung in metadata.php bekannt machen

Da wir nun das Admin Template und den Namen des Blocks kennen den wir gerne erweitern möchten, können wir den Block in der metadata.php im Blocks Array bekannt machen:

Der Wert template gibt an in welchen Tempalte sich der Block befindet.

Der Wert block gibt an in welchen Codeabschnitt bzw. Block sich die Überladung befindet.

Der Wert file gibt an wo sich unsere Block Template Datei im Modulverzeichnis befindet.

Für unsere Überladung legen wir das Verzeichnis views mit dem Unterverzeichnis blocks an. In dem Unterverzeichnis blocks legen wir folgende Blocküberladungsdatei article_extend.tpl an:

Der Smarty Tag [ { Dollar smarty . block . parent } ] sorgt dafür, dass vor unser Checkbox der Original Code innerhalb des definierten Blocks angezeigt wird.

Die Blocküberladung Informationen werden beim erstmaligen Aktivieren des Modul in der Tabelle oxtplblocks gespeichert.

Aktivieren wir unser Modul im Admin unter Erweiterungen -> Module und gucken uns den Erweitert Tab im Admin erneut an wurde unsere Checkbox Produkt erklärungsbedürftig? ergänzt.

Datenbankfeld anlegen

Das Speichern unser Checkbox übernimmt das OXID Framework automatisch. Allerdings ist dafür die Voraussetzung, dass unser Artikelfeld in der Datenbanktabelle oxarticles bekannt ist.

Damit wir sicherstellen, dass unser neues Datenbankfeld immer vorhanden ist nutzen wir in der metadata.php das Events Array.

Genauer wir benutzen die Event Methode onActivate um festzulegen welche Routine ausgeführt werden soll wenn das Modul aktiviert wird.

Zusätzlich müssen mir noch eine eigene Klasse dem OXID Framework bekannt machen.

In unser eigenen Klassen können wir dann unsere onActivate definieren und das SQL hinterlegen welches beim Aktivieren des Moduls abgesetzt werden soll.

Der Wert onActivate enthält den Klassennamen + Methodennamen der statisch definierten Methode in unserem Modul welche in unserem Modul bei Modulaktivierung ausgeführt wird.

Neben dem hinzufügen des Events wurde noch unsere eigene Klasse bisQuestionAnswerEvents mit der Methode onActivate über das files Array ergänzt.

Für unsere eigene Klasse haben wir das Verzeichnis core mit der Datei bisquestionanswerevents.php angelegt.

Über ein Alter Statement erweitern wir die Tabelle oxarticles um das Feld bisinneedofexplanation.

Nachdem wir unser Modul um die statische Methode onActivate ergänzt haben deaktivieren und aktivieren wir unser Modul erneut.

Jetzt wurde im Hintergrund unser Alter Statement ausgeführt.

Nun ist unser Tabellenfeld bekannt und wir können die Checkbox anklicken und unsere Änderung speichern.

Herzlichen Glückwunsch du hast erfolgreich über ein Modul im OXID Admin ein neues Tabellenfeld hinterlegt und bekannt gemacht!

Fortsetzung

Im 3. Teil der Modulentwicklung geht es nächste Woche weiter mit:
Wie lege ich im Admin einen eigenen Menüpunkt “Fragen & Antworten” an?

Key Learnings

  • Aufbau der metadata.php Datei kennen gelernt
  • Eigenes Admin Feld über Blocküberladung definiert
  • Eigenes Datenbanktabellenfeld über Modul Event angelegt

Teil 3: Grundgerüst

OXID eShop Admin eigener Menüpunkt Fragen und Antworten
Screenshot eigener OXID eShop Admin Menüpunkt

Wie lege ich im Admin einen eigenen Menüpunkt “Fragen & Antworten” an?

Die Menüpunkte für den Admin sind in der Datei menu.xml hinterlegt, um unseren eigenen Menüpunkt hinzuzufügen legen wir innerhalb unseres Moduls eine eigene menu.xml Datei an.

Für unser Modul möchten wir gerne unter dem Adminmenüpunkt -> Artikel verwalten -> Alle Bewertungen unseren eigenen Menüpunkt Fragen und Antworten definieren.

Das OXID Framework besitzt an vielen Stellen seine Ecken und Kanten. Dies ist nun so eine. Um den Hauptmenüpunkt Artikel verwalten um einen eigenen Menüpunkt erweitern zu können müssen wir in der Original Datei menu.xml den Block suchen der diesen Hauptmenüpunkt enthält und kopieren diesen in unsere im Modulverzeichnis angelegte menu.xml Datei.

Wir fügen unsere eigenen Menüpunkt unter dem letzten SUBMENU ein.

In unserem Submenu haben wir nun einen allgemeinen Controller bisquestionanswer_listofquestions definiert. Dieser Controller würde schon ausreichen um ein eigenes Template für unseren Menüpunkt zu definieren und zu verwenden.

Da wir uns am OXID Admin Design Aufbau orientieren möchten haben wir noch einen eigenen Listenansicht Controller bisquestionanswer_listofquestions_List und für unseren Haupttab den Controller bisquestionAnswer_listofquestions_main definiert.

metadata.php um unsere Einträge erweitern

Zu allererst erweitern wir unsere bisherige metadata.php um die neuen Einträge für unsere eigenen Admin Controller im files Array und Admin Views im neu definierten Array Eintrag templates.

Eigene Sprachkonstanten definieren

Für unsere eigenen Sprachkonstanten legen wir in unseren Modul das Unterverzeichnis /modules/bisQuestionAnswer/views/admin/de/ an. Innerhalb des Unterverzeichnis legen wir die Sprachdatei bisquestionanswer_lang.php an.

Eigene Admin Controller anlegen

Für unseren eigenen Adminmenüpunkt Fragen und Antworten legen wir das Admin Controller Verzeichnis /modules/bisQuestionAnswer/application/controllers/admin/ an.

Unsere 3 eigene Admin Controller

  • Controller von unseren eigenen Adminmenüpunkt
    bisQuestionAnswer_ListofQuestions
  • Controller für OXID Admin Listenansicht
    bisQuestionAnswer_ListofQuestions_List
  • Controller für OXID Admin Detailansicht
    bisQuestionAnswer_ListofQuestions_Main

Eigene Admin Views anlegen

In unseren Admin Controllern haben wir 3 eigene Admin Templates den Controllern zugewiesen. Für unsere 3 Admin Templates legen wir das Verzeichnis tpl innerhalb des Verzeichnisses /modules/bisQuestionAnswer/views/admin/tpl/ an.

Unsere 3 eigene Admin Views

  • View von unseren eigenen Adminmenüpunkt, welcher die Listen- und Detailansicht einbindet
    list_of_questions.tpl
  • View für OXID Admin Listenansicht
    list_of_questions_list.tpl
  • View für OXID Admin Detailansicht
    list_of_questions_main.tpl

Die Admin View Templates sind vorerst reine Rohvorlagen und werden später um Quellcode ergänzt. Tüftle an wieder verwendbaren Snippets. Lasst euch überraschen! Fortsetzung folgt.

Fortsetzung

Im 4. Teil der Modulentwicklung geht es nächste Woche weiter mit:
Wie definiere ich eine eigene Datenbanktabelle, designe die Admin Templates und hinterlege die Funktionalität?

Key Learnings

  • Eigenen Admin Menüpunkt anlegen
  • Eigene Sprachkonstanten definieren
  • Eigene Listen- und Detailansicht Controller erstellen
  • Eigene Listen- und Detailansicht Views erstellen

Teil 4: Funktionalität

OXID eShop Admin eigener Menüpunkt Fragen und Antworten
Screenshot Fragen & Antworten Menüpunkt OXID eShop Admin

Wie definiere ich eine eigene Datenbanktabelle, designe die Admin Templates und hinterlege die Funktionalität?

Eigene Datenbanktabellen

Für unser Modul haben wir bereits ein eigenes Datenbanktabellenfeld in der Artikeltabelle angelegt.

Wir benötigen nun noch eine eigene Datenbanktabelle für die Speicherung der Fragen und Antworten und eine Verknüpfungstabelle für die Zuordnung.

Unsere eigenen Datenbanktabellen
  • bisquestionanswer
  • oxobject2bisquestionanswer

Damit diese Datenbankanpassungen bei Modulaktivierung vorgenommen werden – überarbeiten wir unsere Eventklasse bisQuestionAnswerEvents des Moduls.

Um sicherzustellen, dass bei Reaktivierung des Moduls keine Fehler auftreten ergänzen wir eine Prüfung ob unser Datenbanktabellenfeld bisinneedofexplanation bereits existiert und erzeugen unsere eigenen Datenbanktabellen nur wenn diese nicht bereits existieren.

Admin Templates

Ein Admin Template im Detail zu verstehen ist nicht einfach. Bei der Entwicklung orientiere ich mich an einen bestehenden Template und passe dieses an.

Es folgen die überarbeiteten Admin Views.

  • View für OXID Admin Listenansicht
    list_of_questions_list.tpl
  • View für OXID Admin Detailansicht
    list_of_questions_main.tpl

Ich habe 4 neue Sprachkonstanten in den Templates definiert. Die 4 Sprachkonstanten müssen in der Sprachdatei ergänzt werden.

Eine Detailaufschlüsselung der Template Dateien würde diesen Artikel sprengen. Zum besseren Verständnis der Admin Templates plane ich kleinere Vorlagen und Hilfestellungen zu veröffentlichen.

Funktionalität

Für die Funktionalität müssen wir ein Model anlegen – da wir eigene Datenbanktabellen verwenden.

Wir legen ein eigenes neues Model an. Im Model machen wir den Klassennamen und Datenbanktabellennamen bekannt.

Nachdem wir unser Model angelegt haben, müssen wir dieses in der metadata.php bekannt machen.

Im Admin Controller der Liste bisQuestionAnswer_ListofQuestions_List machen wir unser neues Model bekannt und legen eine eigene Select Abfrage an.

Die eigene Select Abfrage ist notwendig da wir gerne die Artikelnummer in unserer Listenansicht mit anzeigen möchten.

Damit in unserem Stamm Tab die Daten des ausgewählten Listeneintrages erscheinen und bearbeitbar sind müssen wir unser Controller für OXID Admin Detailansicht anpassen.

Fortsetzung

Im 5. und letzten Teil der Modulentwicklung geht es weiter mit:
Wie integriere ich meinen neuen Tab “Fragen & Antworten” auf der Produktdetailseite im Frontend?

Key Learnings

  • Eigene Datenbanktabellen angelegt
    • Fragen und Antworten Tabelle
    • Verknüpfungstabelle
  • Groben Aufbau der Admin Listen- und Detailansicht kennen gelernt
  • Zusammenspiel der Admin Listen- und Detailansicht
  • Eigenes Model definieren
  • Model Verwendung innerhalb der Listen- und Detailcontroller

Teil 5: Integration

OXID eShop Frontend Fragen und Antworten Tab
Frontend Fragen & Antworten Tab OXID eShop

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 Dollar-Zeichen this->blSeoMode mit dem Wert false die lesefreundliche SEO URL auszuschalten.

Die Variable Dollar-Zeichen 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
Top