PrestaShop Theming Explained

Prestashop este, fără îndoială, cea mai deschisă soluție de e-Commerce de pe web. Acesta oferă nenumărate caracteristici, suplimente și teme, dar lipsa sa de documentație bună a dat noilor veniți percepția că este inaccesibil. În acest articol, vă voi prezenta procesul de construire a propriei tematici personalizate, precum și crearea și personalizarea modulelor Prestashop.

Prestashop rulează pe PHP și mySQL și se bazează pe motorul Smarty pentru "Șabloane" (paginile). Nu vă faceți griji, dacă nu sunteți familiarizați cu Smarty. Utilizați-l în mod esențial pentru a crea pagini cu secțiuni de substituent, iar Prestashop completează informațiile când pagina se încarcă. Este ușor să treceți la, dacă ați folosit ceva ca șabloanele Handlebars sau Underscore.

Voi presupune că ați descărcat și instalat deja Prestashop. Dacă nu, puteți descărca cea mai recentă versiune; ei au un video instructiv pe care îl puteți viziona pentru a afla cum să-l configurați.


Înregistrarea temei

Site-ul dvs. ar trebui să arate cam ca imaginea următoare, dacă ați configurat Prestashop cu setările implicite.

Procesul de a construi propria temă începe cu crearea unui dosar. În browserul de fișiere ales de dvs., navigați la directorul rădăcină Prestashop și veți găsi un dosar numit tematică. În interiorul tematică , creați un nou director cu numele temei. O să-i sun pe a mea, "Demo".

Dacă adăugați o imagine a șablonului în acest dosar și îl numiți preview.jpg, Prestashop ar trebui să găsească automat și să vă adauge șablonul la back-end. Dacă nu, sau preferați să adăugați imaginea mai târziu, puteți adăuga manual tema. Pentru aceasta, mergeți la tematică opțiune în cadrul Preferințe meniu și faceți clic pe Adăuga nou în vârf. După finalizare, veți vedea tema în centrul paginii. Activați-o făcând clic pe ea și apăsând pe Salvați buton.

Adăugați logo-ul dvs. în timp ce sunteți aici; puteți găsi această opțiune în partea de jos a paginii. Este posibil să fie nevoie să măriți limita de încărcare a fișierelor în Prestashop (sau chiar fișierul de configurare al PHP) dacă aveți o imagine foarte mare.


Crash Course în Prestashop

Smarty este un motor de șablon pentru PHP, facilitând separarea prezentării de logica aplicațiilor.

După cum am menționat mai devreme, Prestashop folosește Smarty pentru generarea paginilor; astfel încât toate fișierele de șabloane au a .TPL extensie. Există multe pagini pe care trebuie să le creați pentru a avea o temă completă; faceți o clipă și vizualizați lista de fișiere.

În cele din urmă, funcționalitatea temei determină paginile pe care trebuie să le implementați. Aceste pagini se bazează pe fișierele din folderul controlerelor și puteți să înlocuiți controlerele implicite sau să adăugați propriile controlere personalizate pentru a se potrivi temei. Dar acest lucru depășește domeniul de aplicare al acestui articol. Printre controlorii din controlere \ directorul frontal sunt două fișiere șablon care se încarcă automat: header.tpl și footer.tpl.

Conținutul major al site-ului dvs. va fi încărcat de module cu ajutorul "Hooks".

Există două tipuri de cârlige în Prestashop: cârlige de acțiune și afișare. Acestea funcționează în același mod, dar diferă în funcție de scop. Un cârlig oferă practic utilizatorului o modalitate de a atașa codul personalizat unei surse externe. În cazul unui cârlig de acțiune, orice cod atașat la cârlig rulează atunci când este apelat cârligul. De exemplu, Prestashop vine cu un cârlig implicit numit actionProductAdd care rulează atunci când adaugă un produs. Așadar, puteți atașa un modul la acest cârlig dacă doriți să trimiteți un buletin informativ de e-mail de fiecare dată când se adaugă un produs nou.

Un cârlig de afișare este foarte asemănător, dar în loc să conectați o funcție la un eveniment, conectați o funcție la un anumit loc din șablon. Cu alte cuvinte, Prestashop va apela modulul dvs. printr-un anumit punct (de exemplu, bara laterală dreaptă) și orice element returnat va fi plasat în pagină. Puteți vedea toate cârligele înregistrate curent accesând secțiunea Module> Poziții înapoi în admin.

Personal, mi se pare cel mai bine să încep cu o temă HTML standard. Aceasta nu este o cerință, dar o recomand foarte mult din mai multe motive:

  • Vă permite să vedeți imediat ce cârlige aveți nevoie și cum să vă împărțiți conținutul.
  • Vă oferă o direcție clară a fișierelor șablon pe care trebuie să le creați, precum și o idee despre ce va fi conținutul static și care ar trebui să fie un modul. De asemenea, vă permite să adăugați preview.jpg fișier imediat.

Următoarea imagine este o imagine a șablonului meu de exemplu HTML:

Și aici puteți vedea cum o voi împărți în cârligele Prestashop:


Crearea parțială a șabloanelor

Acum să creăm header.tpl fișier în directorul temelor și completați-l cu antetul temelor. Aceasta include doctype, zona și tot ceea ce doriți să fie afișat pe toate paginile. Iată un exemplu header.tpl fişier:

   Site-ul Prestashop  ifset ($ css_files) foreach de la = $ css_files key = css_uri item = media  / foreach / if dacă isset ($ js_files) foreach de la = $ js_files item = js_uri  / foreach / if   
$ HOOK_TOP
Header Image

Există câteva lucruri de subliniat în acest cod. Am preconizat numele fișierului CSS cu $ Css_dir. Aceasta este o variabilă Smarty care indică un dosar numit css în directorul temei, unde ar trebui să meargă toate fișierele CSS.

Următoarea linie utilizează Smarty's pentru fiecare pentru a adăuga toate fișierele CSS ale modulelor activate. Merită menționat că, dacă creați un fișier CSS numit global.css în css , buclă adăugă automat acel fișier la pagină.

Câteva rânduri mai târziu, altul pentru fiecare buclă procesează fișierele JavaScript din js și le adaugă în pagină. În ultima secțiune, deschid elementul corpului și definesc un cârlig pentru modulul de meniu. În cele din urmă, am terminat prin afișarea siglei site-ului.

Dacă nu ești un veteran al Prestashop, probabil că te întrebi unde vin aceste variabile. Așa cum am spus mai devreme, din păcate, documentația Prestashop lipsește, dar acestea oferă un instrument de depanare pe care îl puteți lansa adăugând Depanare la oricare dintre fișierele șablonului. Când deschideți pagina corespunzătoare din browser, veți primi un pop-up care conține o listă cu toate variabilele pentru șablonul respectiv. Acest lucru vă permite să utilizați rapid (folosind ctrl / cmd-F ajută în mod dramatic) să identificați ce variabile sunt definite, precum și valorile acestora.

Acum să creăm footer.tpl șablon. Voi păstra acest lucru simplu și închideți-l și elemente, dar nu ezitați să adăugați orice doriți să afișați în partea de jos a fiecărei pagini. Aceasta poate include orice, de la cârlige la JavaScript particularizat; nu există limite pentru ceea ce ați putea pune aici.

Ultimul fișier pe care vreau să îl pun în aplicare este index.tpl fişier. Acesta este fișierul "pagina de pornire" care se afișează când un utilizator accesează rădăcina site-ului dvs. În tema implicită Prestashop, barele laterale sunt încărcate în header.tpl fișierul și șablonul index propriu conține numai un apel către displayHome cârlig. Acest lucru este bine dacă doriți ca barele laterale să fie pe toate paginile, dar, din nou, aș dori să subliniez faptul că cârligele sunt puse în aplicare în propria dvs. comoditate. Nu trebuie să implementați nici un cârlig și puteți adăuga cârlige personalizate dacă aveți nevoie de mai mult decât funcționalitatea standard.

Când creați pagina dvs. de index, trebuie să decideți ce părți sunt statice și care părți ar trebui să fie încărcate dinamic prin module. Am scos meniul principal din antet, pentru că asta am vrut să comand cu un modul. Așa că am pus un cârlig acolo unde vreau meniul și pot crea un modul care se atașează de acest cârlig. Puteți încărca mai multe elemente cu același cârlig. Nu există niciun motiv pentru a adăuga mai multe cârlige împreună și puteți gestiona ordinea modulelor unui cârlig în partea din spate, sub Module> Poziții.

Localizare

Ultima caracteristică specifică pentru Prestashop trebuie să țineți cont de instrumentele de localizare ale Prestashop. Prestashop vă permite să traduceți cu ușurință site-ul dvs. în mai multe limbi, utilizând o funcție Smarty, numită L. Îl folosiți înlocuind un șir standard cu L funcție, trecând șirul ca parametru. Iată un exemplu de

element, cu și fără traducere:

* Fără instrument de traducere * 

Aboneaza-te la noi!

* Cu instrumentul de traducere *

l s = "Abonați-vă la noi!"

Chiar dacă nu planificați în prezent să traduceți site-ul dvs., este o mică modificare care vă permite să traduceți cu ușurință paginile dvs. dacă decideți mai târziu să faceți acest lucru. Odată ce faceți aceste modificări în șabloanele dvs., puteți merge la Localizare> Traduceri pagina din spate și faceți clic pe naționalitatea la care doriți să traduceți.

Adăugarea de limbi non-implicite este simplă și o acoperim în cea de-a doua secțiune a paginii (numită "Adăugați / actualizați o limbă").

Un alt avantaj al utilizării localizării Prestashop este lista cu frazele pe care le oferă Prestashop. În loc să treceți prin întregul dvs. site, puteți să transmiteți pur și simplu lista de fraze unui vorbitor nativ al limbii dorite și să introduceți rapid valorile, fără a vă atinge tema.

Acum, introduceți codul HTML al paginii dvs. de pornire la index.tpl, și asigurați-vă că ați furnizat cârligele pe care doriți să le utilizați. Nu uitați să utilizați Depanare Funcția Smarty, dacă aveți nevoie să vedeți variabilele disponibile pentru șablonul dvs..

Acum puteți deschide un browser și naviga pe site-ul dvs. rădăcină. Mina arată astfel:

Este posibil să nu arate prea mult, dar ați construit coaja exterioară a șablonului. Dacă șablonul dvs. arată ca o mizerie de obiecte, probabil că aveți multe module instalate. Implicit, Prestashop permite multe module; Vă recomandăm să accesați pagina modulelor și să dezinstalați toate modulele. Nu vă faceți griji că le-ați pierdut pentru că le puteți reinstala făcând clic pe butonul de instalare de lângă modulul dorit.

Când creați o temă Prestashop, veți observa că modulele sunt responsabile pentru aproximativ 90% din conținut. Există module care afișează produsele, modulele pentru coșul de cumpărături etc. O parte importantă a faptului că este vorba de un Prestashop include, cel puțin, o cunoaștere de lucru despre modul de personalizare a aspectului modulelor.


module

Modulele din Prestashop nu sunt aceleași cu widgeturile Wordpress.

Modulele din Prestashop nu sunt aceleași cu widgeturile Wordpress; Modulele lui Prestashop pot fi atașate numai la cârligele specificate de creatorul modulului. De exemplu, dacă creați un modul care afișează un bloc "abonați la buletin informativ" și îl configurați pentru a merge în oricare dintre barele laterale, nu îl puteți plasa în zona subsolului.

Acest lucru poate părea greoi, dar există un motiv foarte bun pentru acest lucru: atunci când creați un modul, oferiți o funcție separată pentru fiecare dintre cârligele pe care doriți să le utilizați. De exemplu, dacă un modul de meniu se poate comporta diferit în funcție de locația sa în șablon.

Acest lucru vă oferă o mulțime de spațiu pentru personalizarea unui modul.

Această practică are mult mai mult sens dacă luați în considerare alte tipuri de cârlige: cârlige de acțiune. Desigur, nu doriți ca funcția care se execută atunci când adăugați un produs nou să fie executată atunci când un utilizator cumpără un produs de la dvs. Același lucru este valabil și pentru cârligele afișate; fiecare cârlig are funcția proprie, permițându-vă să faceți tot ce doriți cu el.

Când construiți o temă, există două modalități prin care puteți adăuga module. Prima opțiune este crearea unui modul propriu. Aceasta este o opțiune mai obositoare, dar veți obține un control mult mai mult în produsul final. Pe de altă parte, există peste 2000 de module în catalogul oficial al modulelor (și chiar mai mult pe site-uri terțe). Șansele sunt bune, puteți găsi ceva care să corespundă nevoilor dvs..

A doua opțiune este instalarea unui modul gata; Prestashop vă oferă posibilitatea de a personaliza aspectul prin suprascrierea fișierelor șablon. Aceasta este cea mai bună opțiune, dacă nu doriți să începeți să codificați propriul modul și vă permite să vă concentrați pe partea grafică. Am de gând să acopere ambele opțiuni; deci începeți cu prima.


Crearea propriului Modul

Vom construi un modul care afișează un număr configurabil de produse pe pagina de pornire. Acest lucru este bazat în mod liber pe modulul stoc, dar modulul meu va merge puțin mai mult în clasele de bază ale Prestashopului, pentru a vă oferi, sperăm, o analiză mai aprofundată a procesului.

Mai întâi, creați un dosar în module director, apoi creați un fișier PHP în interiorul acestuia cu același nume ca și folderul. Când deschideți module , veți vedea o convenție de numire, în care toate modulele care afișează numai conținutul încep cu cuvântul "bloc". Aceasta, desigur, nu este o cerință, dar are sens. Îmi voi numi dosarul blockdisplayproducts, și, în cadrul acestuia, voi crea fișierul PHP cu același nume.

Deschideți fișierul PHP și definiți clasa modulelor:

name = 'blockdisplayproducts'; $ this-> tab = 'front_office_features'; $ this-> version = 1.0; $ this-> author = 'Gabriel Manricks'; $ this-> need_instance = 0; părinte :: __ construct (); $ this-> displayName = $ this-> l ("Modul de afișare a produselor"); $ this-> description = $ this-> l ('Afișează o cantitate configurabilă de produse pentru pagina de pornire.'); 

Modulele Prestashop sunt orientate pe obiecte; prin urmare, trebuie să creați o clasă pentru modulul dvs. Numele clasei dvs. ar trebui să fie versiunea cămilă a numelui folderului dvs..

În partea de sus a fișierului, puteți vedea o imagine dacă afirmație. Acest lucru asigură că fișierul nu este încărcat direct prin browser. Apoi, clasa dvs. trebuie fie să subclasă direct clasa de module sau subclasa un decedent al clasei Module.

În interiorul constructorului, setăm proprietățile modulului. Prestashop folosește aceste informații pentru a fi afișate în back-end:

  • Nume este un nume de cod unic și nu este numele actual prezentat în back-end.
  • fila spune Prestashop categoria modulului. Puteți găsi o listă completă de categorii prin deschiderea Controlerele \ Admin \ AdminModuleController.php fişier.
  • autor, Nume și versiune sunt auto-explicative.
  • needs_instance spune Prestashop să creeze o instanță a variabilei dvs. atunci când accesează pagina modulelor. Acest lucru nu este de obicei necesar, dar dacă modulul dvs. trebuie să afișeze un mesaj sau să înregistreze ceva atunci când pagina de module este activă, atunci ar trebui să schimbați acest lucru la 1.

Ultimele două linii configurează numele și descrierea reală a modulului dvs. și utilizează aceeași metodă de localizare pentru a le permite să le traducem în diferite limbi. Aceste două linii trebuie să meargă după inițierea părinților conform ordinii preferate a Prestashop, utilizată de modulele lor oficiale.

Următorul pas este să înlocuiți metoda de instalare. Aici putem specifica cârligele de care avem nevoie, precum și opțiunile implicite pentru modulul nostru. Dacă una dintre setări eșuează, instalarea va eșua.

Acest modul este destinat paginii de pornire, așa că îl voi conecta la cârligul de acasă. De asemenea, dorim să adăugăm un fișier CSS în antet, ceea ce înseamnă că va trebui să adăugăm și cârligul cu antet. Dacă te duci la spate-end sub Module> Poziții pagina, puteți găsi numele tehnic al cârligelor (ceea ce vom specifica aici).

Imediat după __construi() adăugați următoarele:

funcția publică () if (parent :: install () == false || $ this-> registerHook ('displayHome') == false || $ this-> registerHook ('displayHeader') == false || Configurație :: updateValue ('DP_Number_of_Products', 6) == false) return false; return true; 

Acest lucru adaugă cele două cârlige și stabilește numărul implicit de produse la șase. Trebuie să denumiți proprietatea ceva unic, astfel încât alte module să nu interfereze cu valorile dvs. O abordare simplă adaugă numele sau inițialele modulului dvs. la începutul numelui.

Acum puteți instala modulul în pagina modulelor și ar trebui să se instaleze cu succes dacă totul este configurat corect. Mergeți la pagina de poziții și se va afișa ca înregistrată sub cele două cârlige.

Cârligele de punere în aplicare sunt destul de simple; creați o funcție publică cu cuvântul "cârlig" urmat de numele cârligului. Să începem cu cârligul cu antet. Vrem doar să adăugăm un fișier CSS temei noastre. Iată funcția completă:

funcția publică hookdisplayHeader ($ params) $ this-> context-> controler-> addCSS (($ this -> _ cale). 'blockdisplayproducts.css', 'all'); 

Creați acel fișier CSS în directorul tematic și șablonul dvs. trebuie să îl încarce în antet.

Cârligul următor este un pic mai complicat. Ar trebui să recupereze un anumit număr de produse din baza de date și să le încarce într-un fișier de șablon. Funcția de recuperare a produselor nu returnează imaginile sau link-urile produselor, așa că trebuie să apelăm câteva funcții diferite și să construim o gamă de produse. Iată funcția completă:

funcția publică hookdisplayHome ($ params) $ languageId = (int) ($ params ['cookie'] -> id_lang); $ numberOfProducts = (int) (Configurație :: get ("DP_Number_of_Products")); $ productsData = Produs :: getProducts ($ languageId, 0, $ numberOfProducts, "id_product", "ASC"); dacă (! $ productsData) returnează "eroare"; $ products = array (); $ link = link nou (null, "http: //"); foreach ($ productsData ca $ produs) $ tmp = Produs :: getCover ($ product ['id_product']); array_push ($ products, array ('name' => $ product ['name'], 'author' => $ product ['manufacturer_name'], 'desc' > $ product ['price'], 'link' => $ link-> getProductLink (nou produs ($ product ['id_product'])), 'image' => $ link-> getImageLink ], $ tmp ['id_image'])));  $ this-> smarty-> assign (array ('produse' => $ produse)); returnați $ this-> display (__ FILE__, 'blockdisplayproducts.tpl'); 

Începe prin a se afișa numărul de produse și idul de limbă al utilizatorului. Apoi, suntem invitați să obținem numărul de produse atribuite începând de la primul produs înregistrat. După aceea, ne asigurăm că nu au existat probleme în a scoate produsele dacă există. Următorul bloc este partea pe care am menționat-o mai devreme, care construiește o matrice cu toate proprietățile de care avem nevoie atunci când afișăm elementul. Aceasta include imaginea și link-ul care nu au fost returnate împreună cu restul datelor despre produs. Ultima secțiune adaugă matricea de produse la Smarty și încarcă fișierul șablon pe care l-ați ales. Am numit fișierul șablon și fișierele CSS cu același nume ca modulul, dar aceasta nu este o cerință; poți să-i numești ceea ce dorești.

Dacă deschideți site-ul dvs. chiar acum, veți vedea doar un mesaj, notând "Nu a fost găsit un șablon pentru modulul blockdisplayproducts."Deci, să creăm fișierul șablon din directorul modulului nostru, denumindu-l exact așa cum ați specificat-o în funcția de cârlig. Această parte depinde într-adevăr de aspectul dvs. specific, dar aici este fișierul șablonului meu:

dacă produse $! == false 

ls = "CĂRȚILE NOASTRE" mod = "blockdisplayproducts"

foreach from = $ product item = nume produs = productLoop
$ Product.name | strip_tags | evacuare: html: 'UTF-8'
$ Product.author | sus | strip_tags | evacuare: html: 'UTF-8'
$ Product.name | strip_tags | evacuare: html: 'UTF-8'
$ Product.desc
$ $ Product.price | string_format: "% 2f"
l s = "Vizualizare" mod = "blockdisplayproducts"
/ foreach / if

Deoarece Prestashop utilizează șabloane Smarty, aveți o serie de funcții de ajutor pe care le puteți utiliza atunci când vă afișați datele. Începem cu un dacă pentru a vă asigura că matricea produselor este în regulă. Dacă este, vom merge într-o pentru buclă, generând codul HTML specificat pentru fiecare. Folosim funcțiile Smarty construite în helper pentru a elimina etichetele HTML și pentru a ascunde numele autorilor de majuscule și folosim o altă metodă pentru a formata prețul la numărul dorit de zecimale. Pentru a vedea o listă completă de modificatori, consultați aici.

De asemenea, observați că, atunci când traduceți șiruri de caractere aici, trebuie să introduceți numele modulului dvs. Acest lucru se datorează faptului că traducerea nu este legată de o temă, ci de modulul propriu-zis. Pe de altă parte, L funcția este specifică șablonului; astfel încât, pentru a găsi fișierul dvs. de traducere, acesta necesită numele modulului.

Acum puteți vizualiza site-ul în browser; dacă ați adăugat produse, acestea ar trebui afișate acum pe pagina de pornire.

Acum, modulul nostru este pe deplin funcțional, dar nu există nicio modalitate de ajustare a numărului de produse returnate. Pentru a face acest lucru, trebuie să adăugăm o funcție, numită getContents. Dacă modulul dvs. are această funcție, atunci Prestashop va adăuga automat un buton de configurare în pagina "module". Orice lucru returnat de această funcție va fi afișat pe pagina de configurare. Pentru a începe, adăugați funcția în clasa modulului și completați-o cu următoarele:

funcția publică getContent () $ html = '
„; $ html. = '

". $ this-> displayName. "Setări

„; $ html. = '
„; $ html. = ". $ this-> l ('Număr de produse care trebuie afișate'). ': „; $ html. = ' '; $ html. ='
„; $ html. = '
„; returnați $ html;

Această funcție creează pur și simplu HTML-ul necesar pentru a afișa un formular cu o casetă cu număr și buton de salvare. Din nou, folosesc $ This-> l () astfel încât să puteți traduce modulul în alte limbi în viitor, dacă aveți nevoie să faceți acest lucru. Am folosit un câmp numeric în formularul HTML, dar aveți grijă dacă faceți un modul comercial. Încă nu este acceptată de toate browserele. Acestea fiind spuse, dacă este pentru uz personal, atunci vă simțiți liberi!

Singurul alt lucru care ar putea parea criptic este Instrumente :: safeOutput () funcție pe care o apelam pe adresa URL. Sunt sincer nu 100% sigură cât de important este acest apel, dar ceea ce face el este striping toate etichetele HTML și de conversie a caracterelor necesare pentru a entități html.

Apoi, accesați pagina modulelor și faceți clic pe butonul de configurare din modulul dvs. Veți fi întâmpinați cu formularul pe care tocmai l-am făcut.

Puteți ajusta numărul și apăsați Salvare, dar nu am scris încă în funcția de salvare, astfel încât va păstra resetarea la 6 (valoarea deja salvată).

Înapoi în funcție, adăugați următorul cod la începutul funcției:

dacă (Instrumente :: isSubmit ('numProds')) Configuration :: updateValue ('DP_Number_of_Products', (int) (Instrumente :: getValue ('numProds'))); 

Aceasta verifică dacă valoarea a fost trimisă - adică, dacă valoarea numProds există ca a $ _GET sau $ _POST variabil. Apoi, actualizăm proprietatea în care am stocat valoarea. Metoda Instrumente :: GetValue acceptă numele unui câmp de formular și, opțional, un al doilea șir de ce se returnează în cazul în care câmpul de formular nu a fost găsit; apoi returnează un șir formatat cu valoarea care a fost trimisă. Este important să puneți acest lucru înainte de a genera formularul HTML; în caz contrar, formularul va conține valorile vechi așa cum sunt cele aplicate celor actualizate.

Cu ultimul fragment de cod, am terminat modulul. Singurul lucru pe care ar trebui să-l faceți este să adăugați o pictogramă de 16x16 GIF în dosarul modulelor.

Suntem gata să trecem la următoarea opțiune pentru integrarea modulelor cu tema.


Anulează modulele existente

A doua opțiune este să utilizați un modul existent și să îl re-modelați în funcție de preferințele dvs. Această opțiune este considerabil mai simplă, deoarece trebuie doar să re-creați fișierele ".tpl" din modul.

Tema exemplului meu lipsește încă din meniul de navigare de sus, așa că să customizăm modulul respectiv. Pentru a începe, activați / instalați modulul în pagina "module", numită "Top horizontal menu". Următorul pas este să creați un director în directorul tematic, numit module. În cadrul acestuia, creați un alt dosar cu numele real al modulului - în cazul nostru, acesta este blocktopmenu. Când se încarcă fișierele tpl ale unui modul, Prestashop verifică mai întâi pentru a vedea dacă există un fișier în directorul de suprascriere a modulelor de teme activate cu același nume. Dacă da, va încărca versiunea temelor în locul celei stoc. Fișierul tpl al modulului de meniu este denumit blocktopmenu.tpl, astfel încât trebuie să creați un fișier cu același nume în noul dosar pe care tocmai l-am creat.

Cea mai ușoară modalitate de a afla ce fel de date oferă un modul este fie să aruncați o privire la fișierul tpl și să vedeți ce date folosesc sau să încărcați Depanare instrument. Pentru a accelera lucrurile, vă pot spune că acest plugin oferă doar o singură variabilă, numită MENIUL, care conține un șir cu toate elementele de meniu combinate în interior

  • Etichete. Acum, de la sine, acest lucru nu vă dă o mulțime de cameră wiggle, atunci când vine vorba de personalizarea aspectului. Dar, dacă ați vrea să adăugați altceva decât doar a Li eticheta pentru fiecare articol? Din fericire, Smarty pentru salvare! Acesta nu este un articol despre Smarty, așa că voi păstra această parte scurt, dar, practic, vom folosi o combinație a funcției de înlocuire a șirului și a funcției de explodare a PHP pentru a izola elementele individuale. În urma acestui lucru, putem construi codul HTML cu un pentru fiecare buclă. Aici este fișierul șablon completat pentru acest modul:
      atribuire var = valoarea tmpMenu = $ MENU | replace: '
    • ': " atribut var = item value ="
    • "explode: $ tmpMenu foreach $ elemente ca $ item if! $ item @ last
    • $ Item
    • dacă ($ item @ index + 2)! = $ element @ total
      siglă
      / if / if / foreach

    Acum este vorba de o mulțime de cod nou, așa că o să trec linia de linie. Începe prin deschidere div și ul Etichete; acestea sunt pur și simplu din motive estetice. Apoi, folosim o comandă Smarty, numită atribui. Aceasta face exact ceea ce pare: atribuie o valoare unei variabile. În prima instrucțiune de atribuire, eliminăm deschiderea Li tag-uri, și, în al doilea, vom exploda șirul de închidere Li etichetă. Rezultatul este o matrice care conține o listă a legăturilor elementului de meniu. Apoi, ne mutăm pe pentru fiecare buclă, unde afișăm fiecare element înăuntru

  • - cu excepția, de această dată, am adăugat o imagine de pictogramă după fiecare element de meniu, cu excepția ultimului element din meniu. De asemenea, este posibil să fi observat că evităm ultima valoare din matrice împreună. Acest lucru se datorează faptului că ultima valoare este doar un caracter de linie nouă.

    Dacă ați executat totul corect până acum, puteți să-l creați în funcție de preferințele dvs. și să adăugați câteva pagini în meniu din pagina "configurare" a modulului. După ce ați terminat, ar trebui să puteți accesa site-ul dvs. și să vedeți că meniul funcționează conform așteptărilor!


    Concluzie

    Aceasta a fost o revizuire foarte scurtă, dar amănunțită a tehnicilor necesare creării temelor pentru PrestaShop. Pe parcursul tutorialului, am parcurs pașii necesari pentru a crea o temă completă multilingvă și două moduri diferite de a plasa module tematice în șablonul dvs..

    Mergând înainte, vă sugerez să vă aruncați puțin mai adânc în Smarty, deoarece oferă o serie de caracteristici ascunse care vă pot ajuta într-adevăr. În ceea ce privește un loc bun pentru a afla mai multe despre Prestashop, bine, nu este prea mult; Vă recomandăm să citiți sursa. La momentul acestei scrieri, documentația Prestashop este oarecum subtilă în reflectarea subiectelor; cu toate acestea, codul sursă este foarte bine documentat. O altă opțiune excelentă este de a examina alte module și teme pentru a înțelege mai bine ce este capabil de Prestashop.

    Sper că v-ați bucurat să citiți acest articol. Dacă aveți întrebări referitoare la articolul în sine sau la Prestashop în general, vă rugăm să lăsați un comentariu mai jos!

    Aveți nevoie de teme PrestaShop premium, gata pentru a merge? Check out ThemeForest!

  • Link-uri utile: PrestaShop Plugins de la CodeCanyon.

    Cod