Share
I den här artikeln kommer vi att täcka grunderna i Magento layout XML.
Vi kommer att gå över local.xml och gör några grundläggande modifikationer. Detta inkluderar att lägga till och ta bort skript, ta bort block och lägga till layoutändringar.
Nu när vi har en grundläggande förståelse för temahierarkin från den första artikeln i denna serie, kommer vi att dyka lite djupare och förklara de templerande filerna.
Templerande filer består av två underkataloger, vilka är:
Accentsconagua
app / design / frontend ///layout/ app / design / frontend ///mall/ Det finns mycket att täcka, därför kommer jag att dela ut dem i sina egna artiklar. Idag kommer vi bara att täcka layoutaspekten. Mallen aspekt kommer att spelas in i nästa artikel.
Vänta innan vi ens kommer igång måste vi göra en viktig sak som är att avaktivera Magento-cachen, om du inte redan har gjort det, det är! Genom att göra så tillåter vi oss att se våra ändringar direkt istället för att uppdatera cacheminnet varje gång vi gör en förändring. Helst bör det stängas av under utveckling av en webbplats. För att göra detta loggar du in i adminområdet och går över till system> cache-hantering och inaktivera alla.
Nu är det sorterat låt oss börja.
Layoutmappen innehåller XML-filerna som i stor utsträckning dikterar vad som visas i butikens främre ände. Layoutstrukturen är ganska komplex i Magento, men det är en av anledningarna till att den gör den så kraftfull och flexibel.
Du hittar hundratals XML-filer som varje gör sin egen sak, varje vy eller modul i app / kod / får den layout som anges av sin egen XML-fil. Om du någonsin installerar en tredjepartsmodul på din butik och det påverkar frontänden kommer det utan tvekan att ha en egen XML-fil.
Så, hur vet jag vilken fil som ska redigeras om jag behöver?
Tja, namngivningskonventionen av filerna gör det lättare att spåra när du behöver göra ändringar. Till exempel Magento app / code / core / Mage / Page / modulen har en egen XML-fil som heter app / design / frontend / bas / default / layout / page.xml som du kan se finns det ett mönster som börjar dyka upp här! När du väl har bekantat dig och gjort några butiker kommer du snart att märka lite repetitiveness och återkalla vilka filer du behöver redigera.
Notera:Var medveten om moduler från tredje part, som tekniskt kan utvecklaren namnge sin XML-fil vad de vill. I det här scenariot, om det inte finns i dokumentationen, måste du jaga filens namn i den modul som vanligtvis finns i config.xml fil. Observera inte att alla moduler har en XML-fil. Vanligtvis kommer XML-filen bara att vara närvarande om den påverkar butikens främre ände så förvänta dig inte en gång!
Vägen till config: app / code / local /
Observera jag har refererat bas / default ovan, kom ihåg att dessa är där kärnfilerna är bosatta, om du behöver göra ändringar, kopiera det alltid till dig själv paket / tema aldrig redigera bas / default filer.
Såhär:
app / design / frontend / bas / default / layout / page.xml
kopia till:
app / design / frontend /
Tunga modifiering av dessa filer kräver erfarenhet och med det här är en nybörjare handledning, ligger det utanför ramen för denna serie; Jag kommer dock att springa igenom local.xml och hur detta knyter samman med temat utveckling samt täcker en handfull grundläggande ändringar som jag tror kommer att vara användbara.
Enkelt sagt, det är en fil som placeras i vår temat layoutmapp som kommer att rymma en stor del av våra överskridanden eller uppdateringar till XML-referenser för det temat. Det anses bra praxis och Magento rekommenderar det. Vi kunde se på det som Magento-versionen av WordPress functions.php fil.
Vänta, en "stor del" varför inte "alla" av våra överskridanden eller uppdateringar?
Det finns en debatt om detta ämne och om vi gjorde lite forskning hittar vi alla har sin egen åsikt. Vissa säger bara att använda local.xml och gör inte ändringar någon annanstans medan andra kommer att vara oense, så ta inte följande set i sten.
Personligen tycker jag att det är ett bra ställe för små ändringar, till exempel att lägga till block, ta bort block eller ändra mallar. Det är inte en plats att helt layouta din produktsida eller liknande, om du vill göra det gör du det i den relevanta filen, t.ex. catalog.xml
Ja, det kan spara oss lite tid när vi uppgraderar Magento eftersom alla våra ändringar finns i en enda fil men får alla våra ändringar i en enda fil i första hand, med alla huvudvärk för att försöka åsidosätta andra XML-filer, det blir enkelt uppvägt.
Vidare när vi gjorde en hel del ändringar på en sida vill vi helst referera till den andra XML som ingår i den sidan, vi måste hela tiden växla mellan de två filerna och slutligen splittrade funktionaliteten mellan två separata filer - inte vad vi verkligen vill ha!
Så, hur man sätter upp det ...
Skapa local.xml filen i vår temat layoutmapp app / design / frontend / och lägg till några grundläggande XML-markupstrukturer:
Nu när vi har filen klar kommer jag att visa dig en handfull vanliga tekniker.
En mycket vanlig modifikation är att lägga till eller ta bort JavaScript och CSS. Om du arbetar med jQuery måste du lägga till detta eftersom Magento inte inkluderar det som standard och någon anpassad JavaScript du behöver behöver också lägga till i.
Om vi tittar på källan på en Magento-installation ser vi att en hel massa JavaScript tas in, av vilka vi inte kommer att använda, i vilket fall det behöver flyttas eftersom det är onödigt http begäran - Magento är inte snabb så låt oss göra grunderna rätt!
För att inkludera en fil måste vi bestämma om det kommer att vara globalt, t.ex. på varje sida i vår butik eller bara vissa områden. Med detta kan vi välja rätt layouthandtag att använda.
Jag ska presentera två layout handtag,
De
Nu vidare till koden.
skin_js js / libs / jquery.min.js ]]> skin_js js / libs / modernizr.min.js skin_js js / libs / html5shiv.min.js IE 9 skin_js js / libs / respond.min.js IE 9 skin_js js / libs / selectivizr.min.js IE 9 skin_css css / widgets.css skin_css css / print.css skin_css css / stilar-ie.css IE 8 skin_js js / ie6.js IE 7 js lib / ds-sleight.js IE 7 skin_js js / libs / home.min.js skin_css css / home.css
Det händer ganska mycket här men när det är uppdelat är det relativt rakt framåt.
typ av fil / plats sökväg till filen
Uppföljning på punkt två: Det dikterar också var filen ligger i hierarkin, varje typ hänvisar till en annan position i hierarkin som blir upplagd till vad du anger i
hud / frontend // Default / name hud / frontend // Default / name
js / name Observera att laddning av en fil från en extern källa, t.ex. en CDN, har en något annorlunda syntax. Det är också viktigt att inkludera jQuery.noConflict (); i slutet för att undvika att jQuery står i konflikt med Magento inbyggt i Prototype-biblioteket.
Magento levereras med flera sidostänger som gör att vi möter det, vi använder aldrig i en verklig situation, till exempel "Back to School" -annonsen. Nedan finns två metoder vi kan använda:
right.poll
De ta bort Metod är ett bra sätt att ta bort ett block oavsett vilket layouthandtag som fylls i blocket, ibland vill vi bara att den är borta globalt oavsett var den är och aldrig återvända!
Å andra sidan unsetChild tar bara bort ett block från ett specifikt layouthandtag. Du kan se att jag ringer det inom höger layouthandtag så det kommer bara att tas bort därifrån. Om right.poll block heter från någon annanstans i en annan layout handtag det kommer att visas.
Här har vi ett exempel på att lägga till ett ytterligare strukturblock till hemsidan. Vi hänvisar till innehållsblocket och använder efter tagg för att ange blocket som ska visas i slutet av innehållsblocket.
Slutligen har vi ett exempel på att lägga till i ett statiskt CMS-block, men först måste du skapa en för att detta ska fungera.
När du är inloggad i adminområdet, går du vidare till CMS> Statiska block och lägg till ett nytt block. Notera "Identifier" som vi behöver referera till i XML-koden.
home_static_block
Inom block_id är där vi anger vår identifierare.
Vi har knappt repat ytan och det finns många andra användningsområden för XML, för att inte tala om mer layouthandtag och XML-taggar tillgängliga för oss. Magento layout själv garanterar att det är en serie som det finns en hel del att täcka, för nu håller jag den till bara grunderna.
Om du vill göra lite mer läsning på XML rekommenderar jag att du läser den här artikeln och även ladda ner en kopia av Magento Official Design Guide som går in i mer djup och har en bra förklaring av de andra XML-taggar vi kan använda.
I nästa artikel kommer vi att skjuta framåt och titta på mallfilerna.
