Integrera UberGallery med OpenCart Del två

I denna serie undersöker vi hur man integrerar UberGallery-manuset med OpenCart. För att uppnå det bygger vi en modul i OpenCart, så vi kan göra sakerna nativt. I den första delen av denna serie diskuterade vi den bakre delen av vår anpassade modul, och slutprodukten var en bra konfigurationsform som gör att vi enkelt kan konfigurera UberGallery-parametrarna. Idag ser vi den främre delen av det, som faktiskt visar galleriet på fronten.

Om du inte har gått igenom den första delen ännu är det starkt rekommenderat att göra det eftersom koden vi ska skriva idag kraftigt beror på den. I första delen gjorde vi alla förutsättningar för att vårt back-end skulle fungera korrekt, speciellt vår UberGallery-konfigurationssida. I den här delen kommer vi att koncentrera oss på front-end setup.

Låt oss flytta vår resa framåt för att bygga upp något användbart ur en slutanvändares perspektiv.

En snabb fix till UberGallery

Vi behöver justera UberGallery-skriptet lite för att det ska fungera smidigt med vår OpenCart-modul.

Gå vidare och öppna system / bibliotek / uberGallery / resurser / UberGallery.php och hitta följande rad:

'file_path' => htmlentities ($ relativePath),

Byt ut det med följande:

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

Det är allt. Anledningen till det är vägen sökväg hanteras i kärnan UberGallery skript. I vårt fall kommer vi att ha katalogen över originalbilder på en helt annan plats än UberGallery. Så det är en enkel fix.

Slutligen skapa en ny katalog bild / uberGallery och göra det skrivbart av webbservern. Det här är platsen där vi ska ladda upp de ursprungliga bilderna i galleriet.

Front-End File Setup-i ett nötskal

Låt oss snabbt gå igenom den filinställning som krävs för fronten.

katalog / styrenheten / modul / uber_gallery.php: Det är en kontrollerfil som tillhandahåller programlogiken hos den vanliga regulatorn i OpenCart.
Katalog / språk / engelska / modul / uber_gallery.php: Det är en språkfil som hjälper till att skapa språketiketter.
katalog / view / tema / default / mall / modul / uber_gallery.tpl: Det är en bildmallfil som innehåller XHTML i konfigurationsformuläret.

Så det är en snabb lista över filer vi ska genomföra idag.

Skapa modulfiler

Gå vidare och skapa en fil katalog / styrenheten / modul / uber_gallery.php med följande innehåll.

last> språk ( 'modul / uber_gallery'); definiera ('UBER_ORIG_IMG_PATH', HTTP_SERVER.'image / uberGallery / '); include_once (DIR_SYSTEM.'library / uberGallery / resurser / UberGallery.php '); $ gallery = UberGallery :: init (); $ data ['heading_title'] = $ inställning ['namn']; $ data ['responsive_css_url'] = HTTP_SERVER. "System / bibliotek / uberGallery / resurser / teman / uber-responsiva / css / style.css"; $ data ['uber_css_url'] = HTTP_SERVER. "System / Library / uberGallery / resurser / UberGallery.css"; $ data ['cbox_url'] = HTTP_SERVER. "System / bibliotek / uberGallery / resurser / colorbox / 1 / colorbox.css"; $ data ['js_url'] = HTTP_SERVER. "System / Library / uberGallery / resurser / colorbox / jquery.colorbox.js"; $ data ['gallery'] = $ gallery; if (file_exists (DIR_TEMPLATE. $ this-> config-> få ('config_template'). '/template/module/uber_gallery.tpl')) returnera $ this-> load-> view ($ this-> config-> få ('config_template'). '/template/module/uber_gallery.tpl', $ data);  annars returnera $ this-> load-> view ('standard / mall / modul / uber_gallery.tpl', $ data);

Från början, den UBER_ORIG_IMG_PATH konstant är något du bör vara medveten om som det introducerades i början av denna artikel. Vi använde det för att göra en enkel lösning i själva UberGallery-skriptet.

Det finns också ett viktigt utdrag i index metod som inkluderar UberGallery-biblioteket och skapar motsvarande galleribjekt.

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

Därefter måste vi inkludera ett par CSS- och JavaScript-filer som krävs av UberGallery-skriptet.

$ data ['responsive_css_url'] = HTTP_SERVER. "System / bibliotek / uberGallery / resurser / teman / uber-responsiva / css / style.css"; $ data ['uber_css_url'] = HTTP_SERVER. "System / Library / uberGallery / resurser / UberGallery.css"; $ data ['cbox_url'] = HTTP_SERVER. "System / bibliotek / uberGallery / resurser / colorbox / 1 / colorbox.css"; $ data ['js_url'] = HTTP_SERVER. "System / Library / uberGallery / resurser / colorbox / jquery.colorbox.js";

Så det är det för regulatorn. Låt oss gå vidare till vår nästa fil.

Skapa en språkfil Katalog / språk / engelska / modul / uber_gallery.php med följande innehåll.

Det ger bara titeln till vårt galleri block i fronten.

Till sist, låt oss gå vidare till vår mallfil för visning. Skapa en fil katalog / view / tema / default / mall / modul / uber_gallery.tpl med följande innehåll.

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

Igen är det ganska enkla och vanliga saker-vi laddar CSS och JavaScript-filer följt av colorbox-initieringsskriptet som bygger galleriet. Vi måste också ringa createGallery metod som vi har passerat $ galleri objekt från regulatorn. Det borde sluta vår front-end fil setup.

I slutet är det ytterligare ett steg som krävs innan vi fortsätter och faktiskt testa vårt galleri. Ladda upp ett par bilder till bild / uberGallery katalog eftersom det är den väg vi gav som ett argument när vi kallade createGallery metod i vår mallfil.

Tilldela uberGallery-modulen till startsidans layout

Gå över till baksidan och navigera till System> Design> Layouts. Redigera Hem layout och lägg till vår uberGallery modul till Innehållsbotten position, som visas i följande skärmdump.

Slå Spara knappen för att begå ändringarna och gå vidare till startsidans hemsida. Till din förvåning borde du se ett snyggt bildgalleri på den sidan! Vi har också integrerat färgbox med det, så du kan klicka på bilden och bevittna en vacker överlagring typ av bildspelfunktion.

Spela med det och jag är säker på att du kommer att vara nöjd med det faktum att ditt hårda arbete har betalat! Hur som helst, det var bara en enkel än effektiv demonstration av vad du kan göra med en OpenCart anpassad modul.

Så det är det folk för denna handledning, och det avslutar serien också. Förhoppningsvis kommer jag snart tillbaka med några nya och uppfriskande saker i OpenCart. Tillåt mig att gå på lite kaffe och läsa några av de stora handledningarna på Envato Tuts + som vanligt!

Slutsats

I denna serie integrerade vi det populära webbgalleriet UberGallery med OpenCart. I tvådelade serierna erövrade vi ett par olika aspekter av anpassade moduler i OpenCart och lyckades slutföra implementeringen av back-end och front-end.

Jag tror starkt att det också fungerade som syfte att visa vilka OpenCart anpassade moduler som kan. Använd kommentarflödet nedan, vilket är uteslutande utformat för att du ska kunna skicka din feedback och frågor!

Koda