Integrer UberGallery Med OpenCart Del to

I denne serien undersøker vi hvordan du integrerer UberGallery-skriptet med OpenCart. For å oppnå det bygger vi en modul i OpenCart, slik at vi kan gjøre tingene nativt. I den første delen av denne serien diskuterte vi backend-delen av vår tilpassede modul, og sluttproduktet var en fin konfigurasjonsform som gjør det mulig for oss å konfigurere UberGallery-parametrene enkelt. I dag ser vi front-end-motparten av det, som faktisk viser galleriet på forsiden.

Hvis du ikke har gått gjennom den første delen ennå, anbefales det sterkt å gjøre det slik at koden vi skal skrive i dag, er avhengig av den. I første del gjorde vi alle forutsetningene for at vår back-end skulle fungere skikkelig, spesielt vår UberGallery-konfigurasjonsside. I denne delen konsentrerer vi seg om forhåndsinnstillingene.

La oss flytte vår reise fremover for å bygge noe nyttig ut fra en front-end-brukeres perspektiv.

En rask løsning på UberGallery

Vi må justere UberGallery-skriptet litt for å få det til å fungere jevnt med OpenCart-modulen.

Gå videre og åpne system / bibliotek / uberGallery / ressurser / UberGallery.php og finn følgende linje:

'file_path' => htmlentities ($ relativePath),

Erstatt den med følgende:

'file_path' => htmlentities (UBER_ORIG_IMG_PATH. $ nøkkel),

Det er det. Årsaken bak det er veien filbane håndteres i kjernen UberGallery-skriptet. I vårt tilfelle har vi katalog over originale bilder på en helt annen plass i forhold til UberGallery. Så det er en enkel løsning.

Endelig opprett en ny katalog image / uberGallery og gjør det skrivbart av webserveren. Dette er stedet der vi laster opp de opprinnelige bildene av galleriet.

Front-End File Setup-i et nøtteskall

La oss raskt gå gjennom filoppsettet som kreves for fronten.

katalog / styreenhet / modul / uber_gallery.php: Det er en kontrollerfil som gir applikasjonslogikken til den vanlige kontrolleren i OpenCart.
Katalog / language / engelsk / modul / uber_gallery.php: Det er en språkfil som hjelper til med å sette opp språketiketter.
Katalog / view / tema / default / mal / modul / uber_gallery.tpl: Det er en visningsmalfil som inneholder XHTML i konfigurasjonsskjemaet.

Så det er en rask liste over filer vi skal implementere i dag.

Opprett modulfiler

Gå videre og lag en fil katalog / styreenhet / modul / uber_gallery.php med følgende innhold.

last> språk ( '-modulen / uber_gallery'); define ('UBER_ORIG_IMG_PATH', HTTP_SERVER.'image / uberGallery / '); include_once (DIR_SYSTEM.'library / uberGallery / ressurser / UberGallery.php '); $ gallery = UberGallery :: init (); $ data ['heading_title'] = $ innstilling ['navn']; $ data ['responsive_css_url'] = HTTP_SERVER. "System / bibliotek / uberGallery / ressurser / temaer / uber-responsive / css / style.css"; $ data ['uber_css_url'] = HTTP_SERVER. "System / bibliotek / uberGallery / ressurser / UberGallery.css"; $ data ['cbox_url'] = HTTP_SERVER. "System / bibliotek / uberGallery / ressurser / ColorBox / 1 / colorbox.css"; $ data ['js_url'] = HTTP_SERVER. "System / bibliotek / uberGallery / ressurser / ColorBox / jquery.colorbox.js"; $ data ['gallery'] = $ gallery; hvis (file_exists (DIR_TEMPLATE. $ this-> config-> få ('config_template'). '/template/module/uber_gallery.tpl')) return $ this-> load-> view ($ this-> config-> få ('config_template'). '/template/module/uber_gallery.tpl', $ data);  ellers return $ this-> load-> view ('standard / mal / modul / uber_gallery.tpl', $ data);

Starter fra toppen, den UBER_ORIG_IMG_PATH konstant er noe du bør være oppmerksom på som det ble introdusert i begynnelsen av denne artikkelen. Vi brukte det for å gjøre en enkel løsning i selve UberGallery-skriptet.

Det er også en viktig delbit i index metode som inkluderer UberGallery-biblioteket og lager det tilsvarende galleribjektet.

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

Deretter må vi inkludere et par CSS- og JavaScript-filer som kreves av UberGallery-skriptet.

$ data ['responsive_css_url'] = HTTP_SERVER. "System / bibliotek / uberGallery / ressurser / temaer / uber-responsive / css / style.css"; $ data ['uber_css_url'] = HTTP_SERVER. "System / bibliotek / uberGallery / ressurser / UberGallery.css"; $ data ['cbox_url'] = HTTP_SERVER. "System / bibliotek / uberGallery / ressurser / ColorBox / 1 / colorbox.css"; $ data ['js_url'] = HTTP_SERVER. "System / bibliotek / uberGallery / ressurser / ColorBox / jquery.colorbox.js";

Så det er det for kontrolleren. La oss gå videre til vår neste fil.

Opprett en språkfil Katalog / language / engelsk / modul / uber_gallery.php med følgende innhold.

Det gir bare tittelen til vårt galleri blokk i fronten.

Til slutt, la oss gå videre til vår visningsmalfil. Lag en fil Katalog / view / tema / default / mal / modul / uber_gallery.tpl med følgende innhold.

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

Igjen er det ganske enkle og vanlige ting-vi laster inn CSS- og JavaScript-filer etterfulgt av colorbox-initialiseringsskriptet som bygger galleriet. Også, vi trenger å ringe createGallery metode som vi har passert $ galleriet objekt fra kontrolleren. Det bør avslutte vår forhåndsdefinerte filoppsett.

På slutten er det et enda skritt som kreves før vi går videre og faktisk tester vårt galleri. Last opp et par bilder til image / uberGallery katalog som det er banen vi ga som et argument da vi ringte createGallery metode i vår malfil.

Tilordne uberGallery-modulen til startsiden Layout

Gå over til bakenden og naviger til System> Design> Layouts. Rediger Hjem layout og legg til vår uberGallery modul til Innholdsbunn posisjon, som vist i følgende skjermbilde.

Slå den Lagre knappen for å forplikte endringene og gå over til front-end hjemmesiden. Til overraskelse bør du se et flott utseende på denne siden! Vi har også integrert colorbox med den, slik at du kan klikke på bildet og oppleve et vakkert overlegg slags lysbildefunksjonalitet.

Spill med det, og jeg er sikker på at du vil være fornøyd med at ditt harde arbeid har lønnet seg! Uansett, det var bare en enkel ennå effektiv demonstrasjon av hva du kan gjøre ved hjelp av en OpenCart tilpasset modul.

Så det er det folkene for denne opplæringen, og det avsluttes også serien. Forhåpentligvis kommer jeg snart tilbake med noen nye og forfriskende ting i OpenCart. Tillat meg å gå for litt kaffe og lese noen av de gode opplæringene på Envato Tuts + som vanlig!

Konklusjon

I denne serien integrerte vi det populære webgalleriet skriptet UberGallery med OpenCart. I todelingserien erobret vi et par forskjellige aspekter av egendefinerte moduler i OpenCart og fullførte fullføringen av slutten og slutten av implementeringen.

Jeg tror sterkt på at det også tjente formålet med å demonstrere hvilke OpenCart tilpassede moduler som er i stand til. Bruk kommentaren feed nedenfor, som er utelukkende designet for å legge inn din tilbakemelding og spørsmål!

Kode