After 4 awesome days at Pukkelpop, I’m back and working at Yappa 
. The past few days I’ve been assiged a task to design a webshop and implement the design to Magento, a huge and one of the fastest growing eCommerce platforms. Now I can tell you that the template system is quiet complicated and the first few steps you take you better prepare yourself by reading their designer’s guide. Magento offers tons and tons of features. A feature which I really enjoyed seeing was the multiple stores you can manage within one system. You can choose to seperate the stores entirely or just create different stores for different languages, etc. The looks of your website are located in something named an ‘interface’. The interface holds the layout, locale, template folders. There is also a skin directory located in the root. When you’re making a new template for Magento these four directories will be the ones where you will spend most of your time. But a thing I found quite strange about Magento is that it uses XML files to sort the template files onto the correct location and pages. At first sight this might seem incomprehensible or complicated, but trust me once you get to know how it works you’ll find it very interesting and easy to use.
These XML files live inside the layout folder. In the template folder we have the .phtml files wich stand for PHP and HTML I think =). It’s because you can also use PHP syntax inside the HTML. Thank God they didn’t try to reinvent the wheel and make their own PHP HTML syntax kinda like smarty, because I hate learning those. So here it’s a lot easier and u can just use PHP inside the template files. The locale folder simply holds the translations for every text used in the template.
So how exactly do the layout and template files work together? Well, the template files can be divided into three kinds. The first one is the skeleton for example: 2-column.phtml, 3-column.phtml.They contain the main html elements like div=”header”, div=”footer” and inside those we refer to blocks. First comes the structural block, like when we refer to the left sidebar the sidebar will refer to structural blocks like ’subscribe to newsletter’, ‘navigation’, etc. And then these structural blocks will refer to blocks that hold the content. Like inside the header structural block we could refer to the ‘topLinks’, ’search’ blocks.
As you can see I mention the ‘refer’ word a lot . This is where the XML Layout files come in place. Magento has its own XML syntax and each template comes along with one xml layout file, but the page template can have multiple files in its directory. And the XML holds the knowledge to figure out where the template files are pointing to when you call ‘topLinks’ for example, you will have specified some lines so the system will know what to fill in there. for example.
<block type=”page/html_topLinks” name=”topLinks” template=”page/html/top_links.phtml” />
Or something like that, it’s possible that it isn’t correct because I haven’t used it that much so far. I did create the template and that one works very well . But when creating a new template I’d advice you to take a copy of the default interface and skin directory and start from there. I pasted my HTML under theirs and just copied the PHP lines which filled in the content. The XML layout files where already there and pointed the correct template file(which I also adjusted), so that can save you a lot of time when making a new Template. Just copy the default ones and work your way from there.
Some Tips for when you get started:
1. Turn on the Template Path Hints (these show you what template file is used and where) very handy.
2. When you’re trying to edit blocks: for example ‘newsletter’ block go look in the newsletter.xml. Also looking in the catalog.xml might help a lot.
Between the <default> tags are shown most of the time.
Thats my review, tips & tricks for Magento so far .
It’s a great system, but it just takes a bit of time to know it properly so you can use all of its potential.
