So verwenden Sie Ajax mit OpenCart

Die Aufnahme von jQuery-Bibliotheken in den Kern von OpenCart macht die Implementierung von Ajax zu einem Kinderspiel und mehr als ein angenehmes Erlebnis. In der Tat finden Sie mehrere Ausschnitte, die über das gesamte Framework verteilt sind und die starke Verwendung von jQuery zeigen, wenn Sie versuchen, die Ansichtsdateien gezielt zu durchsuchen.

In diesem Artikel erstellen wir eine benutzerdefinierte Seite, um die Verwendung von Ajax in OpenCart zu demonstrieren. Es handelt sich um eine einfache Schnittstelle, über die Sie ein Produkt aus der Dropdown-Liste auswählen und einen schönen Produktzusammenfassungsblock des ausgewählten Produkts anzeigen können. Der interessante Teil des Anwendungsfalls ist die Art und Weise, wie der Produktzusammenfassungsblock aufgebaut ist - er wird mit Ajax on-the-fly erstellt. Natürlich ist es nicht etwas, das aus der Welt ein Beispiel macht, aber ich denke, es dient dem grundlegenden Zweck, zu zeigen, wie die Dinge in OpenCart funktionieren.

Ich gehe davon aus, dass Sie die neueste Version von OpenCart verwenden, nämlich 2.1.x.x! Die Hauptdiskussion dieses Artikels konzentriert sich auch auf Ajax mit OpenCart. Ich werde daher die Grundlagen der Entwicklung benutzerdefinierter Module in OpenCart durchgehen. Wenn Sie sich jedoch nicht damit auskennen, stellen Sie durch eine kurze Erläuterung der Code-Snippets sicher, dass Sie bis zum Ende folgen können!

Ein kurzer Blick auf die Dateiorganisation

Lassen Sie uns schnell die für unsere benutzerdefinierte Seite erforderlichen Dateisetups durchgehen.

katalog / controller / ajax / index.php: Dies ist eine Controller-Datei, die die Anwendungslogik des in OpenCart üblichen Controllers bereitstellt.
katalog / sprache / deutsch / ajax / index.php: Es ist eine Sprachdatei, die beim Einrichten von Sprachetiketten hilft.
catalog / view / theme / default / template / ajax / index.tpl: Es handelt sich um eine Ansichtsvorlagendatei, die die XHTML der benutzerdefinierten Seite enthält.
catalog / view / theme / default / template / ajax / product.tpl: Es handelt sich um eine Ansichtsvorlagendatei, die die XHTML der AJAX-Antwort enthält.

Das ist also eine kurze Liste der Dateien, die wir heute implementieren werden.

Erstellen Sie Moduldateien

Fahren Sie fort und erstellen Sie eine Datei katalog / controller / ajax / index.php mit folgenden Inhalten.

load-> language ('ajax / index'); $ this-> load-> model ('catalog / product'); $ this-> document-> setTitle ($ this-> language-> get ('heading_title')); // alle Produkte laden $ products = $ this-> model_catalog_product-> getProducts (); $ data ['products'] = $ products; $ data ['breadcrumbs'] = array (); $ data ['breadcrumbs'] [] = array ('href' => $ this-> url-> link ('common / home'), 'text' => $ this-> language-> get ('text_home') )); $ data ['breadcrumbs'] [] = array ('href' => $ this-> url-> link ('ajax / index'), 'text' => $ this-> language-> get ('Überschrift_Titel') )); $ data ['heading_title'] = $ this-> language-> get ('heading_title'); $ data ['text_product_dropdown_label'] = $ this-> language-> get ('text_product_dropdown_label'); $ data ['column_left'] = $ this-> load-> controller ('common / column_left'); $ data ['column_right'] = $ this-> load-> controller ('common / column_right'); $ data ['content_top'] = $ this-> load-> controller ('common / content_top'); $ data ['content_bottom'] = $ this-> load-> controller ('common / content_bottom'); $ data ['footer'] = $ this-> load-> controller ('common / footer'); $ data ['header'] = $ this-> load-> controller ('common / header'); if (file_exists (DIR_TEMPLATE. $ this-> config-> get ('config_template'). '/template/ajax/index.tpl')) $ this-> response-> setOutput ($ this-> load-> view ($ this-> config-> get ('config_template'). '/template/ajax/index.tpl', $ data));  else $ this-> response-> setOutput ($ this-> load-> view ('default / template / ajax / index.tpl', $ data));  // ajax-Aufrufmethode public function ajaxGetProduct () if (isset ($ this-> request-> get ['product_id'])) $ product_id = (int) $ this-> request-> get ['product_id ']; if ($ product_id> 0) // das bestimmte Produkt laden, das in ajax $ this-> load-> model ('catalog / product') angefordert wird; $ product = $ this-> model_catalog_product-> getProduct ($ product_id); $ data ['product'] = $ product; // Bild vorbereiten $ this-> load-> model ('tool / image'); if ($ product ['image']) $ data ['thumb'] = $ this-> model_tool_image-> resize ($ product ['image'], $ this-> config-> get ('config_image_thumb_width'), $ this-> config-> get ('config_image_thumb_height'));  // Preis formatieren $ data ['price'] = $ this-> Currency-> format ($ this-> tax-> berechne ($ product ['price'], $ product ['tax_class_id'], $ this- > config-> get ('config_tax'))); $ this-> load-> language ('Produkt / Produkt'); $ data ['text_manufacturer'] = $ this-> language-> get ('text_manufacturer'); $ data ['text_model'] = $ this-> language-> get ('text_model'); $ data ['text_note'] = $ this-> language-> get ('text_note'); $ data ['tab_description'] = $ this-> language-> get ('tab_description'); if (file_exists (DIR_TEMPLATE. $ this-> config-> get ('config_template'). '/template/ajax/product.tpl')) $ this-> antwort-> setOutput ($ this-> load-> view) ($ this-> config-> get ('config_template'). '/template/ajax/product.tpl', $ data));  else $ this-> response-> setOutput ($ this-> load-> view ('default / template / ajax / product.tpl', $ data));

Zunächst einmal die Index Die Methode des Controllers wird verwendet, um die Sprach- und Modelldateien zu laden und die allgemeinen Variablen für die gewöhnliche OpenCart-Vorlage einzurichten. Wir laden das verfügbare Produktmodell im Kern selbst, sodass wir den Code nicht kopieren müssen, um die Produktinformationen abzurufen.

Nach dem Laden des Produktmodells verwenden wir die getProducts Methode, um alle Produkte zu laden. Zum Schluss schließen wir das Index Methode durch Einstellung index.tpl als unsere Hauptvorlagendatei.

Als nächstes ist das Wichtigste ajaxGetProduct Diese Methode wird zum Erstellen eines Produktzusammenfassungsblocks basierend auf der im Ajax-Aufruf übergebenen Produkt-ID verwendet, wie wir in der Vorlagendatei bald sehen werden. Es lädt dasselbe Produktmodell wie in der Index Methode und ruft die getProduct Methode zum Abrufen bestimmter Produktinformationen basierend auf der Produkt-ID.

Am Ende der product.tpl Die Vorlage wird als Vorlage für diese Methode festgelegt. Speziell für die Anforderungen in unserem Fall verwenden wir die Vorlage zum Erstellen unserer Ajax-Ausgabe. Sie können jedoch auch die JSON-Antwort senden.

Wenn wir weitergehen, erstellen wir eine Sprachdatei katalog / sprache / deutsch / ajax / index.php um die statischen Etiketteninformationen zu halten.

Die Ansichtsvorlagendatei, eine der wichtigsten Dateien im Zusammenhang mit diesem Lernprogramm, sollte unter erstellt werden catalog / view / theme / default / template / ajax / index.tpl mit folgenden Inhalten.

">

Der Ausschnitt unseres Interesses ist am Ende von index.tpl, Der JavaScript-Code, der jQuery-Methoden verwendet, um Änderungen und Ajax-Ereignisse zu binden. Wenn der Benutzer ein Produkt aus der Dropdown-Liste auswählt, wird das Änderungsereignis ausgelöst, das schließlich einen Ajax-Aufruf durchführt. Im Ajax-Anruf senden wir die Produkt ID als GET-Abfragezeichenfolgenvariable angehängt.

Auf der anderen Seite, wie wir bereits im Controller-Setup besprochen haben, die ajaxGetProduct sendet die XHTML des Produktzusammenfassungsblocks basierend auf dem Produkt ID Abfragezeichenfolgevariable. In der Erfolgsmethode hängen wir die XHTML-Antwort an das div-Tag an, für das das id-Attribut auf product_summary festgelegt ist.

Schließlich machen Sie eine Vorlagendatei catalog / view / theme / default / template / ajax / product.tpl mit den folgenden Inhalten für einen Ajax-Anruf.

Nichts Besonderes - Wir haben nur einen einfachen Produktzusammenfassungsblock XHTML hinzugefügt.

Das ist es also, was das Dateisetup angeht. In unserem nächsten Abschnitt werden wir das Frontend durchgehen, um zu testen, was wir bisher gebaut haben.

Front-End-Tests

Wir haben also all die harte Arbeit erledigt und jetzt ist es Zeit für ein paar Tests! Gehen Sie zum Frontend von OpenCart und besuchen Sie die URL http://www.yourstore.com/index.php?route=ajax/index. Es sollte eine gut aussehende Oberfläche angezeigt werden, wie im folgenden Screenshot dargestellt.

Es ist unsere benutzerdefinierte Seite und zeigt ein Dropdown-Feld mit der Liste aller Produkte an. Lassen Sie uns nun versuchen, ein Produkt aus dem Auswahlfeld auszuwählen, und im Hintergrund wird Ajax aufgerufen.

Daraufhin sollte ein schöner Produktzusammenfassungsblock direkt unter dem Dropdown-Feld angezeigt werden, wie in der folgenden Abbildung dargestellt.

Wenn Sie dem Tutorial gefolgt sind und alle Dateien wie beschrieben implementiert haben, sollte es für Sie genauso reibungslos funktionieren wie für mich! Natürlich war dies eine ziemlich einfache Demonstration der Funktionsweise von Ajax in OpenCart, aber Sie könnten es je nach Ihren Anforderungen auf die nächste Stufe bringen.

Spielen Sie damit und versuchen Sie, mit Ajax interaktives Material zu erstellen, da dies der beste Weg zum Lernen ist. Das ist es für heute, und ich werde bald mit etwas aufregendem Zeug zurück sein.

Fazit

Es war Ajax mit OpenCart, das die Hauptattraktion des heutigen Artikels war. Wie üblich verwendeten wir einen benutzerdefinierten Modulansatz, um dies zu demonstrieren, und erstellten einen einfachen, aber effektiven Anwendungsfall.

Wenn Sie nach zusätzlichen OpenCart-Tools, Hilfsprogrammen, Erweiterungen usw. suchen, die Sie in Ihren eigenen Projekten oder für Ihre eigene Ausbildung einsetzen können, vergessen Sie nicht, zu sehen, was auf dem Markt verfügbar ist.

Ich hoffe, dass es informativ und nützlich war, und zögern Sie nicht, Ihre Fragen und Kommentare zu hinterlassen!

Code