Magento front-end development best practices

So here are 10 best practices for Magento front-end development.

1. First understand Magento frontend structure and follow conventions because magento is little strict about conventions, so you should know; how Magento is comprised of modules, know how layout XML creates page layouts and know how html blocks get loaded as defined by the page layouts. It is good to learn Magento structure first and then start learning how the .phtml files work. Dip diving into the html/php code immediately is possible but harder and more painful and prone to errors. If you have lesser time to finish any task then you may end up with frustration. Magento back bone is very strong (is a well-architected program), following the conventions used by the ecommerce framework is necessary for the best-maintainable deployment.

2. Of course, given the time & budget, and if necessary a solid implementation partner, anything is possible. do not try to customise everything from the get go. Magento is a highly flexible piece of software which has the inherent danger for the enthusiastic engineer.

3. Front-end can get relatively CSS & Javascript-heavy, using a debugging tool like Firebug is highly recommended.

4. Oh yes, In order to debug use template path hints and block names from the Magento configuration section. This makes things easy and find relevant .phtml blocks. If you have more than one store then you need to select specific store in order to enable path hints.

5. Little pain area :). If you are trying something out of box, setting related stuff then you may have to do more searching. Use the Magento forums, wiki, approach colleagues, etc or the person who has good knowledge than you, if you are stuck.

6. While creating template you have to be little alert. There are different templates available in magento by default like 1, 2 or 3 column, default/default, blank. If you want develop new go for blank as it has less html and css styles. Dont play with default themes.

7. When building a custom template or adjusting an existing one, work top-down. First think about and lay out the structure, then refine the contents.

8. Slideshows, popup scripts like Lightbox and Shadow box are excellent, but care should be taken that they are based on or compatible with the javascript framework Prototype/ Jquery.

9. Test early and often, also in multiple browsers. While this may be self-evident, the large array of options present in the ecommerce framework of Magento make this point extra important.

10. If you are part of a team, be very clear about who edits what, and use versioning tools like Subversion.

Share this nice post:

2 thoughts on “Magento front-end development best practices

Comments are closed.