Magento Theme Development En introduksjon

I denne serien tar vi en titt på det grunnleggende om Magento Theme Development.

Magento har fått et rykte for å være en av de mest fleksible og kraftige e-handelsplatformene der ute i dag. 

Dokumentasjon for det er mangel på å forlate utviklerne til en løsning for å løse. Det vil si at det er relativt enkelt når du får tak i det grunnleggende spesielt hvis du er noen som er komfortabel med frontend-utvikling.

Før vi går videre, er det viktig å forstå formålet med denne serien og hvor vi går over de neste ukene.

Denne serien er rettet mot den aller nybegynnere og vil dekke grunnleggende om frontend temautvikling. Hvis du er en avansert Magento-utvikler, kan dette ikke være serien for deg. 

I denne serien skal vi dekke følgende emner:

  • Magento hierarki
  • Pakker og temaer
  • Fall-back hierarki
  • Layoutfiler
  • Malfiler

Ved slutten av serien vil du være godt rustet til å ha en solid forståelse av Magento-temaprinsippene og kunne skape og endre dine egne temaer som en profesjonell!

Med det sagt er vi klare til å komme i gang.

Magento Hierarki

Først må vi forstå Magento-hierarkiet og hvor temaet vårt faller på plass. Det er hundrevis av mapper og tusenvis av filer, alt for mange til å liste, vil jeg bare fokusere på de vi trenger å jobbe med.

app / design / frontend / base / default / app / design / frontend / standard / standard / app / design / frontend /// hud / frontend / base / standard / hud / frontend / standard / standard / hud / frontend ///

Magento, i kjernen, har to mapper app og hud som korresponderer med hverandre. De app katalog inneholder filer som styrer hvordan sideskjemaene blir gjengitt, strukturen. De hud katalog inneholder filer som styrer utseendet til nettstedet, for eksempel CSS, JavaScript og bilder.

Innenfor en undermappe av app og hud er der våre pakker og temaer kan bli funnet, kommer en typisk installasjon av Magento med to pakker utgangspunkt og misligholde.

Så, før vi går videre, er det viktig at vi forstår hvilke pakker og temaer som er. Hvis vi får dette, vil alt annet falle på plasspent.

Alt om pakker og temaer

EN pakke er en samling av relaterte temaer, det er ingen begrensning på hvor mange pakker vi kan ha, og vi må ha minst en pakke til stede. Magento kommer med a spesiell pakke, hvis du vil, kalt utgangspunkt. Det er et lager for å lage Magento-kjernefiler tilgjengelig for frontenden. Du må aldri rediger utgangspunkt pakke filer, gjør det på egen risiko - mer om dette senere!

EN tema På den annen side er en direkte undermappe av en pakke som inneholder filene som utgjør butikken din, igjen er det ingen begrensning på hvor mange temaer vi kan ha i en pakke. Et tema kan bare tilhøre en pakke, og etter konvensjon skal hver pakke inneholde et tema som heter "standard" som er hovedtemaet for den pakken.

Hva handler om alt om?

De utgangspunkt pakken inneholder bare ett tema som heter misligholde. Den leveres med hver Magento-installasjon og inneholder frontendafilene som lager vår butikk. Det er et par regler vi må godta med basispakken.

Den første regelen som jeg nevnte tidligere, er ikke å redigere disse filene, dette betyr både i app / design / frontend / base / og hud / frontend / base /  De skal bare brukes som referanse. Filer som må redigeres, skal kopieres fra utgangspunkt til din pakke / tema. Det er et par grunner til dette som jeg vil forklare.

Disse filene er det som gjør Magento kjernefiler i app / code / core / tilgjengelig for frontenden. Vi bør ganske enkelt ikke redigere kjernefiler, denne teorien gjelder ikke bare på Magento, men gjelder også på andre plattformer, inkludert WordPress. 

Den andre er at når du oppgraderer Magento vil det trolig overskrive utgangspunkt pakkefiler. Så alt ditt harde arbeid og redigeringer for å få nettstedet ditt til å se tips toppen vil alle være borte. Med mindre du tok en sikkerhetskopi, har du ganske mye hatt det!

Den andre regelen er filene i utgangspunkt pakke er en del av fallback-systemet, som jeg vil forklare neste. Kort sagt, vil Magento falle tilbake på kjernefilene som finnes i utgangspunkt etter at den bruker pakken og temaet ditt. Når det faller tilbake, bør det til den opprinnelige intakte filen ikke være en redigert versjon.

Den tredje regelen er ikke opprette noen temaer inne i utgangspunkt pakke.

Sammendrag, bruk bare utgangspunkt for referanse og hvis du trenger å redigere en fil kopiere den over til din egen pakke / tema. Hvis du trenger å redigere utgangspunkt gjør det på egen risiko og hold styr på endringene dine, ettersom du kanskje må gjenopprette dem manuelt etter oppgraderinger, ellers la det være godt alene!

Hva er standard alt om?

De misligholde pakken kommer igjen med hver Magento-installasjon, men denne gangen har flere temaer tildelt den. Som av samfunnsutgave 1.8.1.0 har det fire forskjellige temaer som er:

  • misligholde
  • blank
  • iphone
  • moderne

Akkurat som utgangspunkt pakke nøyaktig samme regler gjelder her. Temaene i misligholde pakken er i hovedsak bare for demonstrasjonsformål. Ideelt for demo butikker, eller hvis du vil vise hva Magento er i stand til kundene dine, er det et raskt oppsett.

Fallback Logic

Magento er avhengig av en tilbakekallingslogikk for å gjøre temaer enklere å vedlikeholde og mer oppgraderingsvennlig. Det tillater oss å redigere og vedlikeholde bare filene vi trenger innenfor vårt tema. Hvis vi ikke trenger å redigere filen, trenger vi ikke den i vårt tema, vil filen bli hentet fra andre steder. For å forklare dette i detalj trenger vi et virkelighetseksempel.

Si at vi har vår egen nettside som er oppsett for å bruke vår egen pakke og tema som slik:

app / design / frontend / our_package / our_theme / skin / frontend / our_package / our_theme /

Vår nettside ber om en malfil som heter 1column.phtml og en CSS-fil som heter styles.css men Magento kan ikke finne disse filene innenfor vårt tema. Magento Fallback Logic vil nå søke neste tema i hierarkiet for filene og fortsette å søke til den finner de ønskede filene.

Følgende rekkefølge viser fallbacklogikken Magento går gjennom når vi ser etter filene våre:

app / design / frontend / our_package / vår_theme / mal / side / 1column.phtml app / design / frontend / vår_package / standard / mal / side / 1column.phtml app / design / frontend / base / default / template / page / 1column. phtml hud / frontend / our_package / our_theme / css / styles.css hud / frontend / our_package / default / css / styles.css hud / frontend / base / default / css / styles.css

Med denne fallbacklogikken på plass betyr det at vi kan ha en ren kodebase ved å holde våre temaer til det minste minimum. Kopier bare filene fra utgangspunkt at vi må gjøre endringer for ellers forlate filene ut av temaet vårt. Hvis nettstedet vårt ber om filen og vi ikke har det i vårt tema, vil det bli funnet ved å gå gjennom logikken ovenfor.

Merk:Hvis etter Magento har vært gjennom fallback logikken og filen fortsatt kan ikke bli funnet vil det enten kaste en gjengivelsesfeil hvis det er i appkatalogen eller hvis det er i katalogen i katalogen, vil det trolig kaste en 404 fil ikke funnet.

Opprett og aktiver vår pakke / tema

Riktig, nok snakk, la oss komme ned for å sette opp det. 

Først oppe vil vi lage vår helt pakke / temaoppsett. Vi starter med å opprette følgende mapper:

app / design / frontend / jasonalvis / standard / hud / frontend / jasonalvis / standard /

Nå har vi en pakke kalt jasonalvis og et tema som heter misligholde, Ta gjerne nytt navn på pakken din for å dekke dine behov. Vi vil holde temaet navn som misligholde da hver pakke alltid skal ha en misligholde tema, husk også det misligholde er automatisk en del av fallback logikken.

Alt som er igjen å gjøre nå, er å aktivere pakken via Magento admin-området. En gang innlogget hodet over til system> konfigurasjon. Herfra klikker du på design fra venstremenyen, og skriv deretter inn pakkenavnet ditt i Nåværende pakke navn felt.

Mens vi er her under, er det en temaer seksjon. Det er her vi ville skrive inn vårt tema navn, men fordi vi bare bruker misligholde vi trenger ikke skrive noe her inne da Magento automatisk søker etter dette navnet. 

For demonstrasjonsformål sier vi for eksempel et tema vi ønsket å bruke under salg, ville vi lage temaet slik:

app / design / frontend / jasonalvis / salg / hud / frontend / jasonalvis / salg /

Så alt vi trenger å gjøre er å aktivere temaet i administrasjonsområdet akkurat som vi gjorde med pakken vår:

Når skal du bruke en pakke eller et tema?

Så nå vet du hvordan du konfigurerer din pakke / tema, men hva er best for hvilket scenario?

Vel, det er utallige scenarier der ute, og jeg er sikker på at hver og en av dere har en annen. Det blir også litt mer komplisert når du har en Magento-installasjon med et multi-store oppsett. Generelt sett inneholder temaene pakken inneholder, ellers skal de deles opp i pakker.

De misligholde temaet bør være nettstednavet og de ekstra temaene bør bare være justeringer til navet. Hvis du drastisk endrer hvert aspekt av nettstedet i et tema, garanterer det sannsynligvis at det er i en separat pakke helt.

Merk: Når du oppretter flere temaer i pakken, trenger vi ikke å lage den i både app- og hudkatalogen, bare opprett temaet der det er relevant. Ta for eksempel vårt salgstema, det kommer bare til å være stylingendringer, forskjellige fargevalg osv. De faktiske templerende filene blir ikke endret. Derfor må du bare opprette temaet i hudkatalogen og redigere de relevante filene etter behov.

Med det sagt, la oss kalle det en dag. Du bør nå ha en solid forståelse av Magento-hierarkiet som du må sette i bruk gjennom resten av serien. Som alltid har noen spørsmål en melding i kommentarene nedenfor.

Hva blir det neste?

I neste artikkel skal vi se på grunnleggende om layout XML. I mellomtiden, ikke nøl med å skyte oss noen spørsmål, kommentarer eller tilbakemelding nedenfor!