Integrați UberGallery cu OpenCart Partea a doua

În această serie, explorăm modul de integrare a scriptului UberGallery cu OpenCart. Pentru a realiza acest lucru, construim un modul în OpenCart, astfel încât să putem face lucrurile nativ. În prima parte a acestei serii am discutat secțiunea back-end a modulului nostru personalizat, iar produsul final a fost o formă de configurare frumoasă, care ne permite să configuram ușor parametrii UberGallery. Astăzi, vom vedea omologul de front-end al acestuia, care afișează, de fapt, galeria de pe front-end.

Dacă nu ați trecut încă prin prima parte, este foarte recomandat să faceți acest lucru, deoarece codul pe care îl vom scrie astăzi depinde în mare măsură de acesta. În prima parte, am făcut toate condițiile pentru ca back-end-ul nostru să funcționeze corect, în special pagina noastră de configurare UberGallery. În această parte, ne vom concentra pe configurația front-end.

Să ne mișcăm înainte călătoria pentru a construi ceva util din perspectiva unui utilizator frontal.

O fixare rapidă la UberGallery

Trebuie să modificăm puțin scriptul UberGallery pentru ca acesta să funcționeze fără probleme cu modulul OpenCart.

Du-te și deschide-te Sistem / bibliotecă / uberGallery / resurse / UberGallery.php și găsiți următoarea linie:

'file_path' => htmlentities ($ relativePath),

Înlocuiți-l cu următoarele:

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

Asta e. Motivul din spatele aia este calea cale_fișier este tratat în scriptul UberGallery de bază. În cazul nostru, vom avea directorul de imagini originale într-o locație complet diferită în comparație cu UberGallery. Deci, asta eo soluție simplă.

În cele din urmă, creați un nou director image / uberGallery și să îl scriem de către serverul web. Acesta este locul unde vom încărca imaginile originale ale galeriei.

Configurarea fișierului frontal - într-un scurtcircuit

Să trecem repede la configurarea fișierelor necesare pentru front-end.

• Catalog / controler / modul / uber_gallery.php: Este un fișier de controler care oferă logica de aplicații a controlerului obișnuit în OpenCart.
• Catalog / limba / engleză / modul / uber_gallery.php: Este un fișier lingvistic care ajută la configurarea etichetelor de limbă.

• Catalog / Vedere / tema / default / șablon / modul / uber_gallery.tpl: Este un fișier de șablon de vizualizare care conține XHTML din formularul de configurare.

Deci, aceasta este o listă rapidă de fișiere pe care o vom implementa astăzi.

Creați fișiere de module

Continuați și creați un fișier Catalog / controler / modul / uber_gallery.php cu următorul conținut.

a sarcinii> limbaj ( 'modul / uber_gallery'); define ('UBER_ORIG_IMG_PATH', HTTP_SERVER.'image / uberGallery / '); include_once (DIR_SYSTEM.'library / uberGallery / resurse / UberGallery.php '); $ galerie = UberGallery :: init (); $ date ['title_title'] = $ setare ['nume']; $ data ['responsive_css_url'] = HTTP_SERVER. "Sistem / bibliotecă / uberGallery / resurse / teme / uber receptiv / css / style.css"; $ date ['uber_css_url'] = HTTP_SERVER. "Sistem / bibliotecă / uberGallery / resurse / UberGallery.css"; $ data ['cbox_url'] = HTTP_SERVER. "Sistem / bibliotecă / uberGallery / resurse / colorbox / 1 / colorbox.css"; $ date ['js_url'] = HTTP_SERVER. "Sistem / bibliotecă / uberGallery / resurse / colorbox / jquery.colorbox.js"; $ date ['galerie'] = $ galerie; dacă fișier_există (DIR_TEMPLATE. $ this-> config-> get ('config_template') ./template/module/uber_gallery.tpl ')) return $ this-> load-> view ($ this-> config-> primiți ('config_template'). '/template/module/uber_gallery.tpl', $ data);  altceva return $ this-> load-> view ('default / template / module / uber_gallery.tpl', $ date); 

Începând din partea de sus, UBER_ORIG_IMG_PATH constantă este ceva ce ar trebui să fiți conștient de așa cum a fost introdus la începutul acestui articol. Am folosit asta pentru a face o rezolvare simplă în script-ul UberGallery în sine.

De asemenea, există un fragment important în index care include biblioteca UberGallery și creează obiectul galeriei corespunzătoare.

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

Apoi, trebuie să includeți câteva fișiere CSS și JavaScript cerute de scriptul UberGallery.

$ data ['responsive_css_url'] = HTTP_SERVER. "Sistem / bibliotecă / uberGallery / resurse / teme / uber receptiv / css / style.css"; $ date ['uber_css_url'] = HTTP_SERVER. "Sistem / bibliotecă / uberGallery / resurse / UberGallery.css"; $ data ['cbox_url'] = HTTP_SERVER. "Sistem / bibliotecă / uberGallery / resurse / colorbox / 1 / colorbox.css"; $ date ['js_url'] = HTTP_SERVER. "Sistem / bibliotecă / uberGallery / resurse / colorbox / jquery.colorbox.js";

Deci asta este pentru controlor. Să trecem la următorul fișier.

Creați un fișier de limbă Catalog / limba / engleză / modul / uber_gallery.php cu următorul conținut.

Acesta oferă doar titlul pentru blocul nostru de galerii din front-end.
În cele din urmă, să trecem la fișierul nostru de șablon de vizualizare. Creați un fișier Catalog / Vedere / tema / default / șablon / modul / uber_gallery.tpl cu următorul conținut.
      
 
 createGallery (DIR_SYSTEM. "/ imagine / uberGallery"); ?> 
Din nou, lucrurile sunt destul de simple și obișnuite - încărcăm fișiere CSS și JavaScript urmate de scriptul de inițiere colorbox care construiește galeria. De asemenea, trebuie să sunăm createGallery metoda pe care am trecut-o galeria $ obiect de la controler. Aceasta ar trebui să pună capăt configurației noastre de fișiere de pe front.
La final, este nevoie de încă un pas înainte să mergem înainte și să testăm galeria noastră. Încărcați câteva imagini pe image / uberGallery deoarece este calea pe care am oferit-o ca argument atunci când am sunat createGallery în fișierul nostru de șabloane.
Atribuiți modulul uberGallery la aspectul paginii principale
Treceți la spate și navigați la Sistem> Design> Layouts. Editați Acasă aspect și adăugați-ne uberGallery modul la Conținut inferior poziție, după cum se arată în următoarea imagine.
Loveste Salvați pentru a efectua modificările și pentru a vă îndrepta către pagina principală din față. Spre surprinderea dvs., ar trebui să vedeți o galerie de imagini frumoasă în acea pagină! De asemenea, am integrat o cutie de culori cu ea, astfel încât să puteți face clic pe imagine și să vedeți un fel de funcționalitate de prezentare superbă.
Joacă-te cu el și sunt sigur că vei fi mulțumit de faptul că munca ta grea a fost plătită! Oricum, a fost doar un simplu efectiv demonstrația a ceea ce ați putea face folosind un modul personalizat OpenCart.
Deci, asta e totul pentru acest tutorial, și se termină și seria. Sperăm că, în curând, voi reveni cu câteva lucruri noi și revigorante în OpenCart. Până atunci, permiteți-mi să fac o cafea și să citesc câteva dintre cele mai bune tutoriale despre Envato Tuts + ca de obicei!
Concluzie
În această serie am integrat galeria populară de galerie web UberGallery cu OpenCart. În seria din două părți, am cucerit câteva aspecte diferite ale modulelor personalizate în OpenCart și am finalizat cu succes implementarea back-end și front-end.
Cred cu tărie că a servit și scopului de a demonstra ce module personalizate OpenCart sunt capabile. Utilizați feed-ul de comentarii de mai jos, care este conceput exclusiv pentru a vă posta feedback-ul și întrebările!



		
			
	   
	




Cod