Share
I denna serie tar vi en titt på grunderna i Magento Theme Development.
Magento har fått ett rykte för att vara en av de mest flexibla och kraftfulla e-handelsplattformarna där ute idag.
Dokumentation för det är knappt att lämna utvecklare ett conundrum att lösa. Det vill säga att det är relativt enkelt när man klarar av grunderna speciellt om du är någon som är bekväm med framkantens utveckling.
Innan vi går längre är det viktigt att förstå syftet med den här serien och där vi går över de närmaste veckorna.
Denna serie riktar sig till den allra nybörjare och kommer att täcka grunderna i temat utveckling på framsidan. Om du är en avancerad Magento-utvecklare kanske det inte är serien för dig.
I den här serien kommer vi att täcka följande ämnen:
I slutet av serien kommer du att vara väl rustad att ha en gedigen förståelse av Magento-temaprinciperna och kunna skapa och ändra dina egna teman som en professionell!
Med det sagt är vi redo att komma igång.
Först måste vi förstå Magento hierarkin och där vårt tema faller på plats. Det finns hundratals mappar och tusentals filer, alldeles för många att lista, kommer jag bara att fokusera på de vi behöver jobba med.
app / design / frontend / bas / default / app / design / frontend / default / default / app / design / frontend // / hud / frontend / bas / standard / hud / frontend / standard / standard / hud / frontend / / /
Magento har i sin kärna två mappar app och hud vilka motsvarar varandra. De app katalog innehåller filer som styr hur sidmallar görs, strukturen. De hud katalog innehåller filer som styr utseendet på webbplatsen som CSS, JavaScript och bilder.
Inom en undermapp av app och hud är där våra paket och teman kan hittas, en typisk installation av Magento kommer med två paket bas och standard.
Så innan vi går längre är det viktigt att vi förstår vilka paket och teman som är. Om vi får det här, kommer allt annat att falla på platsfint.
en paket är en samling relaterade teman, det finns ingen begränsning på hur många paket vi kan ha och vi måste ha minst ett paket närvarande. Magento kommer med a särskild paket, om du vill, ringde bas. Det är ett förråd för att göra Magento-kärnfiler tillgängliga för framsidan. Du måste aldrig redigera bas paketfiler, gör det på egen risk - mer om detta senare!
en tema Å andra sidan är en direkt undermapp för ett paket som innehåller de filer som utgör din butik, och det finns ingen begränsning på hur många teman vi kan ha inom ett paket. Ett tema kan bara tillhöra ett paket och enligt konventionen måste varje paket innehålla ett tema som heter "standard" som är huvudtemat för det paketet.
De bas Paketet innehåller bara ett tema som heter standard. Den levereras med varje Magento-installation och innehåller de främre ändfilerna som gör vår butikskörning. Det finns ett par regler som vi måste acceptera med baspaketet.
Den första regeln som jag nämnde tidigare är att inte redigera dessa filer, det betyder både i app / design / frontend / bas / och hud / frontend / bas / De bör endast användas som referens. Filer som behöver redigeras bör kopieras från bas till din paket / tema. Det finns ett par skäl till detta som jag kommer att förklara.
Dessa filer är det som gör Magento kärnfiler i app / kod / kärna / tillgänglig för framsidan. Vi borde helt enkelt inte redigera kärnfiler. Denna teori gäller inte bara Magento utan gäller även på andra plattformar, inklusive WordPress.
Den andra är att när du uppgraderar Magento kommer det sannolikt att överskrida bas paketfiler. Så allt ditt hårda arbete och redigeringar för att få din hemsida att se tips toppen kommer alla att vara borta. Om du inte tog en säkerhetskopia har du ganska mycket haft det!
Den andra regeln är filerna i bas paketet ingår i fallback-systemet, som jag kommer att förklara nästa. Kort sagt, kommer Magento att falla tillbaka på kärnfilerna som finns i bas efter det använder ditt paket och tema. När det faller tillbaka bör det vara den ursprungliga, intakta filen, inte en redigerad version.
Den tredje regeln skapar inga teman inuti bas paket.
Sammanfattningsvis använd endast bas för referens och om du behöver redigera en fil kopiera den till din egen paket / tema. Om du någonsin behöver redigera bas gör det på egen risk och hålla reda på dina ändringar, eftersom du kan behöva manuellt återställa dem efter uppgraderingar, annars lämna det väl ensam!
De standard paketet levereras med varje Magento-installation men den här gången har flera teman tilldelade den. Som av community edition 1.8.1.0 har det fyra olika teman som är:
Precis som bas Paketera exakt samma regler gäller här. Teman i standard Paketet är i huvudsak endast för demonstration. Perfekt för demobutiker eller om du vill visa vad Magento kan klara av dina kunder, är det en snabb installation.
Magento bygger på en backlogik för att göra teman lättare att underhålla och mer uppgraderingsvänlig. Det tillåter oss att redigera och behålla bara de filer vi behöver inom vårt tema. Om vi inte behöver redigera filen behöver vi inte det i vårt tema, kommer filen hämtas från andra håll. För att förklara detta i detalj behöver vi ett verkligt exemplar.
Säg att vi har vår egen hemsida som är inställd att använda vårt eget paket och tema som så:
app / design / frontend / our_package / our_theme / skin / frontend / our_package / our_theme /
Vår hemsida begär en mallfil med namnet 1column.phtml och en CSS-fil som heter styles.css men Magento kan inte hitta dessa filer inom vårt tema. Magento fallback logic kommer nu att söka nästa tema i hierarkin för filerna och fortsätta söka tills den lokaliserar de begärda filerna.
Följande order visar fallbacklogiken Magento går igenom när vi letar efter våra filer:
app / design / frontend / our_package / vår_theme / mall / sida / 1column.phtml app / design / frontend / our_package / default / mall / sida / 1column.phtml app / design / frontend / base / default / mall / sida / 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 denna fallbacklogik på plats betyder det att vi kan ha en ren kodbas genom att hålla våra teman till det lägsta minimumet. Kopiera bara filerna från bas att vi behöver göra ändringar för att annars lämna filerna ur vårt tema. Om vår hemsida begär filen och vi inte har den i vårt tema kommer den att lokaliseras genom att gå igenom ovanstående logik.
Notera:Om efter Magento har gått igenom nedgångslogiken och filen fortfarande kan inte hittas kommer det antingen att kasta ett återgivningsfel om det finns i appkatalogen eller om det i katalogen i katalogen kommer det sannolikt att kasta en 404-fil inte hittad.
Rätt tal, låt oss komma ner för att ställa upp det.
Först och främst kommer vi att skapa vårt paket / tema setup. Vi börjar med att skapa följande mappar:
app / design / frontend / jasonalvis / default / skin / frontend / jasonalvis / default /
Nu har vi ett paket som heter jasonalvis och ett tema som heter standard, var snäll att byta namn på ditt paket så att det passar dina behov. Vi kommer att behålla tema namnet som standard eftersom varje förpackning alltid ska ha en standard tema, kom också ihåg det standard är automatiskt en del av fallback logiken.
Allt som är kvar att göra nu är att möjliggöra paketet via Magento admin-området. En gång inloggad huvud över till system> konfiguration. Härifrån klickar du på design från vänstra menyn och ange sedan ditt paketnamn i Nuvarande paketnamn fält.
Medan vi är här märkta nedan finns en teman sektion. Det är här vi skulle skriva in vårt temnamn, men för att vi bara använder standard Vi behöver inte skriva något här eftersom Magento automatiskt söker ut det här namnet.
För demonstrationsändamål säger vi till exempel ett tema vi ville använda under en försäljning skulle vi skapa temat som så:
app / design / frontend / jasonalvis / försäljning / hud / frontend / jasonalvis / försäljning /
Då är allt vi behöver göra att aktivera temat i adminområdet precis som vi gjorde med vårt paket:
Så nu vet du hur du konfigurerar ditt paket / tema men vad är bäst för vilket scenario?
Tja, det finns otaliga scenarier där ute och jag är säker på att var och en av er har en annan. Det blir också lite mer komplicerat när du har en Magento-installation med en multi-store setup. I allmänhet ska de teman som paketet innehåller vara likartade, annars ska de delas upp i paket.
De standard temat bör vara webbplatsen nav och de ytterligare teman bör helt enkelt vara anpassningar till navet. Om du drastiskt ändrar varje aspekt av webbplatsen i ett tema garanterar det förmodligen att det är ett separat paket.
Notera: När du skapar ytterligare teman i vårt paket behöver vi inte skapa det i både app- och hudkataloger, bara skapa tema där det är relevant. Ta till exempel vårt försäljnings tema, det kommer bara att bli styling förändringar, olika färgschema etc de faktiska templerande filerna ändras inte. Skapa därför bara temat i hudkatalogen och redigera relevanta filer efter behov.
Med det sagt, låt oss kalla det en dag. Du borde nu ha en gedigen förståelse om Magento-hierarkin som du måste använda genom resten av serien. Som alltid lämnar några frågor ett meddelande i kommentarerna nedan.
I nästa artikel kommer vi att ta en titt på grunderna i layout XML. Tveka inte att skjuta oss några frågor, kommentarer eller feedback nedan!
Accentsconagua