PrestaShop Theming Forklart

Prestashop er uten tvil den # 1 open source e-Commerce-løsningen på nettet. Det tilbyr utallige funksjoner, tillegg og temaer, men mangelen på god dokumentasjon har gitt nybegynnere oppfatningen om at den ikke er mulig. I denne artikkelen vil jeg gå gjennom prosessen med å bygge ditt eget tilpassede tema, samt lage og tilpasse Prestashop-moduler.

Prestashop kjører på PHP og mySQL, og stoler på Smarty-motoren for sine "Maler" (sider). Ikke bekymre deg, hvis du ikke er kjent med Smarty. Du bruker det i utgangspunktet til å lage sider med plassholderprofiler, og Prestashop fyller inn informasjonen når siden lastes. Det er enkelt å overgå til, hvis du har brukt noe som Handlebars eller Underscore maler.

Jeg kommer til å anta at du allerede har lastet ned og installert Prestashop. Hvis ikke, kan du laste ned den nyeste versjonen; de har en instruksjonsvideo du kan se for å lære å sette opp det.


Registrering av temaet ditt

Nettstedet ditt bør se ut som det følgende bildet, hvis du konfigurerer Prestashop med standardinnstillingene.

Prosessen med å bygge ditt eget tema begynner med å lage en mappe. I din valgte nettleser navigerer du til rot Prestashop-katalogen, og du finner en mappe som heter temaer. Inne i temaer mappe, opprett en ny katalog med navnet på ditt tema. Jeg skal ringe min, "Demo."

Hvis du legger til et bilde av malen din i denne mappen og navnet på den preview.jpg, Prestashop bør automatisk finne og legge til malen til back-end. Hvis det ikke gjør det, eller du foretrekker å legge til bildet senere, kan du manuelt legge til temaet. For å gjøre dette, gå til temaer alternativ under Preferanser menyen, og klikk Legg til ny på toppen. Når du er ferdig, ser du temaet ditt på midten av siden. Aktiver det ved å bare klikke på det og trykke på Lagre knapp.

Legg til logoen din mens du er her; Du finner dette alternativet nederst på siden. Du må kanskje øke filopplastingsgrensen i Prestashop (eller kanskje til og med PHPs konfigurasjonsfil) hvis du har et veldig stort bilde.


Crash Course i Prestashop

Smarty er en malmotor for PHP, som letter adskillelsen av presentasjonen fra applikasjonslogikken.

Som nevnt tidligere bruker Prestashop Smarty for å generere sidene; så alle malfiler har en .TPL forlengelse. Det er mange sider du må opprette for å få et komplett tema; ta et øyeblikk og se fillisten.

Til slutt bestemmer temaets funksjonalitet hvilke sider du bør implementere. Denne siden er basert på filene i kontrollermappen, og du kan overstyre standardkontrollerne eller legge til dine egne tilpassede kontroller for å passe til temaet ditt. Men det er utenfor rammen av denne artikkelen. Blant kontrollerne i controllers \ front katalog er to malfiler som automatisk laster: header.tpl og footer.tpl.

Hovedinnholdet på nettstedet ditt lastes av moduler ved hjelp av "kroker".

Det finnes to typer kroker i Prestashop: handlings- og display kroker. Disse funksjonene fungerer på samme måte, men de er forskjellige i formålet. En krok gir i utgangspunktet brukeren et middel til å feste tilpasset kode til en ekstern kilde. I tilfelle en handlingskrok, kjører koden på kroken når kroken kalles. For eksempel kommer Prestashop med en standardkrok som heter actionProductAdd Det går når du legger til et produkt. Så du kan legge ved en modul til denne kroken hvis du ønsker å sende et nyhetsbrev hver gang et nytt produkt er lagt til.

En displaykrok er veldig lik, men i stedet for å koble en funksjon til en hendelse, kobler du en funksjon til et bestemt sted på malen. Med andre ord, vil Prestashop ringe modulen din til et bestemt punkt (for eksempel høyre sidefelt), og alt som returneres plasseres på siden. Du kan se alle de registrerte krokene ved å gå til Moduler> Posisjoner side i back admin.

Personlig synes jeg det er best å starte med et standard HTML-tema. Dette er ikke et krav, men jeg anbefaler det på flere grunner:

  • Det lar deg umiddelbart se hvilke kroker du trenger og hvordan du deler innholdet ditt.
  • Det gir deg en klar retning av hvilke malfiler du må opprette, samt å gi deg en ide om hva som vil være statisk innhold og hva som skal være en modul. Det lar deg også legge til preview.jpg filen med en gang.

Følgende bilde er et bilde av mitt eksempel HTML-mal:

Og her kan du se hvordan jeg vil dele det opp i Prestashop kroker:


Opprette maldelene

La oss nå lage header.tpl filen i temakatalogen din, og fyll den med temaheader. Dette inkluderer dOCTYPE, område og alt i kroppen som du vil vise på alle sider. Her er et eksempel header.tpl fil:

   Prestashop Site  hvis isset ($ css_files) foreach fra = $ css_files key = css_uri item = media  / foreach / if hvis isset ($ js_files) foreach fra = $ js_files item = js_uri  / foreach / if   
$ HOOK_TOP
Header Image

Det er noen ting å påpeke i denne koden. Jeg preprended CSS filnavnet med $ Css_dir. Dette er en Smarty-variabel som peker på en mappe som heter css inne i temaet ditt katalog, hvor alt du CSS-filer skal gå.

Den neste linjen bruker Smartys for hver sløyfe for å legge til alle CSS-filene til de aktiverte modulene. Det er verdt å merke seg at hvis du oppretter en CSS-fil som heter global.css i css katalog, legger sløyfen automatisk den filen til siden.

Noen få linjer senere, en annen for hver loop behandler JavaScript-filene i js katalog og legger dem til siden. I det siste avsnittet åpner jeg kroppselementet og definerer en krok for menymodulen. Til slutt avsluttes jeg ved å vise nettstedets logo.

Med mindre du er Prestashop veteran, lurer du sikkert på hvor jeg kommer opp med disse variablene. Som sagt tidligere, mangler Prestashops dokumentasjon, men de gir et feilsøkingsverktøy som du kan starte ved å legge til Debug til noen av malfilene. Når du åpner den tilsvarende siden i nettleseren din, får du en popup med en liste over alle variabler for den aktuelle malen. Dette lar deg raskt (ved hjelp av ctrl / cmd-F bidrar dramatisk) identifisere hvilke variabler som er definert, samt deres verdier.

La oss nå lage footer.tpl mal. Jeg skal holde denne enkle og bare lukke og elementer, men vær så snill å legge til noe du vil vise nederst på hver side. Dette kan inkludere alt fra kroker til tilpasset JavaScript; Det er ingen grenser for hva du kan sette her.

Den siste filen jeg vil implementere er index.tpl fil. Dette er «startsiden» -filen som vises når en bruker får tilgang til roten til nettstedet ditt. I standard Prestashop-temaet blir sidebjørene lastet inn i header.tpl fil, og den faktiske indeksmalen inneholder bare en samtale til displayHome kroken. Dette er greit hvis du vil at sidebjørene skal være på alle sidene, men igjen vil jeg understreke at kroker er implementert på egen hånd. Du trenger ikke å implementere noen kroker, og du kan legge til dine egne tilpassede kroker hvis du trenger mer enn standardfunksjonaliteten.

Når du oppretter indekssiden, må du bestemme hvilke deler som er statiske og hvilke deler som skal lastes dynamisk gjennom moduler. Jeg fjernet hovedmenyen fra overskriften fordi det var noe jeg ønsket å kontrollere med en modul. Så jeg satte en krok der jeg ønsket menyen, og jeg kan lage en modul som festes til denne kroken. Du kan laste flere elementer med samme krok. Det er ingen grunn til å legge til flere kroker sammen, og du kan styre rekkefølgen på en krokes moduler i back-end under Moduler> Posisjoner.

lokalisering

Den siste Prestashop-spesifikke funksjonen du bør vurdere, er Prestashops lokaliseringsverktøy. Prestashop lar deg enkelt oversette nettstedet ditt til flere språk ved hjelp av en Smarty-funksjon, oppkalt l. Du bruker den ved å erstatte en standard streng med l funksjon, passerer strengen som en parameter. Her er et eksempel på en

element, både med og uten oversettelse:

* Uten oversettelsesverktøy * 

Abonner på oss!

* Med oversettelsesverktøy *

l s = "Abonner på oss!"

Selv om du ikke planlegger å oversette nettstedet ditt, er det en liten endring som gjør det enkelt å oversette sidene dine dersom du senere bestemmer deg for å gjøre det. Når du har gjort disse endringene til maler, kan du gå til Lokalisering> Oversettelser side i back-end og klikk på nasjonaliteten du vil oversette til.

Å legge til ikke-standard språk er enkelt, og jeg dekker det i den andre delen på siden (passende navnet "Legg til / oppdater et språk").

En annen fordel ved å bruke Prestashops lokalisering er listen over setningene Prestashop gir deg. I stedet for å gå gjennom hele nettstedet ditt, kan du bare gi listen over setninger til en morsmål for ønsket språk og raskt legge inn verdiene, mens du aldri berører temaet ditt.

Angi nå hjemmesidenes spesifikke HTML for index.tpl, og vær sikker på å levere krokene du vil bruke. Husk å bruke Debug Smarty-funksjonen, hvis du trenger å se variablene er tilgjengelige for malen din.

Nå kan du åpne en nettleser og navigere til nettstedets rot. Mine ser slik ut:

Det kan ikke se ut som mye, men du har bygget malerens ytre skall. Hvis malen ser ut som et rot av objekter, er det sannsynligvis fordi du har mange moduler installert. Som standard aktiverer Prestashop mange moduler; Jeg anbefaler å gå til modulsiden og avinstallere alle modulene. Ikke bekymre deg for å miste dem fordi du kan installere dem på nytt ved å klikke på installasjonsknappen ved siden av ønsket modul.

Når du oppretter et Prestashop-tema, vil du legge merke til at modulene er ansvarlige for ca 90% av innholdet. Det finnes moduler som viser produktene, modulene til handlekurven osv. En stor del av å være en Prestashop-temer inkluderer i det minste et arbeidskunnskap om hvordan man tilpasser utseendet til modulene.


moduler

Moduler i Prestashop er ikke det samme som Wordpress-widgets.

Moduler i Prestashop er ikke det samme som Wordpress-widgets; Prestashops moduler kan kun festes til kroker som modulskaperen spesifiserer. Hvis du for eksempel lager en modul som viser en "abonnere på nyhetsbrev" -blokk og du setter den opp for å gå i begge sidebjørene, kan du ikke plassere den i bunntekstområdet.

Dette kan virke tungvint, men det er en veldig god grunn til dette: Når du oppretter en modul, gir du en egen funksjon for hvert av krokene du vil bruke. For eksempel, hvis en menymodul kan oppføre seg forskjellig basert på plasseringen i malen.

Dette gir deg mye plass til å tilpasse en modul.

Denne praksisen gir mye mer mening hvis du vurderer andre slags kroker: Handlingskroker. Du vil åpenbart ikke ha den funksjonen som utføres når du legger til et nytt produkt som skal utføres når en bruker kjøper et produkt fra deg. Det samme gjelder for display kroker; hver krok har sin egen funksjon, slik at du kan gjøre hva du vil med den.

Når du bygger et tema, er det to måter du kan gå om å legge til moduler. Det første alternativet er å lage din egen modul. Dette er det mer kjedelige alternativet, men du får mye mer kontroll i sluttproduktet. På den annen side er det over 2000 moduler i den offisielle modulkatalogen (og enda mer på tredjeparts nettsteder). Sjansene er gode, du kan finne noe som passer dine behov.

Ditt andre alternativ er å installere en ferdigmodul; Prestashop gir deg muligheten til å tilpasse utseendet ved å overstyre malfiler. Dette er det beste alternativet hvis du ikke virkelig vil starte kodingen din egen modul, og det lar deg fokusere på den grafiske siden. Jeg skal dekke begge alternativene; så la oss starte med den første.


Opprette din egen Modul

Vi bygger en modul som viser et konfigurerbart antall produkter på hjemmesiden. Dette er løst basert på aksjemodulen, men min modul vil gå litt mer inn i Prestashops underliggende klasser for å forhåpentligvis gi deg en mer grundig titt på prosessen.

Først oppretter du en mappe i moduler katalog, og deretter lage en PHP-fil innsiden av den med samme navn som mappen. Når du åpner moduler mappe, vil du se en navngivningskonvensjon der alle modulene som bare viser innhold starter med ordet "blokk". Dette er selvsagt ikke et krav, men det er fornuftig. Jeg skal navngi mappen min blockdisplayproducts, og innenfor det lager jeg PHP-filen med samme navn.

Åpne PHP-filen og definer modulklassen:

navn = 'blockdisplayproducts'; $ this-> tab = 'front_office_features'; $ this-> version = 1.0; $ this-> author = 'Gabriel Manricks'; $ this-> need_instance = 0; ordnede :: __ konstruksjon (); $ this-> displayName = $ this-> l ('Display Products Module'); $ this-> description = $ this-> l ('Viser en konfigurerbar mengde produkter for hjemmesiden.'); 

Prestashop moduler er objektorientert; Derfor må du lage en klasse for modulen din. Navnet på klassen din skal være den kamelformede versjonen av mappens navn.

Øverst på filen kan du se en hvis uttalelse. Dette sikrer at filen ikke lastes direkte gjennom nettleseren. Deretter må klassen din enten direkte subclassere modulklassen eller underklassen en decedent i modulklassen.

Inne i konstruktøren setter vi opp modulens egenskaper. Prestashop bruker denne informasjonen til å vises i back-end:

  • Navn er et unikt "kodenavn", og det er ikke det faktiske navnet vist i back-end.
  • tab forteller Prestashop modulens kategori. Du kan finne en komplett liste over kategorier ved å åpne Controllers \ Admin \ AdminModuleController.php fil.
  • forfatter, Navn og versjon er selvforklarende.
  • needs_instance forteller Prestashop å opprette en forekomst av variabelen når du åpner modulsiden. Dette er vanligvis ikke nødvendig, men hvis modulen din må vise en melding eller logge på noe når modulsiden er aktiv, bør du endre dette til en 1.

De to siste linjene konfigurerer det faktiske visningsnavnet og beskrivelsen for modulen din, og de bruker samme lokaliseringsmetode for å tillate at de oversettes til forskjellige språk. Disse to linjene må gå etter foreldrenes initialisering i henhold til Prestashops foretrukne ordre som brukes av deres offisielle moduler.

Det neste trinnet er å overstyre installasjonsmetoden. Her kan vi spesifisere kroker vi trenger, samt standardvalgene for modulen vår. Hvis noen av innstillingene feiler, mislykkes installasjonen.

Denne modulen er beregnet på hjemmesiden, så jeg kobler den til hjemmekroken. Vi vil også legge til en CSS-fil i overskriften, noe som betyr at vi må legge til topptekrok også. Hvis du går til back-end under Moduler> Posisjoner side, kan du finne krokens tekniske navn (som vi vil spesifisere her).

Like etter __construct () funksjon, legg til følgende:

public function install () if (foreldre :: install () == false || $ this-> registerHook ('displayHome') == false || $ this-> registerHook ('displayHeader') == false || Konfigurasjon :: updateValue ('DP_Number_of_Products', 6) == false) return false; returnere sant; 

Dette legger til de to krokene og setter standard antall produkter til seks. Du bør nevne eiendommen noe unikt slik at andre moduler ikke forstyrrer dine verdier. En enkel tilnærming legger til modulens navn eller initialer til begynnelsen av navnet.

Du kan nå installere modulen på modulsiden, og den skal installeres hvis alt er riktig konfigurert. Gå til stillingssiden, og den vil bli vist som registrert under de to krokene.

Implementering av kroker er ganske enkelt; Opprett en offentlig funksjon med ordet "krok" etterfulgt av krokens navn. La oss starte med topptekken. Vi vil bare at den skal legge til en CSS-fil til vårt tema. Her er den komplette funksjonen:

offentlig funksjon hookdisplayHeader ($ params) $ this-> context-> controller-> addCSS (($ denne -> _ banen). 'blockdisplayproducts.css', 'all'); 

Opprett den CSS-filen i temakatalogen, og malen din skal laste den i overskriften.

Neste krok er litt mer komplisert. Det bør hente et visst antall produkter fra databasen og laste dem inn i en malfil. Funksjonen for å hente produktene returnerer ikke produktens bilder eller koblinger, så vi må ringe noen forskjellige funksjoner og "bygge" en rekke produkter. Her er den komplette funksjonen:

offentlig funksjon hookdisplayHome ($ params) $ languageId = (int) ($ params ['cookie'] -> id_lang); $ numberOfProducts = (int) (Konfigurasjon :: get ("DP_Number_of_Products")); $ productsData = Produkt :: getProducts ($ languageId, 0, $ numberOfProducts, "id_product", "ASC"); hvis (! $ productsData) returnerer "feil"; $ produkter = array (); $ link = new Link (null, "http: //"); foreach ($ productsData as $ product) $ tmp = Produkt :: getCover ($ produkt ['id_product']); array_push ($ produkter, array ('name' => $ produkt ['name'], 'author' => $ produkt ['manufacturer_name'], 'desc' => $ produkt ['description_short'], 'price' = > $ produkt ['pris'], 'link' => $ link-> getProductLink (nytt produkt ($ produkt ['id_product'])) 'image' => $ link-> getImageLink ($ produkt ['link_rewrite' ], $ tmp ['id_image']))));  $ this-> smarty-> assign (array ('products' => $ produkter)); returnere $ this-> display (__ FILE__, 'blockdisplayproducts.tpl'); 

Det begynner med å få antall produkter som skal vises og brukerens språk-ID. Vi ringer da for å få tildelt antall produkter fra det første registrerte produktet. Deretter sørger vi for at det ikke var noen problemer å få produktene spennende hvis det var det. Den neste blokken er delen jeg nevnte tidligere, som bygger opp en matrise med alle egenskapene vi trenger når du viser varen. Dette inkluderer bildet og lenken som ikke ble returnert med resten av produktdataene. Den siste delen legger til produktsammensetningen til Smarty og laster inn malfilen du velger. Jeg heter malfilen og CSS-filene med samme navn som modulen, men dette er ikke et krav; Du kan nevne det uansett.

Hvis du åpner nettstedet ditt akkurat nå, vil du bare se en melding, og notere "Ingen mal funnet for modulblokkdisplayproducts."Så la oss lage malfilen i modulens katalog, og navngi den samme som du bare angitt i krokfunksjonen. Denne delen er virkelig avhengig av dine spesifikke temaer, men her er min malfil:

hvis $ produkter! == false 

l s = "VÅRE BØKER" mod = "blockdisplayproducts"

foreach fra = $ produkter vare = produktnavn = productLoop
$ Product.name | strip_tags | flukt: html: 'UTF-8'
$ Product.author | øvre | strip_tags | flukt: html: 'UTF-8'
$ Product.name | strip_tags | flukt: html: 'UTF-8'
$ Product.desc
$ $ Product.price | string_format: "% 2f"
l s = "Vis" mod = "blockdisplayproducts"
/ foreach / if

Siden Prestashop bruker Smarty-maler, har du en rekke hjelpefunksjoner som du kan bruke når du viser dataene dine. Vi starter med en hvis funksjon for å sørge for at produktserien er i orden. Hvis det er, går vi inn i en til loop, genererer den angitte HTML for hver enkelt. Vi bruker Smartys innebygde hjelpefunksjoner til å fjerne HTML-koder og skjule forfatterens navn til store versjoner, og vi bruker en annen metode for å formatere prisen til ønsket antall desimaler. For å se en fullstendig liste over modifikatorer, se her.

Vær også oppmerksom på at når du oversetter strenge her, må du skrive inn modulens navn. Dette skyldes at oversettelsen ikke er knyttet til et tema, men til selve modulen. På den annen side, l funksjonen er mal spesifikk; så, for at den skal finne oversettelsesfilen din, krever det modulens navn.

Du kan nå vise nettstedet ditt i nettleseren; hvis du har lagt til noen produkter, bør de vises på hjemmesiden nå.

Nå er modulen vår fullt funksjonell, men det er ingen måte å justere antall returnerte produkter. For å gjøre dette må vi legge til en funksjon, kalt getContents. Hvis modulen din har denne funksjonen, vil Prestashop automatisk legge til en konfigurasjonsknapp på modulen. Alt som returneres av denne funksjonen, vises på konfigurasjonssiden. For å begynne, legg til funksjonen i modulens klasse og fyll den med følgende:

offentlig funksjon getContent () $ html = '
'; $ html. = '

'. $ this-> displayName. 'Innstillinger

'; $ html. = '
'; $ html. = ". $ this-> l ('Antall produkter til visning'). ': '; $ html. = ' '; $ html. = '
'; $ html. = '
'; returner $ html;

Denne funksjonen bygger bare opp HTML-koden som er nødvendig for å vise et skjema med en nummerboks og lagre knapp. Igjen bruker jeg $ Dette-> l () metode slik at du kan oversette modulen til andre språk i fremtiden, bør du gjøre det. Jeg har brukt et nummerfelt i HTML-skjemaet, men vær forsiktig, hvis du lager en kommersiell modul. Den støttes fortsatt ikke av alle nettlesere. Når det er sagt, hvis det er for eget bruk, så følg fri!

Den eneste andre tingen som kan virke kryptisk er den Verktøy :: safeOutput () funksjon som vi ringer på nettadressen. Jeg er ærlig ikke 100% sikker på hvor viktig denne samtalen er, men hva den gjør er at den striper alle HTML-koder og konverterer de nødvendige tegnene til html-enheter.

Deretter går du til modulsiden og klikker på konfigurasjonsknappen på modulen din. Du vil bli møtt med skjemaet vi nettopp har laget.

Du kan justere nummeret og trykke på lagre, men vi har ikke skrevet inn i lagringsfunksjonen ennå, så det vil fortsette å tilbakestille til 6 (verdien som allerede er lagret).

Tilbake i funksjonen, legg til følgende kode til begynnelsen av funksjonen:

hvis (Verktøy :: isSubmit ('numProds')) Konfigurasjon :: updateValue ('DP_Number_of_Products', (int) (Verktøy :: getValue ('numProds'))); 

Dette kontrollerer for å se om verdien ble sendt - dvs. hvis verdien numProds finnes som en $ _GET eller $ _POST variabel. Vi oppdaterer deretter eiendommen der vi lagret verdien. Metoden Verktøy :: getValue aksepterer navnet på et skjemafelt og eventuelt en annen streng av hva som skal returneres dersom skjemafeltet ikke ble funnet; Den returnerer deretter en formatert streng med verdien som ble sendt. Det er viktig å sette dette før du genererer HTML-skjemaet; ellers vil skjemaet inneholde de gamle verdiene som tilordnet de oppdaterte.

Med den siste koden, har vi fullført modulen. Den eneste andre tingen du bør gjøre er å legge til et 16x16 GIF-ikon i modulmodulen din.

Vi er nå klare til å gå videre til det neste alternativet for å integrere moduler med temaet ditt.


Overstyrende eksisterende moduler

Det andre alternativet er å bruke en eksisterende modul og re-tema den etter dine ønsker. Dette alternativet er betydelig enklere da du bare trenger å gjenopprette ".tpl" -filene fra modulen.

Mitt eksempel tema mangler fortsatt en toppnavigasjonsmeny, så la oss tilpasse den modulen. For å komme i gang, aktiver / installer modulen på modulen, kalt "Topp horisontal meny". Det neste trinnet er å lage en mappe i temakatalogen din, kalt moduler. Innenfor det, opprett en annen mappe med det faktiske navnet på modulen - i vårt tilfelle er dette blocktopmenu. Når du laster inn en modulens tpl-filer, kontrollerer Prestashop først for å se om det finnes en fil i mappen for overstyring av aktiverte temaer med samme navn. I så fall vil det laste temaversjonen i stedet for lager ett. Menymodulens tpl-fil er oppkalt blocktopmenu.tpl, så du må opprette en fil med samme navn i den nye mappen vi nettopp har opprettet.

Den enkleste måten å finne ut hva slags data en modul tilbyr, er å enten se på deres tpl-fil og se hvilke data de bruker, eller last opp Debug verktøy. For å øke hastigheten, kan jeg fortelle deg at dette pluginet bare tilbyr en enkelt variabel, oppkalt MENY, som inneholder en streng med alle menypunktene kombinert innvendig

  • tags. Nå, dette gir deg ikke mye wiggle rom, når det gjelder å tilpasse utseendet. Men, hva om du vil legge til noe annet enn bare en li tag for hvert element? Vel, heldigvis, Smarty til redning! Dette er ikke en artikkel på Smarty, så jeg vil holde denne delen kort, men i utgangspunktet vil vi bruke en kombinasjon av strengen erstattingsfunksjonen og PHPs eksploderingsfunksjon for å isolere de enkelte elementene. Etter det kan vi bygge HTML-koden med en for hver sløyfe. Her er min ferdige malfil for denne modulen:
      assign var = tmpMenu verdi = $ MENU | erstatt: '
    • ': " assign var = items value ="
    • "| explode: $ tmpMenu foreach $ items as $ item hvis! $ item @ last
    • $ Element
    • if ($ item @ index + 2)! = $ item @ total
      logo
      / if / if / foreach

    Nå er dette mye ny kode, så jeg går gjennom den linje for linje. Det begynner med å åpne div og ul tags; disse er rent av estetiske årsaker. Deretter bruker vi en Smarty-kommando, kalt tildele. Dette gjør akkurat hva det høres ut: det tildeler en verdi til en variabel. I den første tildelingserklæringen fjerner vi åpningen li koder, og i den andre eksploderer vi strengen ved avslutningen li stikkord. Resultatet er en matrise som inneholder en liste over menyelementkoblinger. Vi beveger oss deretter inn på en for hver loop, hvor vi viser hvert element inni

  • tagger - unntatt denne gangen har vi lagt til et ikonbilde etter hvert menyelement, unntatt det siste menyelementet. Også, du har kanskje lagt merke til at jeg unngår den siste verdien i arrayet sammen. Dette skyldes at den siste verdien bare er en newline-tegn.

    Hvis du har utført alt riktig så langt, kan du nå tematere det, og legge til noen sider i menyen fra modulens "configure" -side. Når du er ferdig, bør du kunne gå til nettstedet ditt og se menyen som forventet!


    Konklusjon

    Dette har vært en veldig kort, men grundig gjennomgang av teknikkene som kreves for å lage PrestaShop-temaer. I løpet av opplæringen har jeg gått gjennom de nødvendige trinnene for å lage et fullt flerspråklig tema, og to forskjellige måter å sette tema moduler i malen på.

    Fremover foreslår jeg at du dykker litt dypere inn i Smarty, da det gir en rekke skjulte funksjoner som virkelig kan hjelpe deg. Som for et godt sted å lære mer om Prestashop, vel, det er ikke mye; Jeg anbefaler å lese kilden. På tidspunktet for denne skrivingen er Prestashops dokumentasjon litt spottet når det gjelder temaer; Deres kildekode er imidlertid veldig godt dokumentert. Et annet utmerket alternativ er å undersøke andre moduler og temaer for å få en dypere forståelse av hva Prestashop kan.

    Jeg håper du har hatt glede av å lese denne artikkelen. Hvis du har spørsmål angående selve artikkelen, eller Prestashop generelt, kan du ikke legge igjen en kommentar nedenfor!

    Trenger du premium, ready-to-go PrestaShop temaer? Sjekk ut ThemeForest!

  • Nyttige lenker: PrestaShop Plugins fra CodeCanyon.