Tilpassede layouter og maler med Magento

I den første delen av denne serien lærte vi grunnleggende om Magento-modulutvikling, inkludert Magento-katalogstrukturen, den egendefinerte modulstrukturen, og vi opprettet en grunnleggende "Hello World" -modul for å forstå hvordan styremedlemmer jobber i Magento.

I denne artikkelen vil vi lære å lage blokker og layouts-filer. Spesielt ser vi på hvordan layoutfiler og blokkeringsfiler fungerer i Magento, og vi ser på gjengivelsen av layoutfiler.

Leter du etter en rask løsning?

Hvis du er ute etter en rask løsning, er det en flott samling Magento-temaer og maler på Envato Market. Det er en fin måte å raskt bygge opp en samling av lavkvalitets lav poly-artikler til prosjektet ditt.

Du kan også få personlig hjelp ved å ansette en av Magento-tjenesteleverandørene på Envato Studio.

Men videre med opplæringen! Først vil vi se hva layout og blokkering av filer er, og hvordan de er nyttige for å gi framsiden på Magento, og så ser vi hvordan vi kan inkludere dem i vår tilpassede modul.

Hva er layoutfilen?

Som navnet antyder, er layoutfiler nyttige for å gjøre fremsiden av Magento. Layoutfiler er XML-filer som ligger i app> design> frontend> grensesnittet> ditt tema> layout. Her kan du se at det er mange layoutfiler for en gitt modul. Hver Magento-modul har sine egne layoutfiler mye som kundemodulen har customer.xmllayoutfil, katalogmodul har catalog.xmllayoutfil etc. Disse layoutfilene inneholder strukturelle blokker og innholdsblokker.

Hvis du lurer på hvorfor Magento trenger disse blokkene, kan du lære mer om dette i første del av serien.

La oss grave mer i layoutfilene

La oss grave mer i layoutfiler ved å se på et eksempel. Gå til app> design> frontend> base> layoutog åpne customer.xmlfil. Her er alle blokkene pakket rundt hovedet stikkord. Du kan se de forskjellige som inneholder spesifikke blokker.

Se underbiten:

  Registreringsskjema for kundekonto          Formfelt før

Håndtak

Håndtak er den viktigste enheten gjennom hvilken Magento identifiserer hvilken blokk som skal lastes når en bestemt modul blir kalt. er det modulspesifikke håndtaket. Dette håndtaket utløses når noen åpner kunderegistreringssiden.

Hver håndterer innholdsbestemt blokk som er spesifikk for siden. Noen av oppsettfilene inneholder håndtak. På dette stadiet kan du spørre om forskjellen mellom modulspesifikke håndtak og standardhåndtak. Kort sagt, modulspesifikke håndtak gjengir bare blokkene i den når den modulen blir gjengitt i nettleseren mens standardhåndtak laster på det meste av siden.

Inne i håndtaket er det de forskjellige forskjellige blokkene som spesifiserer malfilen som skal gjengis når denne blokken kalles. Blokker er av to typer:

Strukturblokker
Innholdsblokker

I vår layoutfil definerer vi bare Innholdsblokkerog så pakker vi dem i Sstrukturer Blokker. For eksempel, hvis noen ringer til en kunderegistreringsside, og vi vil laste den på venstre, høyre, innhold eller bunntekst, pakker vi den aktuelle blokken i den respektive struktureringsblokken. Her har vi pakket to blokker inne i "innholdsblokken" som er en strukturblokk.

Blokker inneholder attributter som følgende:

type definerer blokkklassen der vi kan definere forskjellige funksjonaliteter
Navn definererdet unike navnet til bestemt blokk, slik at de andre blokkene kan gjøre en referanse til eksisterende blokk ved navn og utvide den
før etter er attributter som vi kan angi som tillater oss å definere posisjonen til blokken vår i struktureringsblokken
mal definerer den faktiske PHTML filnavn og sti hvor HTML- og PHP-koden går
handling tillater oss å utløse handlinger som å laste inn JavaScript og alt ved å bruke dette attributtet.
som er et attributt er hovedsakelig brukt for strukturer blokker

De tag er bruk for å utvide blokkene som allerede eksisterer. I dette tilfellet har vi utvidet innholdsblokken og satt inn vår egen blokk i den. Du må bruke riktig blokknavn som du vil utvide.

De tag er bruk for å fjerne den bestemte blokken. For eksempel, si at du ikke vil vise kolonnene til høyre og venstre på kontoregistreringssiden din. I så fall kan du bare fjerne den aktuelle blokken med følgende syntaks .

Barn

Når du pakker inn ett blokk under en annen blokk, kalles den innpakket blokk blokkblokken. Når vår foreldreblokk kalles av vår modul, kalles barneblokken automatisk.

Du kan også ringe barneblokk separat med under syntaks i din malfil
ekko $ this-> getChildHtml ('child');

rot

Åpen page.xmllayoutfil, finner du blokkere som ser ut som nedenfor

Magento begynner å gjengi fra rotblokken. Alle andre blokker er barnblokker av rotblokken. Roten blokk definerer strukturen på siden. Her kan du se at det for øyeblikket er satt til 3columns.phtml, Du kan endre dette til 1column.phtml, 2columns-right.phtml eller 2columns-left.phtml.

Legge til CSS og JavaScript til Layout XML

For en bestemt side kan du legge til CSS- og JavaScript-filer i oppsettet slik:

  css / styles.css

Her kan du se at vi har lagt til en CSS-fil og en JavaScript-fil inne i hode på vår kundekontoside.

Hva er blokkklassene?

Blokkklasser brukes til å definere funksjonene som er spesifikke for bestemt blokk. Blokker klassen fil er bosatt i app> kode> lokal / fellesskap / kjerne> modulens navnrom> ditt modulnavn> blokkkatalogen. Denne filen inneholder funksjonene som vi kan bruke direkte med $ dettesøkeord i blokkspesifikk malfil. La oss ta et eksempel for å forstå blokkklassene.

Gå til review.xml fil som er bosatt i app> design> frontend> base> standard> layout katalog og finn under linjen kode:

Her kan du se blokken gjennomgang / customer_recentsom refererer til malen recent.phtml. Gå til app> design> frontend> base> standard> mal> gjennomgang> kundeog åpne recent.phtml.

I denne filen kan du se to funksjoner som kalles ved hjelp av $ dette søkeord. De er $ Dette-> getCollection () og $ Dette-> count (). Disse funksjonene er definert i deres blokkeringsfil recent.php som ligger i app> kode> kjerne> Mage> review> Block> kundekatalog.

Her, blokken type = "review / customer_recent" refererer til Mage_Review_Block_Customer_Recent blokk klasse som er definert i recent.php fil. Uansett hvilke funksjoner du definerer i denne klassen, kan du bruke den direkte i tilsvarende malfil med $ dette.

Opprette egendefinert moduloppsett og blokkere filer

Til slutt ble vi igjen med egendefinert "Hello World" -modul med kontroller. Her lager vi oppsettfilen til vår egendefinerte modul. Så la oss lage den.

For å opprette layoutfilen må vi først opprette blokkklassefilen. Før vi legger til klassefilen, må vi fortelle vår modul at vi inkluderer blokkfilene. Så gå til app> kode> lokal> Chiragdodia> Mappe> etc>config.xmlog legg til koden nedenfor:

    mymodule.xml         Chiragdodia_Mymodule_Block

Den endelige XML-filen inneholder følgende kodelinjer:

    0.1.0       standard  Chiragdodia_Mymodule mymodule       mymodule.xml         Chiragdodia_Mymodule_Block

Lag Block Class-filen

Deretter går til app> kode> lokal> Chiragdodia> Mappe> Blokkerog opprett filen Mymodule.phpsom inneholder under linjer med kode

Her har vi erklært klassen Chiragdodia_Mymodule_Block_Mymodule som inneholder funksjonen myfunction som vi kan ringe direkte fra vår layoutmalfil.

Opprett XML-filen for layout

Gå til app> design> frontend> standard> standard> layoutog opprett mymodule.xml fil som inneholder under linjer med kode

Opprett malfilen

Gå til app> design> frontend> standard> standard> malog opprett mymodule.phtml fil. I denne filen vil vi ringe funksjonen myfunction som vi har erklært i vår blokkklasse.

myfunction (); ?>

Hvis alt er riktig så langt, vil du se utgangen med tre kolonnerlayout ved å få tilgang til nettadressen yoursite.com/index.php/mymodule/index.

I enkelte Magento-versjoner inneholder ikke standardtemaer layout- og malkataloger. I så fall kan du opprette layout og malfil app> design> frontend> basekatalog.

Slik fungerer layouter i Magento. I den forrige artikkelen opprettet vi den enkle "Hello World" -modulen, i denne artikkelen har vi opprettet den ved hjelp av layoutfilen. Magento layout strukturen er litt vanskelig å forstå først, men når du begynner å tinker med den, vil du lett få ideen bak den.

I dette innlegget har jeg vedlagt moduldemofiler som vi har opprettet til nå. Du er velkommen til å kommentere og stille spørsmål du måtte ha om dette problemet.

Kode