Magento Theming 101

Magento is een Opensource Webshop CMS (Content Management Systeem) waarmee iedereen een volledige webshop op kan zetten in korte tijd, zonder veel programmeer kennis. Voor het design van de webshop zijn er veel themes op het internet te krijgen, zowel gratis als betaald waarmee jij jouw webshop een eigen uitstraling kan geven. Maar zodra jij je eigen ontwerp hebt gemaakt en deze in Magento wilt integreren wordt het al wat moeilijker.

Magento heeft een zeer uitgebreid en krachtig template systeem. Maar het template systeem werkt anders dan je waarschijnlijk gewend bent van andere systemen. Magento werkt ook met themes, maar dan met een extra XML laag ertussen voor de structuur. Een Magento theme is een combinatie van de layout (XML), template (PHTML) en opmaak bestanden zoals CSS, Images en Javascript. Wat ook uniek is aan Magento is dat elk element wat ingeladen wordt (winkelwagen, zijbalken, navigatie) in een of meerdere PHTML bestanden staat.

Magento is flexibel, krachtig en alles zit erin. Je kunt je dus helemaal uitleven aan de voorkant om de webshop geheel naar jouw wensen te maken. Om je alvast op gang te helpen bij het maken van je eigen theme heb ik deze korte uitleg geschreven over het template systeem van Magento. Veel plezier met themen!

Wat maakt Magento zo goed, uitgebreid en krachtig.

Om te beginnen kan je in Magento meerdere themes tegelijk inladen, in tegenstelling tot andere systemen waarbij je vaak maar een theme kan inladen. Wil jij bijvoorbeeld dat jouw webshop er elk seizoen anders uitziet. Zo gedaan in Magento! Wil jij dat elke categorie, en zelfs elk product een eigen uitstraling heeft. Geen probleem in Magento! Hierdoor zijn je marketing mogelijkheden voor je webshop bijna eindeloos, wat uiteindelijk de conversie van de webshop flink kan verhogen.

Ben jij niet zo’n kei in programmeren. In Magento ben jij dat wel! Door de vele template tags die aanwezig zijn binnen Magento is het mogelijk om elke module die jij je voor een webshop kan bedenken gemakkelijk kan integreren in je template. En mocht je er uiteindelijk toch niet zelf uitkomen dan heeft Magento een grote en actieve community waar je binnen no-time een antwoord op je vraag hebt. Een ander aspect van Magento wat een groot voordeel in tijd kan opleveren op de lange termijn is dat Magento elke module een eigen PHTML bestand(en) heeft. Hierdoor blijft de code waar je in werkt klein en overzichtelijk. En dit zorgt er weer voor dat de fouten in je opmaak beperkt blijven. En mocht er toch een fout insluipen dan haal je die er ook gemakkelijk weer uit.

Zelf een Magento theme maken

Als je zelf een theme wilt gaan bouwen voor Magento dan is het verstandig om je eerst eens goed in te lezen. Te beginnen bij deze turorial en vervolgens andere bronnen. Op het internet is enorm veel te vinden over Magento zelf en het template systeem van Magento. Na het inlezen zal je eerst veel uren moeten maken in de praktijk om het template systeem van Magento goed onder de knie te krijgen. Maar als je het eenmaal door hebt wil je niet anders meer! In het begin zul je vaak het spoor kwijt raken doordat het Magento template systeem zo uitgebreid is en best ingewikkeld maar naar een tijdje heeft ook Magento geen geheimen meer voor jou! Maar let dus op, onderschat de learning curve van Magento niet!

Magento theme uitgelegd

Het themen in Magento werkt net even wat anders. Iets wat waarschijnlijk nieuw zal zijn als je met Magento begint is dat het werkt met XML bestanden voor de structuur en PHTML bestanden voor de invulling van die structuur. PHTML is een bestands extensie zoals HTML waar ook PHP scripts in worden gebruikt. Een Magento theme staat in 2 mappen. In de APP map staan alle PHTML en XML bestanden en in de SKIN map staan alle CSS, images en javascript bestanden.

Zelf een theme maken

Er zijn 2 methodes om een theme te maken, een is gebaseerd op de default theme en de ander is een schil over de default theme heen. Wanneer je echt een geheel eigen webshop wilt maken kun je kiezen om de default theme te copyeren en aan te passen. Hoef je echter maar een paar kleine wijzigingen te doen, bijvoorbeeld voor een kerst theme dan kun je beter gaan voor methode 2, waarbij je een schil over de default theme heen creƫert.

1. Default theme

De default theme vindt je onder /app/design/frontend/base/default en /skin/design/frontend/base/default, die alle bestanden bevat om de webshop vorm te geven. Als je zelf een theme wilt maken dan kan je deze default theme copyeren, hernoemen en aanpassen. Om een nieuwe default theme te maken ga je naar /app/design/frontend/base/. Copieer de Default map en hernoem hem naar wat jij maar wilt. Let er wel even op dat de naam moet beginnen met een letter en geen spaties mag bevatten.

De default theme bestaat uit de volgende directories:
1. Layout Directory
app/design/frontend/base/default/layout/
Hier staan alle XML bestanden die de blokken structuur en META informatie/ pagina encoding bepalen.

2. Templates Directory
app/design/frontend/base/default/template/
Hier staan alle PHTML bestanden die de (X)HTML opmaak en PHP tags bevatten.

3. Locale Directory
app/design/frontend/base/default/locale/
Hier staan de taal bestanden.

4. Skins Directory
skin/frontend/base/default/
Hier staan alle CSS bestanden, plaatjes en javascripts.

2. Schil over de default theme

Je kunt ook een eigen theme bovenop de default theme maken. Deze themes staan in app/design/frontend/default/. Ga naar /app/design/frontend/default/. Maak hier een map aan met een naam naar eigen wens. Let er wel op dat de naam altijd begint met een letter en geen spaties bevat. Copieer vervolgens een bestand uit de default theme die je wilt gaan aanpassen. Let er hierbij wel op dat je altijd de mappen structuur aanhoud zoals die in de default theme map is aangebracht.

Een theme toewijzen

Om een theme toe te wijzen aan Magento moet je inloggen in het admin gedeelte (www.jouwdomein.nl/admin/). Ga vervolgens in de navigatiebalk naar “system” en kies voor “Design”. Je krijgt een overzicht, kies hier rechts boven in voor “Add design”. Selecteer bij de dropbox “Custom design” jouw design. Je kunt ook nog aangeven wanneer het design vertoont moet worden, bijvoorbeeld in het geval van een kerst theme. Druk rechtsboven op “save” als je klaar bent. Als je nu aan de voorkant kijk zul je zien dat jouw design is ingeladen.

Tips voor als je bezig gaat

  • Als je bezig gaat met de templates, zet dan alle caching uit. Doe dit door in te loggen, kies in de navigatiebalk voor system en vervolgens naar cache management. Selecteer hier alles en schakel het uit. Let op, vergeet het niet weer aan te zetten als je klaar bent!
  • Een andere nuttige functie van Magento is de Template path hints. Doordat elk element in je template weer in een andere PHTML bestand staat is het in het begin moeilijk om iets aan te passen. Door de Template path hints aan te zetten zie je op je website precies welk bestand er gebruikt wordt voor welk element. De template path hints kun je aanzetten door in te loggen, kies in de navigatiebalk voor system en vervolgens Configuration. Kies links boven bij Configuration Scope voor Main website. Kies vervolgens in de linker navigatie balk onderin onder Advanced voor Developer. Onder Debug kun je de Template path hints aanzetten.
  • Magento heeft eigen foutmeldingen voor als er iets goed fout gaat. Je krijgt dan een code te zien. Met deze code kun je vervolgens achterhalen wat het probleem is. De logs worden weg geschreven naar Magento root/var/reports. Door SetEnv MAGE_IS_DEVELOPER_MODE “true” toe te voegen aan je .htaccess bestand kun je de foutmeldingen ook gelijk bekijken op je scherm.

Met dank aan Toine Branbergen!