Blog
Shop
About us
Contact us

10 (Magento) front-end development best practices

frontend2

Here are 10 best practices for front-end development (in Magento):

  1. Understand Magento’s front-end structure and follow conventions. 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’s structure first and then start learning how the .phtml files work. Diving into the html/php code immediately is possible but harder and more prone to errors. Magento is a well-architected program, following the conventions used by the ecommerce framework is necessary for the best-maintainable deployment.
  2. Do not try to customize everything from the get go. You will probably be under a limitation of either time or budget and should focus on the big picture. Magento is a highly flexible piece of software which has the inherent danger for the enthusiastic engineer to start tinkering with everything. :-) Of course, given the time & budget, and if necessary a solid implementation partner, anything is possible.
  3. Because the front-end can get relatively CSS & Javascript-heavy, using a debugging tool like Firebug is highly recommended.
  4. Use the template path hints and block names from the Magento configuration section (developer tab). This makes it possible to find relevant .phtml blcoks much more quickly. Note that you should select a website or store view to be able to turn on template path hints.
  5. Use the Magento forums / wiki, approach colleagues or others with the needed knowledge, if you are stuck.
  6. When basing a design on the basic layout that is default in Magento (1,2 or 3 columns, header, footer, several blocks in columns) it is wise to use the “blank” template to base your own template own instead of Magento’s “default/default” template. The “blank” template contains less CSS styling and more sparse HTML code (just the necessary hooks).
  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 Shadowbox are excellent, but care should be taken that they are based on or compatible with the javascript framework Prototype. Javascript framework jQuery has a compatability mode for instance, but Mootools-based scripts are inherently very hard to get to work in Magento.
  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. If you are working on the display of prices for instance, you should check what it looks like with special prices, price  ranges, “as low as” prices, tier prices, if the price gets adjusted properly when dropdown options with extra pricing are chosen, etc.
  10. If you are part of a team, be very clear about who edits what, and use versioning tools like Subversion.

Of course, this list is not exhaustive, and feedback would be appreciated.

The Author of this post is sander

Versatile web enthusiast. Especially interested in user experience design and blogs about that on GraphicMania.

8 Responses »

  1. A few other tips:

    1. Don’t try reinventing the wheel when adding functionality to your Magento project. First search for extensions made by other Magento developers on Magento Connect.

    2. Don’t ever EVER modify files under the app/code/core directory. You’ll forget about the changes and when you upgrade Magento, there’s a good chance that your changes are lost.

    3. For speeding up your Magento project, look at caching. Most custom made blocks (e.g. Top 3 products, New products, Featured product) can easily be cached for, say, about half a day. Look at this page in the wiki:
    http://www.magentocommerce.com/wiki/development/block_cache_and_html_ouput

  2. Thanks Mark, excellent additions :)

  3. Very awesome article, and definitely great additions Mark. Thanks Sander.

  4. Thank you for the compliment Kyle :-) We’ll do a back-end best practices article sometime in the near future too.

  5. Thanks for your great post…

  6. Didn’t appreciate this article, it does not really relate to magento best practices at all. Kyles post however was very useful.

    • Sorry to hear that, though this was a blog post written nearly 4 years ago and was written in a time when Magento development processes were very immature at a lot of Magento agencies. Things have luckily improved over time.

Trackbacks

  1. Dez dicas para otimizar temas no Magento Commerce | blog do André Gugliotti

Leave a Comment