I denna handledningsserie utvecklar vi ett Magento-tema från början. Eftersom Magento är ett enormt eCommerce CMS med massor av anpassningsalternativ, är Magento-teman oftast ansett som mycket komplex att utveckla, men jag hoppas att när du följer med den här serien kommer du att bli mycket bekant med Magento-terminologin och hur saker utvecklas i det . Jag ska försöka förklara allt som vi går och utveckla varje komponent av sidan steg för steg.
Det första steget mot en Magento-utveckling är att ha en kopia av Magento installerad på din lokala server. Du kan också ha en kopia av Magento installerad på din webbserver, men det kommer bara att sakta ner din utvecklingshastighet. Så jag rekommenderar alltid att du använder en lokal server för utveckling, och när du väl har slutfört utvecklingen och testat slutprodukten noggrant måste du bara ladda upp den på din server.
Jag kommer inte att uppfinna igen hjulet genom att förklara hur du ska installera Magento på din lokala server. Det finns gott om bra artiklar på internet för det. Du kan också hitta Magento installations artiklar på vår webbplats, som denna Tuts + artikel, som hjälper dig att installera Magento på din lokala server.
Du måste också installera Magentos provdata medan du installerar Magento. Denna provdata kommer att lägga till många kataloger, produkter, recensioner, etc., och genom det kan vi testa olika scenarier under utveckling.
När du är klar med att installera Magento, är nästa steg att ha verktygen för utveckling klar. Du kan använda kodredigeraren eller IDE efter eget val här. Vilken kodredigerare du är bekväm med fungerar bra här. Om du inte har använt någon kodredigerare tidigare rekommenderar jag att du installerar Notepad ++, eftersom det är en väldigt lätt, lättanvänd och gratis kodredigerare.
Vi behöver också en elementinspektör för att kontrollera och redigera CSS-format på webbsidorna. Om du använder Firefox kan du installera Firebug-tillägget för det. Men om du använder Chrome fungerar Chrome Web Inspector bra. Den levereras med Chrome, så du behöver inte installera några tillägg för det. I denna serie används jag Chrome Web Inspector för att felsöka och redigera CSS-format.
Jag har utvecklat en del HTML för syftet med denna serie. HTML innehåller designmönster och element som oftast används i eCommerce-teman, som toppkorg, sidhuvud, valuta och språkväljare etc. Vi kommer steg för steg att konvertera denna HTML till ett fungerande Magento-tema. HTML-temapaketet är bifogat här för att du ska ladda ner.
Innan vi dyker in i den faktiska utvecklingsfasen rekommenderar jag starkt att du går igenom denna Tuts + artikelserie om Magento-temat utveckling. Denna trehandledningsserie kommer att bekanta dig med teorin bakom Magento-teman och dess grundläggande principer. Denna kunskap om Magento-temat utveckling kommer att vara särskilt användbar innan du börjar få dina händer smutsiga med aktuell temakodning.
Nu när du borde ha en fungerande Magento-installation och verktyg för utveckling redo, och du har gått igenom grunderna i tematillväxten genom att läsa den serie som rekommenderas ovan, låt mig korta bekanta dig med mapparna där vi ska redigera filer.
När du öppnar Magento-rotmappen ser du en lista med mappar under det. Av de här mapparna är mapparna där vi redigerar filer bara app mapp och hud mapp.
Vi kan ibland använda js-mappen för att placera JavaScript-biblioteksfiler som jQuery, om de inte redan finns. Gå vidare och bekanta dig med mapparna i app- och hudmappen innan du börjar följa stegen i nästa artikel i den här serien.
Vi behöver ändra några inställningar i Magento, vilket hjälper oss att utveckla vårt Magento-tema snabbare och låter oss veta om något går fel i Magento.
Först av allt inaktiverar vi Magento Cache. För det, gå till System> Cache Management, och välj alla typer av cacher. Från åtgärderna välj inaktivera, och skicka in.
När vi har avaktiverat alla Caches, är nästa steg att omregistrera data. För det, gå till System> Indexhantering. Markera alla index och välj sedan åtgärderna Reindex Data, och skicka in.
Nu ska vi aktivera loggar och blockera tips i Magento. Gå till System> Konfigurationer, och i den vänstra sidofältet blir det sista objektet Utvecklare. Klicka på det. På nästa sida, från Logginställningar, aktivera loggar och träffa Spara konfig knappen längst upp till höger.
Nästa, längst upp till vänster sidofält ser du Nuvarande konfigurationsområde välj bar. Välj Huvudwebbplats därifrån.
Nu från debug avsnitt, aktivera Mallvägstips, och slå på Spara konfig knappen igen.
Slutligen, gå till Magento-rotkatalogen och öppna sedan index.php-filen därifrån. På rad 77, kommenterar inte denna rad kod:
ini_set ( 'display_errors', 1);
Det är det för nu. Du kanske inte inser det, men vi har byggt upp en bra grund för själva temat utveckling i nästa handledning i denna serie. I slutändan uppmuntrar jag dig igen att gå igenom Magento Theme Development-serien som jag har rekommenderat ovan, om du inte redan har det.
I nästa handledning skapar vi vårt nya temas mappstruktur. Vi kopierar CSS, JS och bildfiler från HTML till vårt tema och skapar vårt temas lokala.xml-fil för att säkerställa att vårt tema länkar till dessa filer.
Det är det, och jag hoppas att du följer med oss i nästa handledning.