Vom Anfänger bis zum Fortgeschrittenen in OpenCart Modulentwicklung

In den vorherigen Artikeln haben wir die MVC-Architektur untersucht und unseren ersten Controller, das erste Modell und die erste Ansicht in der OpenCart-Anwendung erstellt. Wir haben dies getan, um die Kernanwendung besser zu verstehen. 

Um einen Schritt weiter zu gehen, werden wir ein benutzerdefiniertes Modul für OpenCart erstellen.

Was sind OpenCart-Module??

OpenCart-Module sind analog zu Add-Ons, Plugins oder Erweiterungen in anderen Content-Management-Systemen. OpenCart ermöglicht es uns, seine Funktionalität durch Module zu erweitern, ohne die Dateien der Anwendung bearbeiten zu müssen.

Wie bei vielen anderen Content-Management-Systemen gilt es im Allgemeinen als bewährte Methode, die Funktionalität der Kernanwendung durch die bereitgestellten APIs zu erweitern. OpenCart unterscheidet sich nicht. Mithilfe von Modulen können wir die Funktionalität der Kernanwendung einführen, entfernen oder modifizieren, die in abteilbarer und wartbarer Weise ausgeführt wird.

OpenCart verfügt über einen eigenen Erweiterungsmarkt, in dem bereits zahlreiche Erweiterungen verfügbar sind. Sie können sich auch die breite Palette an OpenCart-Modulen und -Erweiterungen auf dem Envato-Markt ansehen.

OpenCart-Module und -Erweiterungen auf dem Envato-Markt

Wenn Sie eine bestimmte in OpenCart ausgeführte Aufgabe benötigen und Schwierigkeiten haben, diese Aufgabe selbst zu erledigen, bestellen Sie einen der preiswerten, benutzerdefinierten OpenCart-Entwicklungsdienste von Envato Studio.

OpenCart-Entwicklung in Envato Studio

Unser erstes Modul

Um uns mit dem Modulsystem von OpenCart vertraut zu machen, können wir das obligatorische Modul "Hello World" schreiben. Dadurch werden Eingaben vom Dashboard abgerufen und am vorderen Ende der Site angezeigt.

Beachten Sie, dass OpenCart eine Reihe von vorgefertigten Modulen enthält. Daher versuchen wir, diese möglichst zu nutzen, wenn wir alleine arbeiten. Führen Sie zunächst folgende Schritte aus:

  1. Erstellen Sie einen Controller-zu-Administrationspfad: admin / controller / module / helloworld.php .
  2. Erstellen Sie eine Sprachdatei für den Admin-Pfad: admin / sprache / englisch / modul / helloworld.php .
  3. Erstellen Sie einen View-to-Path-Pfad: admin / view / template / module / helloworld.tpl .

1. Die Sprachdatei

Wie in unseren vorherigen Artikeln erläutert, enthält die Sprachdatei den statischen Text, der in unserer Ansichtsdatei angezeigt werden soll. Für die helloworld.php Sprachdatei enthalten die folgenden Variablen die möglichen Textfelder, die wir in unserem Modul anzeigen müssen:

1. Der Controller

Öffnen Sie die soeben erstellte "Hello World" -Controller-Datei und fügen Sie die Klasse hinzu Klasse ControllerModuleHelloworld erweitert Controller  im Anschluss an das Class Naming Convention. Als nächstes platzieren Sie den folgenden Code in die Klasse.

Schritt 1: Die Standardfunktion 

private $ error = array (); // Dies wird verwendet, um die Fehler festzulegen, falls vorhanden. public function index () // Standardfunktion $ this-> language-> load ('module / helloworld'); // Laden der Sprachdatei von helloworld $ this-> document-> setTitle ($ this-> language-> get ('heading_title')); // Setzt den Titel der Seite auf den Überschriftentitel in der Sprachdatei, d. H. Hello World $ this-> load-> model ('Einstellung / Einstellung'); // Laden des Einstellungsmodells (alle OpenCart-Module und allgemeinen Einstellungen werden mit diesem Modell gespeichert) if (($ this-> request-> server ['REQUEST_METHOD'] == 'POST') && $ this-> validate ( )) // Start If: Überprüft und überprüft, ob Daten kommen, durch die Save (POST) -Methode $ this-> model_setting_setting-> editSetting ('helloworld', $ this-> request-> post); // Durchsuchen Sie alle kommenden Daten in Setting Model, um sie in der Datenbank zu speichern. $ this-> session-> data ['success'] = $ this-> language-> get ('text_success'); // Um ​​den Erfolgstext für Daten anzuzeigen, speichern Sie $ this-> redirect ($ this-> url-> link ('extension / module', 'token ='. $ This-> session-> data ['token'], 'SSL')); // Zur Modul-Liste umleiten // Ende Wenn / * Weisen Sie die Sprachdaten für die Analyse zu, um sie anzuzeigen * / $ this-> data ['heading_title'] = $ this-> language-> get ('title_title'); $ this-> data ['text_enabled'] = $ this-> language-> get ('text_enabled'); $ this-> data ['text_disabled'] = $ this-> language-> get ('text_disabled'); $ this-> data ['text_content_top'] = $ this-> language-> get ('text_content_top'); $ this-> data ['text_content_bottom'] = $ this-> language-> get ('text_content_bottom'); $ this-> data ['text_column_left'] = $ this-> language-> get ('text_column_left'); $ this-> data ['text_column_right'] = $ this-> language-> get ('text_column_right'); $ this-> data ['entry_code'] = $ this-> language-> get ('entry_code'); $ this-> data ['entry_layout'] = $ this-> language-> get ('entry_layout'); $ this-> data ['entry_position'] = $ this-> language-> get ('entry_position'); $ this-> data ['entry_status'] = $ this-> language-> get ('entry_status'); $ this-> data ['entry_sort_order'] = $ this-> language-> get ('entry_sort_order'); $ this-> data ['button_save'] = $ this-> language-> get ('button_save'); $ this-> data ['button_cancel'] = $ this-> language-> get ('button_cancel'); $ this-> data ['button_add_module'] = $ this-> language-> get ('button_add_module'); $ this-> data ['button_remove'] = $ this-> language-> get ('button_remove'); / * Dieser Block gibt die Warnung zurück, falls es welche gibt * / if (isset ($ this-> error ['warning'])) $ this-> data ['error_warning'] = $ this-> error ['warning'];  else $ this-> data ['error_warning'] = "; / * Endblock * / / * Dieser Block gibt den Fehlercode zurück, falls vorhanden * / if (isset ($ this-> error ['code']) ) $ this-> data ['error_code'] = $ this-> error ['code']; else $ this-> data ['error_code'] = ";  / * End Block * / / * Making of Breadcrumbs zur Anzeige vor Ort * / $ this-> data ['breadcrumbs'] = array (); $ this-> data ['breadcrumbs'] [] = array ('text' => $ this-> language-> get ('text_home')), 'href' => $ this-> url-> link ('common / home ',' token = '. $ this-> session-> data [' token '],' SSL '),' separator '=> false); $ this-> data ['breadcrumbs'] [] = array ('text' => $ this-> language-> get ('text_module'), 'href' => $ this-> url-> link ('extension) / module ',' token = '. $ this-> session-> data [' token '],' SSL '),' separator '=>' :: '); $ this-> data ['breadcrumbs'] [] = array ('text' => $ this-> language-> get ('heading_title'), 'href' => $ this-> url-> link ('module) / helloworld ',' token = '. $ this-> session-> data [' token '],' SSL '),' separator '=>' :: '); / * Breadcrumb-Block beenden * / $ this-> data ['action'] = $ this-> url-> link ('module / helloworld', 'token ='. $ This-> session-> data ['token') ], 'SSL'); // URL, die angewiesen werden soll, wenn die Schaltfläche "Speichern" gedrückt wird $ this-> data ['cancel'] = $ this-> url-> link ('extension / module', 'token =' Daten ['Token'], 'SSL'); // URL, die umgeleitet werden soll, wenn die Schaltfläche "Abbrechen" gedrückt wird / * Dieser Block prüft, ob das Textfeld "Hallo Welt" gesetzt ist, und analysiert es. Andernfalls rufen Sie das Standardfeld "Hallo Welt" aus der Datenbank ab und parsen es. * / If (isset ( $ this-> request-> post ['helloworld_text_field'])) $ this-> data ['helloworld_text_field'] = $ this-> request-> post ['helloworld_text_field'];  else $ this-> data ['helloworld_text_field'] = $ this-> config-> get ('helloworld_text_field');  / * End Block * / $ this-> data ['modules'] = array (); / * Dieser Block analysiert die Moduleinstellungen wie Layout, Position, Status und Auftragsstatus in der Ansicht * / if (isset ($ this-> request-> post ['helloworld_module']))) $ this-> data [' modules '] = $ this-> request-> post [' helloworld_module '];  elseif ($ this-> config-> get ('helloworld_module')) $ this-> data ['modules'] = $ this-> config-> get ('helloworld_module');  / * End Block * / $ this-> load-> model ('design / layout'); // Laden der Design-Layout-Modelle $ this-> data ['layouts'] = $ this-> model_design_layout-> getLayouts (); // Alle auf dem System verfügbaren Layouts erhalten $ this-> template = 'module / helloworld.tpl'; // Laden der helloworld.tpl-Vorlage $ this-> children = array ('common / header', 'common / footer'); // Hinzufügen von Kindern zu unserer Standardvorlage, d. H. Helloworld.tpl $ this-> response-> setOutput ($ this-> render ()); // Rendern der Ausgabe 

Schritt 2: Validierungsmethode

Da haben wir versucht, die Daten beim Speichern in der Standardfunktion zu überprüfen. Hier kommt also die Validierungsmethode.

/ * Funktion, die die Daten validiert, wenn die Schaltfläche Speichern gedrückt wird. * / Protected function validate () / * Blockieren, um die Benutzerberechtigung zum Bearbeiten des Moduls zu prüfen. * / If (! $ This-> user-> hasPermission ('modify', 'module / helloworld')) $ this-> error ['warning'] = $ this-> language-> get ('error_permission');  / * End Block * / / * Blockieren, um zu überprüfen, ob das Feld "helloworld_text_field" richtig in der Datenbank gespeichert ist. Andernfalls wird der Fehler zurückgegeben. * / If (! $ This-> request-> post ['helloworld_text_field']) $ this -> error ['code'] = $ this-> language-> get ('error_code');  / * End Block * / / * Block gibt true zurück, wenn kein Fehler gefunden wurde, andernfalls false, wenn ein Fehler gefunden wurde * / if (! $ This-> error) return true;  else return false;  / * End Block * / / * Validierungsfunktion beenden * /

Speichern Sie nun die Datei und Sie sind fertig mit dem Admin-Controller unseres Hello World-Moduls!

3. Datei anzeigen

Wie zuvor im Controller müssen Sie HTML-Code für die Ansicht erstellen. Dafür machen wir folgendes:

Schritt 1: Erstellen Sie einige grundlegende Steuerelemente

EIN bilden ist ein Element, das Elemente wie einen Text enthält Eingang Element, a Textbereich, und Tasten zum Speichern oder Abbrechen der Eingabe.

Überprüfen Sie den folgenden Code, um ein Formular wie dieses zu erstellen:

 
">

">
*

Schritt 2: Hinzufügen einer Tabellenliste

Unter dem bilden, ein Tabelle Es erscheint eine Liste, in der wir die Modulposition und die Seite festlegen können, auf der das Modul angezeigt werden soll.

') .remove (); ">

Schritt 3: Hinzufügen von JavaScript

Wie Sie im vorherigen Schritt sehen können, gibt es eine Schaltfläche "Modul hinzufügen". Im Einzelnen haben wir:   Hier kann der Benutzer mehrere Zeilen hinzufügen, um die Ausgabe des Moduls in verschiedenen Layouts an verschiedenen Positionen anzuzeigen. 

Dafür müssen wir JavaScript schreiben, das eine Zeile an die Tabellenliste anfügt. Dies verbessert die Benutzeroberfläche für diejenigen, die unser Modul verwenden:

Schritt 4: Hinzufügen einer Fußzeile

Als letztes müssen wir am Ende der Ansicht eine untergeordnete Fußzeile hinzufügen:

 

An diesem Punkt haben wir unsere erste Vorbereitung vorbereitet Hallo Welt Modul. An diesem Punkt ist es an der Zeit zu prüfen, ob unser Modul funktioniert oder nicht. 

Melden Sie sich dazu im Dashboard an und rufen Sie die Seite Erweiterungen> Module auf, auf der eine Liste der Module von OpenCart System angezeigt wird. Es wird auch "Hello World" mit dem Status "Uninstalled" aufgeführt. Klicken Sie auf "Install" und versuchen Sie, das Modul zu bearbeiten. Daraufhin wird ein Bildschirm angezeigt, der etwa wie folgt aussieht:

Sie können einen zufälligen Wert eingeben und versuchen, ihn zu speichern. Versuchen Sie nun, das Modul erneut zu bearbeiten, und Sie sehen, dass Ihre Eingabe als Standard eingegeben wurde.

Fazit

In diesem Artikel haben wir versucht, ein einfaches OpenCart-Modul mit MVC zu erstellen. Es ist einfach, OpenCart-Module zu bearbeiten, wenn Sie mit den Kernkonzepten von MVC vertraut sind. Dieser Artikel enthält nur eine grundlegende Idee, wie ein einfaches Modul anhand einiger einfacher Schritte entwickelt wird.

In unserem nächsten Artikel werden wir mit dem Frontend arbeiten und versuchen, es für ein Store-Frontend zu erweitern. Bitte geben Sie uns Ihr Feedback in den Kommentaren!

Code