Magento Theme Development Layout Files

I denne artikkelen vil vi dekke grunnleggende om Magento layout XML. 

Vi vil gå over local.xml og gjør noen grunnleggende modifikasjoner. Dette vil inkludere å legge til og fjerne skript, fjerne blokker og legge til layoutendringer.

Nå som vi har en grunnleggende forståelse av temahierarkiet fra den første artikkelen i denne serien, vil vi dykke litt dypere og forklare de templerende filene.

Templeringsfilene består av to underkataloger som er:

  • Oppsett: app / design / frontend ///oppsett/
  • Mal: app / design / frontend ///mal/

Det er mye å dekke, derfor vil jeg splitte dem ut i egne artikler. I dag skal vi bare dekke layout-aspektet. Malen aspektet kommer til å spille i neste artikkel.

Vent, før vi selv kommer i gang, må vi gjøre en viktig ting som er å deaktivere Magento-hurtigbufferen, hvis du ikke allerede har gjort det, det er! Ved å gjøre det, vil det tillate oss å se våre endringer umiddelbart, snarere enn å måtte oppdatere hurtigbufferen hver gang vi foretar en endring. Ideelt sett bør den slås av under utvikling av et nettsted. For å gjøre dette logg inn i administrasjonsområdet og gå over til system> cache management og deaktiver alt.

Nå som er sortert, la oss begynne.

Oppsett

Oppsettmappen inneholder XML-filene som stort sett dikterer det som vises på forsiden av butikken. Oppsettstrukturen er ganske kompleks i Magento, men dette er en av grunnene til at den blir så kraftig og fleksibel. 

Du finner hundrevis av XML-filer som hver gjør sine egne ting, hver visning eller modul i app / kode / får det til å bli utformet spesifisert av sin egen XML-fil. Hvis du noen gang installerer en tredjepartsmodul på butikken din, og den påvirker frontenden, vil den uten tvil ha sin egen XML-fil.

Så, hvordan vet jeg hvilken fil som skal redigeres hvis jeg trenger det?

Vel, navngivningskonvensjonen av filene gjør det lettere å spore når du må gjøre endringer. For eksempel Magento app / code / core / Mage / Side / Modulen har sin egen XML-fil kalt app / design / frontend / base / default / layout / page.xml som du kan se er det et mønster som begynner å dukke opp her! Når du har kjent deg og gjort noen butikker, vil du snart merke til noe repetitiveness og huske hvilke filer du må redigere.

Merk:Vær oppmerksom på tredjepartsmoduler, som teknisk kan utvikleren nevne XML-filen alt de ønsker. I dette scenariet, med mindre det er i dokumentasjonen, må du jakte på navnet på filen i selve modulen som vanligvis finnes i config.xml fil. Vær også oppmerksom på at ikke alle modulene har en XML-fil. Vanligvis vil XML-filen bare være til stede hvis den påvirker frontenden av butikken, så forvent ikke en hele tiden!

Sti til config: app / code / local ///etc/config.xml

Legg merke til at jeg har referert base / standard ovenfor, husk at disse er hvor kjernefilene er bosatt, hvis du trenger å gjøre endringer, kopier det alltid til deg selv pakke / tema aldri redigere base / standard filer. 

Som så:

app / design / frontend / base / default / layout / page.xml

kopier til:

app / design / frontend ///layout/page.xml

Kraftig modifisering av disse filene krever erfaring og med dette å være en nybegynneropplæring, er det utenfor omfanget av denne serien; Jeg vil imidlertid løpe gjennom local.xml og hvordan dette knytter seg til temautvikling og dekker en håndfull grunnleggende modifikasjoner som jeg tror vil være nyttig.

Hva er local.xml?

Enkelt sagt, det er en fil som er plassert i vår temaoppsettmappe som vil inneholde en stor del av våre overstyrrelser eller oppdateringer til XML-referanser for det aktuelle temaet. Det regnes som god praksis og Magento anbefaler det. Vi kunne se på det som Magento-versjonen av WordPress functions.php fil.

Vent, en "stor del" hvorfor ikke "alle" av våre overstyringer eller oppdateringer?

Det er en debatt om dette emnet, og hvis vi gjorde litt forskning, finner vi at alle har sin egen mening. Noen vil si bare bruk local.xml og gjør ikke endringer andre steder mens andre vil være uenige, så ikke ta følgende sett i stein.

Personlig synes jeg det er et flott sted for små modifikasjoner, for eksempel å legge til blokker, fjerne blokker eller endre maler. Det er ikke et sted å helt opprette produktsiden din eller lignende, hvis du vil gjøre det, gjør du det i den aktuelle filen f.eks catalog.xml

Ja, det kan spare oss litt tid når vi oppgraderer Magento da alle våre endringer er i en enkelt fil, men får alle våre endringer i en enkelt fil i utgangspunktet, med alle hodepine for å prøve å overstyre andre XML-filer, det blir enkelt oppveist.

Videre når vi foretok mange endringer på en side, vil vi helst referere til den andre XML-en som er en del av den siden. Vi må hele tiden bytte mellom de to filene og til slutt splitte opp funksjonaliteten mellom to separate filer - ikke hva vi egentlig vil ha!

Så, hvordan setter du opp ...

Opprett local.xml filen i vår tema layout mappe app / design / frontend //default/layout/local.xml og legg til noen grunnleggende XML-oppsettstruktur:

    

Nå som vi har filen klar, vil jeg vise deg en håndfull vanlige teknikker.

1. Legge til og fjerne skript / stilark

En svært vanlig modifikasjon er å legge til eller fjerne JavaScript og CSS. Hvis du jobber med jQuery, må du legge til dette, da Magento ikke inkluderer det som standard og noen tilpassede JavaScript du trenger, må også legges inn.

Hvis vi ser på kilden på en Magento-installasjon, ser vi at en hel masse JavaScript blir trukket inn, noe som vi ikke vil bruke, i så fall det må fjernes som det er unødvendig http forespørsel - Magento er ikke rask så la oss gjøre det grunnleggende riktig!

For å inkludere en fil må vi avgjøre om det skal være globalt, for eksempel på hver side i butikken vår eller bare på enkelte områder. Med dette kan vi velge riktig layouthåndtak for bruk.

Jeg vil introdusere to layouthåndtak, og . Selvfølgelig er det mange flere tilgjengelige for oss, men for nå kan vi fokusere på bare disse.

De Håndtaket er globalt og vil påvirke alle sider mens vil bare påvirke hjemmesiden.

Nå, videre til koden.

     skin_jsJS / libs / jquery.min.js       ]]>     skin_jsJS / libs / modernizr.min.js skin_jsjs / libs / html5shiv.min.jsDet er 9 skin_jsJS / libs / respond.min.jsDet er 9 skin_jsJS / libs / selectivizr.min.jsDet er 9  skin_csscss / widgets.css skin_csscss / print.css skin_csscss / stiler-ie.cssIE 8 skin_jsJS / ie6.jsDet er IE 7 jslib / ds-sleight.jsDet er IE 7      skin_jsJS / libs / home.min.js skin_csscss / home.css   

Det skjer ganske mye her, men når det er nedbrutt, er det relativt rett frem.

 type fil / plassering bane til filen 
  1. Metoden er der vi skriver inn hva vi ønsker å oppnå
  2. Skriv referanser hvilken type fil den er, og dikterer også hvor filen er i hierarkiet.
  3. Navnet er der vi angir banen til filen

Oppfølging på punkt to: Det dikterer også hvor filen er i hierarkiet, hver type refererer til en annen posisjon i hierarkiet som blir prepended til hva du skriver inn i felt. Jeg har listet dem nedenfor for referanse:

  • skin_js: hud / frontend // Default / name
  • skin_css: hud / frontend // Default / name
  • js: js / name

Legg merke til at lasting av en fil fra en ekstern kilde, for eksempel en CDN, har en litt annen syntaks. Det er også viktig å inkludere jQuery.noConflict (); på slutten for å unngå at jQuery er i konflikt med Magento, bygget i Prototype-biblioteket.

2. Fjerne blokker

Magento kommer med flere sidebar blokker som gjør at vi møter det vi aldri bruker i en ekte situasjon, som for eksempel «Tilbake til skolen» -annonsen. Nedenfor er to metoder vi kan bruke: 

       right.poll   

De fjerne Metode er en god måte å fjerne en blokk uansett hvilket layouthåndtak lastet blokken, noen ganger vil vi bare ha det gått globalt uansett hvor det er og å aldri gå tilbake!

På den andre siden unsetChild Vil bare fjerne en blokk fra et bestemt layouthåndtak. Du kan se at jeg ringer det innen Ikke sant Oppsetthåndtaket, slik at det bare blir fjernet derfra. Hvis right.poll Blokk kalles fra noe annet sted i et annet oppsetthåndtak, det vil bli vist.

3. Legge til en layoutendring

Her har vi et eksempel på å legge til i en ekstra strukturell blokk til hjemmesiden. Vi refererer innholdsblokken og bruker etter tag for å angi blokken som skal vises på slutten av innholdsblokken.

       

4. Legge til en statisk CMS-blokk

Til slutt har vi et eksempel på å legge til i en statisk CMS-blokk, men først må du opprette en for at dette skal fungere.

Når du er logget inn i administrasjonsområdet, går du over til CMS> Statiske blokker og legg til en ny blokk. Legg merke til "Identifier" som vi trenger for å referere dette i XML-koden.

     home_static_block    

Innen block_id er der vi skriver inn vår identifikator.

Videre lesning

Vi har knapt skrapt overflaten og det er mange andre bruksområder for XML, for ikke å nevne flere layouthåndter og XML-koder tilgjengelig for oss. Magento layout selv garanterer å være en serie som det er mye å dekke, for nå holder jeg det til bare det grunnleggende.

Hvis du vil gjøre noe mer å lese på XML, anbefaler jeg at du leser denne artikkelen og også laster ned en kopi av Magento Official Design Guide som går inn i mer dybde og har en god forklaring på de andre XML-kodene vi kan bruke.

Hva blir det neste?

I neste artikkel skal vi skyve frem og se på malfiler.