Magento Theme Development Template Files

I denne artikkelen vil vi dekke grunnleggende om Magento-malefiler. Vi vil gå over introduksjonen og gjøre noen grunnleggende modifikasjoner. 

Dette vil inkludere visning av kjente produkter på hjemmesiden og hvordan du laster JavaScript inn i bunnteksten.

I følge vår tidligere artikkel har vi sett at layoutfilene kontrollerer hver blokk i et tema og bestemmer hva som blir og ikke vises. Men det som blir gjengitt inne i den blokken, er hvor malfiler kommer til handling.

I denne artikkelen vil vi fokusere på følgende kataloger:

  • Mal - app / design / frontend ///mal/
  • locale - app / design / frontend /// Locale /

Hvis du nettopp har blitt med oss, vær så snill å sjekke ut de forrige artiklene i denne serien.

Til referanse har vi dekket:

  1. En introduksjon
  2. Layout-filer

Uten ytterligere et gjør, la oss komme i gang.

Mal

Magento-malfiler er PHTML-filer som består av en blanding av HTML og PHP, noe som gjør en side som 1column.phtml mens andre gjør spesifikke blokker innenfor en side som header.phtml

For størstedelen av tiden under utviklingen av et nettsted er disse filene vi hovedsakelig skal jobbe med, for utviklere av frontender, det vil si. Når XML-en er på plass og en mal blir kalt, forventes det at filen vil bli analysert og vises tilsvarende.

Det er hundrevis av malfiler tilgjengelig, å vite hvilken som skal redigeres og deretter spore opp filen i hierarkiet, kan være vanskelig når man først starter. 

Alt er bra, men det er noen fine administrasjonsinnstillinger som kan hjelpe oss, de vil spare oss timer med hodepine!

Viktig å merke seg, vi kan bare bruke følgende innstillinger i området "Nettsted" eller "Lagre visning", innstillingene er ikke tilgjengelige for oss i "Standard Config" -området, så vi må huske å endre omfanget en gang var logget inn . Dette er nyttig, selv om det betyr at vi kan bytte innstillingene bare for en bestemt nettside eller butikkvisning i stedet for globalt.

Malte tips

Disse vil raskt identifisere hvilke filer som lastes inn for en bestemt side ved å vise oss banen til filen. Hvis du slår på eller av, er det en rask innstillingskifte i administrasjonsområdet. 

Gå over til system> konfigurasjon. Deretter ruller du til venstre i menyen til venstre og klikker på "Utvikler" fra under "Avanserte" overskriften. Når vi har endret omfanget til "Main Website", har vi innstillingen tilgjengelig for oss under "Debug".

Det ser ut til at ingenting har skjedd når du har klikket på lagre config, men hvis du går til forsiden av nettstedet, for eksempel hjemmesiden og oppdatere siden du vil se hintene kommer gjennom. 

Med dette vet vi nå hvor filene er plassert, og hvis noen endringer kreves, kopierer du bare filen over fra base til tema og modifiserer etter behov.

Vi kan også sette "Legg til blokknavn til hint" til "Ja" hvis vi vil ha mer informasjon, er dette vanligvis brukt for utvikling av bakenden, så jeg ville ikke bekymre meg for denne innstillingen for mye.

Nå, videre til koden. Jeg vil løpe gjennom et par modifikasjoner som ofte brukes i temautvikling, men igjen vil jeg bare røre overflaten på hva som er mulig.

  1. Viser utvalgte produkter på hjemmesiden
  2. Laster inn JavaScript i bunnteksten

La oss komme i gang…

1. Viser utvalgte produkter på hjemmesiden

Dette punktet må være den vanligste forespørselen på et hvilket som helst nettsted, alle ønsker å vise frem en håndfull produkter på destinasjonssiden til nettstedet deres rett?

Det er faktisk mye enklere enn du kunne forestille deg, med en kombinasjon av XML og PHP kan vi nå dette på kort tid. Det er, som med mange ting i Magento, mer enn en måte å gjøre dette på. Jeg skal vise deg hva jeg synes er den enkleste metoden.

Først må vi opprette vår kategori i administrasjonsområdet som vil holde våre produkter. En gang innlogget hodet over til katalog> administrer kategorier. For dette eksempelet vil vi opprette en underkategori under rot, så vi må klikke på "Root Catalog" og deretter klikke på "Legg til underkategori" -knappen. Skriv inn en tittel for kategorien, pass på at "Er aktiv" er satt til "Ja" og klikk deretter "Lagre kategori".

Legg merke til kategori ID-nummeret på toppen som vi vil trenge dette senere:

Dette vil være en god tid å også legge til noen produkter i kategorien vi nettopp har opprettet. For å gjøre dette, klikk på kategorien "Kategori Produkter" og velg produktene du vil vise, ikke glem å klikke "Lagre kategori" når vi er ferdige.

Deretter må vi lage vår mal der vår for hver loop vil bli kjørt.

For dette vil vi basere den ut av produktlistemalen som har all nødvendig kode allerede gjort for oss, vi trenger bare å gjøre noen tilpasninger som passer til våre behov.

app / design / frontend / base / default / butikk / produkt / list.phtml

Kopier til:

app / design / frontend //default/catalog/product/list-home-featured.phtml

Vi vil da gjøre noen endringer i filen vår.

  1. Last inn i vår produktsamling via kategorien ID
  2. Vis bare ett visning, jeg har valgt nettvisning, men gjerne endre dette
  3. Fjern verktøylinjen da dette ikke lenger er nødvendig
  4. Legg til i kategorinavnet for en overskrift

Den ferdige filen vil se ut som følgende:

 belastning ($ _ CategoryID); $ _productCollection = $ _category-> getProductCollection (); $ _ProductCollection-> addAttributeToSelect ( '*'); ?> 

getName (); ?>

telle ()):?>

__ ('Det finnes ingen produkter som samsvarer med valget.')?>

  • getProductUrl ()?> "title ="stripTags ($ this-> getImageLabel ($ _ produkt, 'small_image'), null, true)?> "> <?php echo $this->stripTags ($ this-> getImageLabel ($ _ produkt, 'small_image'), null, true)?>

    getProductUrl ()?> "title ="stripTags ($ _ product-> getName (), null, true)?> "> getName (); ?>

    getRatingSummary ()):?> getReviewsSummaryHtml ($ _ produkt, 'kort')?> getPriceHtml ($ _ produkt, sant)?>
    isSable ()):?>

    __ ('Ikke på lager')?>

      hjelper ('ønskeliste') -> isAllow ()):?>
    • hjelper ('ønskeliste') -> getAddUrl ($ _ produkt)?> ">__ ('Legg til i ønskelisten')?>
    • getAddToCompareUrl ($ _ produkt)):?>
    • | ">__ ('Legg til sammenligning')?>

Ikke glem å endre verdien av $ _categoryId variabel til kategoridokumentet ditt.

Til slutt trenger vi bare å opprette en XML-blokk som vil lastes inn i malen vi har opprettet over. Vi vil gjøre dette i vår local.xml fil slik:

        

Det er alt der er til det, ganske rett fram? Nedenfor er et skjermbilde av det ferdige produktet.

2. Laster inn JavaScript i bunnteksten

Til å begynne med, tror vi Magento har allerede denne evnen bygget inn gjennom XML når vi legger til våre skript, en slags parameter vi kunne passere inn, men vi ville gå galt - Magento skal ikke gjøre det så enkelt for oss!

WordPress, på den annen side, gjør dette perfekt via wp_register_script. Kanskje en utvikler av en bakside vil hente på dette og legge til muligheten til å passere gjennom en ekstra XML-parameter, nå er det et sideprosjekt for at noen skal få sprekker med. 

Noen takers?

Så, heldigvis for nå er det en alternativ metode for å få dette til å fungere.

Jeg synes det er viktig å dekke dette emnet, da det vil forbedre hastigheten på nettstedet vårt som alle ønsker. Jeg pleier å forlate Magento kjerne JavaScript-filer igjen som de er i , Jeg kan redusere dem, men bortsett fra det forblir de som de er.

Alt vi legger til på toppen av Magento, som jQuery og våre egne tilpassede funksjoner, er det ingen skade i å laste disse i bunnteksten. Når jeg utvikler et nettsted, pleier jeg å holde øye med tag, når en tredjepartsmodul blir installert, legges det vanligvis til noe her inne. Med litt arbeid kan vi redigere XML-modulen fra tredjepart og peke på den for å legge i bunnteksten - det er vel verdt de ekstra fem minuttene å gjøre det!

Først må vi opprette en XML-blokk i vår local.xml fil i standard layout håndtaket slik som:

      skin_jsJS / bygge / jquery.min.js    

Legg merke til at vi bruker samme metode for å legge til JavaScript-filer som vi gjorde i forrige artikkel. Hvis du trenger en oppfriskning klikk her, for demonstrasjonsformål vil vi legge til i en lokal kopi av jQuery.

Nå kan vi gå om å lage vår malfil. Opprett en ny fil:

app / design / frontend //default/page/html/footer-js.phtml

med følgende innhold:

getCssJsHtml ()?>

Til slutt må vi legge til en enkelt linje med kode i våre malfiler like før avslutningen stikkord.

Våre malfiler finnes på app / design / frontend / base / default / page / ikke glem å kopiere dem til vårt eget tema. Det er flere malfiler, jeg har samlet en liste sammen nedenfor:

  • 1column.phtml
  • 2columns-left.phtml
  • 2columns-right.phtml
  • 3columns.phtml

Nedenfor er et eksempel på hvordan det skal se ut:

... getAbsoluteFooter ()?>  getChildHtml ('footer.js')?>  

Med alle trinnene nå fullført hvis vi oppdaterer vår side og vis kilde, vil vi nå se at skriptet lastes inn like før avslutningen stikkord.

Hvis du har gjort det så langt, tror jeg en gratulasjon er i orden! Det er mye å ta i en sittende, men forhåpentligvis begynner det å være fornuftig.

Pakke det opp!

Denne serien er bare toppen av isfjellet, Magento er en meget kraftig plattform og har mye mer å tilby enn det vi har dekket. Jeg håper det har gitt deg et innblikk i temaets prinsipper for Magento, og at du kan sette den til god bruk.

Det er ingen bedre måte å lære Magento, men å bare bli sittende fast, lærer du tauene på kort tid.

Som alltid er jeg mer enn glad for å hjelpe hvis du trenger en hånd med noe. Vær også sikker på å sjekke min Magento Boilerplate som har en hel haug med godbiter inni.

Til neste gang.