Over Webwinkelblog

Een blog over webwinkel conversie en marketing geschreven door Mitchel van Duuren van Orangeboys BV.

Magento template building

Afgelopen dagen bezig geweest met Magento, en dat bevalt al aardig. Het is gemakkelijker als ik in eerste instantie dacht. Dus ik vind het systeem nu officieel COOL.

Sommige die mij op twitter volgen hebben het resultaat van een dagje “rommelen” met Magento al gezien op www.eiwitstore.nl – helaas zal de website snel niet meer te zien zijn aangezien ik deze opnieuw ga opbouwen met het Blank SEO Theme van Yoast.

Hieronder toch nog een screendump van hoe het was.

Toch wil ik mijn ervaringen van afgelopen dagen nog even delen.

Beginnen met het bouwen van een Magento Template

Om met iets te beginnen is altijd lastig. Gelukkig valt het met een Magento theme wel mee. Wat je moet doen is het volgende. Kopieer het theme wat je wilt gaan bewerken om er je eigen theme van te maken, geef het een andere naam en kopieer het weer terug. In mijn geval is bovenstaande template gebaseerd op het default theme.

De 2 mappen die je moet kopiëren staan in:

app/design/frontend/default/

en

skin/frontend/default/

Kopieer ze terug en hernoem de map default naar jouw_template_naam

Alle CSS files staan in skin/frontend/default/jouw_template_naam/css/ het meest gebruikte CSS file uit deze map is boxes.css hier staat bijna alles in. Als je geen css kunt, kan je het wel vergeten om een eigen template voor Magento in elkaar te bouwen.

In de map app/design/frontend/default/jouw_template_naam/layout/ staan de XML files. In deze files kun je voornamelijk aangeven of je een 1,2 of 3 column layout wil, welke blocks (alles wat links en rechts staat in de sidebar) je wilt laten zien. Je zult vaak catelog.xml en page.xml bezig zijn.

In de map app/design/frontend/default/jouw_template_naam/template/ staan de .phtml files. Hier kun je vooral de opmaak regelen. Waar je alles wil positioneren in samenwerking met de css files.

Activeren van je theme

Activeren van je nieuwe theme doe je door in de admin naar Systeem -> Ontwerp te gaan. Bij eigen ontwerp kies je je eigen (zojuist gekopieerde) theme. Nu wordt het tijd om wat dingen te veranderen in jouw theme. Hierover meer in het volgende blogbericht.

PS: Excuus dat ik nu zoveel blog over Magento, en niet over webwinkels in het algemeen.

8 comments…

  • just Guido 7 mei, 2009, 11:54

    Meer Magento! =P

    Voor iemand die niet dagelijks ingewikkelde templates bouwt is dit bijzonder waardevolle informatie.

    Ik heb nu in ieder geval weer de moed om mijn Magento-project op te pakken, ook op basis van de theme van Joost.

    Mijn eerste doel is om alle meuk die er niet in moet weg te commenten. En als ik het dan nog niet stuk heb gemaakt de boel te gaan pimpen.

    Dus van mijn kant in ieder geval geen klachten over de Magento blogs.

    Reply
    • Tom 5 juni, 2013, 23:25

      Prachtige reactie hierboven. Recht uit het hart. Moet zeggen dat ik het ook een zeer handige blog vind. Gewoon simpel uitgelegd wat de files in de mapjes nu eigenlijk doen. Top en ga zo door.

      Dank!

      Reply
  • lammert 1 juni, 2009, 18:19

    Ben ook met magento begonnen maar
    (mischien ben ik een boon hoor)

    hoe verander je van een layout b.v. de titel?
    Heb geen zin n.l om een hele layout te gaan bouwen terwijl er al een gemaakt is, maar wel handig als mijn eigen naam erboven staat 😉

    Alvast bedankt!

    Reply
  • snorrr 8 november, 2009, 18:25

    Het bouwen van een template, of beter gezegd verbouwen lukt me al aardig. Echter kan ik nergens iets vinden over de code die nodig is om een afbeelding in een CMS pagina op te nemen.

    Ik wil namelijk niet de hele url erin zetten: http://www.url.nl/images/img.jpg zal maar zeggen. Nu heb ik wel het volgende gevonden: .

    Maar is er iemand die mij kan vertellen waar deze code precies voor bedoeld is en of het dus in CMS pagina’s gebruikt kan worden en waar staat dat _area voor.

    Of natuurlijk een betere oplossing 😀

    Bedankt alvast.

    Reply
  • snorrr 8 november, 2009, 18:26

    Oh de code is er uitgefilterd, dus ik hou het bij de vraag: Hoe afbeeldingen in een CMS page op te nemen in Magento.

    Reply
  • Marv 9 juli, 2010, 08:10

    thnx dude, dit was het duwtje wat ik nodig had! mooie site trouwens (eiwitpoeder)

    Reply
  • Jotam 30 september, 2011, 07:54

    Hoi Mitch,

    Als ik de mappen kopieer zoals hierboven uitgelegd krijg ik mijn css niet aan de praat. Terwijl ik wel mijn eigen template instel.
    Weet jij dit misschien?

    Groet,

    Jotam

    Reply
  • Kim Strijd 27 februari, 2013, 18:06

    Beste Mitch,

    Weet jij misschien hoe ik kleine afbeeldingen in mijn ‘short description’ krijg?

    Bedankt!

    Groetjes,
    Kim

    Reply

Leave a Comment