Integrieren Sie UberGallery mit OpenCart Teil Zwei

In dieser Serie untersuchen wir, wie Sie das UberGallery-Skript in OpenCart integrieren können. Um dies zu erreichen, bauen wir in OpenCart ein Modul auf, damit wir die Aufgaben nativ erledigen können. Im ersten Teil dieser Serie haben wir den Back-End-Abschnitt unseres benutzerdefinierten Moduls besprochen. Das Endprodukt war ein schönes Konfigurationsformular, mit dem wir die UberGallery-Parameter problemlos konfigurieren können. Heute sehen wir das Gegenstück des Frontends, das die Galerie tatsächlich im Frontend anzeigt.

Wenn Sie den ersten Teil noch nicht durchgearbeitet haben, wird dies dringend empfohlen, da der Code, den wir heute schreiben werden, stark davon abhängt. Im ersten Teil haben wir alle Voraussetzungen erfüllt, damit unser Backend ordnungsgemäß funktioniert, insbesondere unsere UberGallery-Konfigurationsseite. In diesem Teil konzentrieren wir uns auf das Front-End-Setup.

Lassen Sie uns unsere Reise vorantreiben, um aus Sicht eines Front-End-Anwenders etwas Nützliches aufzubauen.

Eine schnelle Lösung für die UberGallery

Wir müssen das UberGallery-Skript etwas anpassen, damit es mit unserem OpenCart-Modul problemlos funktioniert.

Mach weiter und öffne dich System / Bibliothek / UberGallery / Ressourcen / UberGallery.php und finde die folgende Zeile:

'file_path' => htmlentities ($ relativePath),

Ersetzen Sie es durch Folgendes:

'file_path' => htmlentities (UBER_ORIG_IMG_PATH. $ key),

Das ist es. Der Grund dahinter ist der Weg Dateipfad wird im UberGallery-Kernskript behandelt. In unserem Fall haben wir das Verzeichnis der Originalbilder an einem völlig anderen Ort als UberGallery. Das ist also eine einfache Lösung.

Erstellen Sie schließlich ein neues Verzeichnis image / uberGallery und machen es vom Webserver beschreibbar. Hier werden die Originalbilder der Galerie hochgeladen.

Front-End-Datei-Setup in einer Nussschale

Lassen Sie uns schnell die für das Frontend erforderlichen Dateisetups durchgehen.

katalog / steuerung / modul / uber_gallery.php: Dies ist eine Controller-Datei, die die Anwendungslogik des in OpenCart üblichen Controllers bereitstellt.
katalog / sprache / englisch / modul / uber_gallery.php: Es ist eine Sprachdatei, die beim Einrichten von Sprachetiketten hilft.
catalog / view / theme / default / template / module / uber_gallery.tpl: Es handelt sich um eine Ansichtsvorlagendatei, die die XHTML des Konfigurationsformulars enthält.

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

Erstellen Sie Moduldateien

Fahren Sie fort und erstellen Sie eine Datei katalog / steuerung / modul / uber_gallery.php mit folgenden Inhalten.

load-> language ('module / uber_gallery'); define ('UBER_ORIG_IMG_PATH', HTTP_SERVER.'image / uberGallery / '); include_once (DIR_SYSTEM.'library / uberGallery / resources / UberGallery.php '); $ gallery = UberGallery :: init (); $ data ['Heading_title'] = $ Einstellung ['Name']; $ data ['responsive_css_url'] = HTTP_SERVER. "system / library / uberGallery / resources / themes / uber-responsive / css / style.css"; $ data ['uber_css_url'] = HTTP_SERVER. "System / Bibliothek / UberGallery / Ressourcen / UberGallery.css"; $ data ['cbox_url'] = HTTP_SERVER. "system / library / uberGallery / resources / colorbox / 1 / colorbox.css"; $ data ['js_url'] = HTTP_SERVER. "system / library / uberGallery / resources / colorbox / jquery.colorbox.js"; $ data ['gallery'] = $ gallery; if (file_exists (DIR_TEMPLATE. $ this-> config-> get ('config_template'). '/template/module/uber_gallery.tpl')) return $ this-> load-> view ($ this-> config-> get ('config_template'). '/template/module/uber_gallery.tpl', $ data);  else return $ this-> load-> view ('default / template / module / uber_gallery.tpl', $ data);

Von oben beginnend, die UBER_ORIG_IMG_PATH Konstant ist etwas, das Sie beachten sollten, da es zu Beginn dieses Artikels eingeführt wurde. Damit haben wir eine einfache Korrektur im UberGallery-Skript selbst vorgenommen.

Es gibt auch einen wichtigen Ausschnitt im Index Methode, die die UberGallery-Bibliothek enthält und das entsprechende Galerieobjekt erstellt.

define ('UBER_ORIG_IMG_PATH', HTTP_SERVER.'image / uberGallery / '); include_once (DIR_SYSTEM.'library / uberGallery / resources / UberGallery.php '); $ gallery = UberGallery :: init ();

Als Nächstes müssen wir ein paar CSS- und JavaScript-Dateien hinzufügen, die für das UberGallery-Skript erforderlich sind.

$ data ['responsive_css_url'] = HTTP_SERVER. "system / library / uberGallery / resources / themes / uber-responsive / css / style.css"; $ data ['uber_css_url'] = HTTP_SERVER. "System / Bibliothek / UberGallery / Ressourcen / UberGallery.css"; $ data ['cbox_url'] = HTTP_SERVER. "system / library / uberGallery / resources / colorbox / 1 / colorbox.css"; $ data ['js_url'] = HTTP_SERVER. "system / library / uberGallery / resources / colorbox / jquery.colorbox.js";

Das ist es also für den Controller. Gehen wir weiter zu unserer nächsten Datei.

Erstellen Sie eine Sprachdatei katalog / sprache / englisch / modul / uber_gallery.php mit folgenden Inhalten.

Es gibt nur den Titel für unseren Galerieblock im Frontend.

Zum Schluss gehen wir weiter zu unserer Ansichtsvorlagendatei. Erstellen Sie eine Datei catalog / view / theme / default / template / module / uber_gallery.tpl mit folgenden Inhalten.

      
  createGallery (DIR_SYSTEM. '… / image / uberGallery'); ?>

Wiederum ist es ziemlich unkompliziert und üblich - wir laden CSS- und JavaScript-Dateien, gefolgt von dem Colorbox-Initialisierungsskript, das die Galerie erstellt. Außerdem müssen wir das anrufen createGallery Methode wie wir die bestanden haben $ gallery Objekt von der Steuerung. Das sollte unsere Front-End-Dateieinrichtung beenden.

Am Ende ist noch ein Schritt erforderlich, bevor wir unsere Galerie testen können. Laden Sie ein paar Bilder in die hoch image / uberGallery Verzeichnis, da es der Pfad ist, den wir als Argument angegeben haben, als wir das aufgerufen haben createGallery Methode in unserer Vorlagendatei.

Weisen Sie das uberGallery-Modul dem Layout der Startseite zu

Gehen Sie zum Back-End und navigieren Sie zu System> Design> Layouts. Bearbeiten Sie die Zuhause Layout und fügen Sie unsere hinzu uberGallery Modul zum Inhalt unten Position wie im folgenden Screenshot gezeigt.

Schlagen Sie die sparen Klicken Sie auf die Schaltfläche, um die Änderungen zu übernehmen und zur Front-End-Startseite zu wechseln. Zu Ihrer Überraschung sollten Sie auf dieser Seite eine hübsche Bildergalerie sehen! Wir haben auch eine Colorbox integriert, so dass Sie auf das Bild klicken können, um eine schöne Overlay-Art von Diashow-Funktionalität zu erleben.

Spielen Sie damit und ich bin sicher, dass Sie mit der Tatsache zufrieden sein werden, dass sich Ihre harte Arbeit gelohnt hat! Wie auch immer, es war nur eine einfache Sache Wirksam Demonstration dessen, was Sie mit einem benutzerdefinierten OpenCart-Modul tun können.

Also, das ist es Folks für dieses Tutorial, und es endet auch die Serie. Hoffentlich bin ich bald wieder mit ein paar neuen und erfrischenden Sachen in OpenCart. Bis dahin darf ich noch etwas Kaffee trinken und einige der großartigen Tutorials zu Envato Tuts + lesen!

Fazit

In dieser Serie haben wir das beliebte Web-Galerie-Skript UberGallery mit OpenCart integriert. In der zweiteiligen Serie haben wir verschiedene Aspekte von benutzerdefinierten Modulen in OpenCart erobert und die Back-End- und Front-End-Implementierung erfolgreich abgeschlossen.

Ich bin der festen Überzeugung, dass es auch dazu dient, zu zeigen, wozu die benutzerdefinierten OpenCart-Module fähig sind. Verwenden Sie den Kommentar-Feed, der ausschließlich für Sie bestimmt ist, um Ihr Feedback und Ihre Fragen zu posten!

Code