There are two different ways of slicing and coding templates in Magento. The first one is preparing backend and styling the resulting HTML. The second is the opposite – preparing frontend on the basis of available graphics and integrating it with Magento.

In this article, I will focus on the second approach and present what should you pay attention to, when slicing and coding PSD files to Magento. At the very beginning we should eliminate some potential problems that may arise when implementing HTML to Magento.

1. Magento consists of templates

Magento template structure is based on the use of templates for different subpage layouts. For example, among template files you can find files such as:

  • 1column.phtml
  • 2columns-left.phtml
  • 2columns-right.phtml

They are responsible for the distribution of main sections on a given subpage and are used to build most subpages. As their names suggest, in the first case we have a one-column page layout, in the second a two-column layout with a sidebar on the left, and the third one is a two-column layout with a sidebar on the right. It is worth paying attention to it and create the same structures for the same layouts after slicing HTML. It is also good to write CSS in such a way that when you change a subpage structure, the page continues to display correctly.

2. Code in a modular way

Many sections occurring on one sub-page will definitely occur again on others. Elements such as header, footer, product box or breadcrumbs don’t appear only on one subpage. Such sections should be able to function as separate modules, so that you can display them regardless of the view and location. You should also become familiar with the modular or object-oriented approach to writing CSS (OOCss, BEM, Smacss, etc.).

3. Magento uses prototype.js instead of jQuery

All JavaScripts embedded by default in Magento are based on the prototype.js framework. Of course, nothing stops you from using jQuery when writing your own scripts. However, in order to do this, you need to prevent conflicts between the two libraries.

Only one element is responsible for conflicts between JavaScript libraries, the $ variable, used in many frameworks – it has a different meaning defined in both libraries. To prevent this, simply use its longer counterpart, the jQuery variable.

It is also worth connecting the jQuery library to the website before connecting prototype.js. Then we can safely use the jQuery namespace, and its shortened version ($) will be defined in the subsequent annexed library (in this case prototype.js).

Finally, there’s one more important point. There is one case in which Magento uses the jQuery library, namely the EE version that uses this library to operations on the product data sheet. It’s worth checking whether jQuery is not connected twice. This can cause problems, especially when two different versions of the library are implemented.

4. Use JavaScripts built into the Magento core

Magento has some useful JavaScripts built in, which can help us in creating some functions. It’s worth knowing about them and thereby avoid the use of additional libraries or writing these scripts from scratch.

You can use a built-in Magento plugin validation.js to validate forms. The plugin is based on the prototype.js library and has really a lot of options. There is more than 50 different methods of validation built in validation.js as default. Nothing stops you from adding your own methods, moreover, there are special functions prepared for that.

Another plugin found in Magento is tooltip.js. If you’re going to manage tooltips using Javascipt, it is better to take advantage of this add-on than, for example, load the popular jQuery UI library. However, I personally recommend using pure CSS to manage such simple elements as tooltips.

5. Use simple HTML code

The HTML code in Magento templates should be as simple as possible. Browsing base Magento template, you will find that very often simple HTML tags are used, about which most of us forget:

  • <button>
  • <del>
  • <small>

I admit that I myself often forget about tags such as <del> or <small> and instead of them, I overuse tag <span>, which fits everywhere. All tags, however, have their own purpose, so you should be aware of them and, most importantly, use them in practice.

6. Pay attention to the elements invisible at first glance

Often having prepared graphics in PSD, we cut, encode and style it not paying attention to how it’s supposed to work in the end. Of course, at the stage of preparing frontend, we can’t predict all actions. However, if we know from the beginning that we’re coding an online store, some functions should be relatively easy to predict. Here are some examples:

  • Products in a store have their fixed prices, which are definitely presented in graphics. Sometimes, however, along with standard prices come other prices (discounts, pre-discounts or price range (in the case of products with different variants)).
  • Product data sheet is often designed for a simple product (it has a price and ‘add to cart’ button). However, in reality stores also offer customizable products with the option of choosing a variant, which must be put somewhere.

Paying attention to such details, you can avoid many fixes that may be necessary after integrating with Magento.

7. Use Task Runners

You may want to separate the process of slicing and coding of PSD to Magento from the process of integrating HTML with Magento. It can lead to conflicts or overwriting files, especially if both tasks are performed at the same time. In that case, get familiar with Task Runners such as Grunt or Gulp.

Having a dedicated folder in the project where we cut and code PSD (or implement fixes), we often have to move CSS and JS files as well as images to target folders of Magento template. This process can be automated by using Task Runners. Scripts may not only move files into the correct folders for us, but also merge and minimize them, as well as create maps to them.

These are just a few key principles that everyone who wants to painlessly go through the process of slicing and coding of PSD to Magento should know. If you want to expand your knowledge of Magento from the frontend side, I encourage you to read the documentation prepared for frontend developers, available on the official Magento website.

Need some Magento advice? Contact us.

Tomasz Kikowski

Front End Developer at Divante eCommerce Software House

Share your comment