Magento Frontend Developer Certification Exam Study Guide

Well hello there, I take it you’re probably in the process of studying for your soon to come Magento Frontend Developer Certification Exam. If so, then you have just found one of the most useful articles ever!

You probably downloaded Magento’s Study Guide PDF which you expected to be all you needed but then realized it’s only packed with questions for you to answer by doing research. This happened to me too, and I found it painful to have to go through tons of different resources to find the answers. This is why I decided to put everything I found together in just ONE blog post as well as a downloadable ebook for anyone else who’s planning on taking the exam and in the process of preparing for it. The percentage next to the titles are there to show you how much of that topic you will be asked about on the exam. Big thanks to all my fellow developers at Demac Media who helped out with the completion of this post.

Warning:

This post and ebook alone will not guarantee you will get a passing score. This is meant only to point you in the right direction and answer doubts. Having real experience coding a Magento site’s frontend will give you the rest of the studying that you need.





Download Study Guide




Magento Frontend Developer Certification Exam

0. Prerequisites
1. Use the Magento Design Fallback System (7%)
2. Use Layout XML to Customize a Theme (19%)
3. Create and Customize Template Files (16%)
4. Effectively use the Magento Block-Template Design System (11%)
5. Identify Where to Locate Files and Create New Files in the Theming-Related Directory Structure (7%)
6. Customize and Create Javascript within the Magento Framework (8%)
7. Use CSS Effectively to Customize Magento Look and Feel (9%)
8. Customize the Look and Feel of Specific Magento Pages (12%)
9. Correctly use the Admin Configuration Scopes (Default/Website/Store View Fallback) (6%)
10. Implement Internationalization of Frontend Pages (CE + EE) (4%)
11. References

0. Prerequisites

Which new features are included in HTML5?

The most interesting new features are:

  • The <canvas> element for 2D drawing.
  • The <video> and <audio> elements for media playback.
  • Support for local storage.
  • New content-specific elements, like <article>, <footer>, <header>, <nav>, <section>.
  • New form controls, like calendar, date, time, email, url, search.

How can I introduce CSS into an HTML page?

There are four ways to do this:

  • 1. Linking to a separate CSS file
    <link rel="stylesheet" type="text/css" href="mystyles.css" media="screen" />
  • 2. Embedding CSS into the HTML
    <style media="screen" type="text/css">
    
    Add style rules here:
    
    </style>
    
  • 3. Inline CSS in HTML tags
    <h2 style="color:red; background:black;">Red heading with a black background</h2>
    
  • 4. Importing a CSS file from within CSS
    @import "newstyles.css";

For a more in-depth explanation visit this link

What is the scope of variables in JavaScript?

– If the variable is declared outside a function it has a global scope and it will be recognized by any function.

– If the variable is given a value but not declared, it will be global as well.

– And, if a variable is declared inside of a function, its scope is the function itself and it will not be recognized outside of that function.

How do closures work in JavaScript?

A closure is the local variables for a function – kept alive after the function has returned, or

A closure is a stack-frame which is not deallocated when the function returns. (as if a ‘stack-frame’ were malloc’ed instead of being on the stack!). As explained here.

What methods of inheritance implementation can I name in JavaScript? How do they work?

JavaScript has a prototypal inheritance as opposed to a classical inheritance which most OO languages have. This means that there are no actual ‘classes’ in JavaScript but objects that act like classes. This article is great for understanding how the different methods of implementation work.

Which methods of page speed optimization do I know?

Server side:

  • Choose a decent web host
  • Host assets separately
  • Compression with GZip
  • Minimize Redirects
  • Reduce DNS Lookups

The assets (CSS, JavaScript, Images):

  • Merge multiple Javascripts into one
  • Compress Javascript & CSS
  • Customize header expiry/caching
  • Off-load the assets
  • Handling web images
  • Handling CSS

Here’s the excellent article that explains all of these

Update (Aug 2015): Here we have another fantastic and very in-depth article by AdPushup!

1. Use the Magento Design Fallback System (7%)

How can I display templates from all available fallback steps within one page?

By setting up the fallback steps properly in the admin panel. Go to ‘System > Configuration > Design Tab > Theme package’ and fill the ‘Layouts’, ‘Templates’ and ‘Translations’ fields with the name of your theme. If you leave ‘Default’ blank, Magento will know to look for the default theme folder and use that as a the first fallback step when it can’t find the files under your theme. When Magento can’t find the files in the default theme folder either, it will automatically look for them under the base theme. This way you could have all fallback steps within one page, depending on which files you have and where.

When implementing a custom theme based on the default/blank theme, how can I minimize work during upgrades of Magento and the blank theme?

All you need to do is place your custom theme in its own folder on the same level as the blank theme (which tells Magento that it’s only a variation of blank) and copying and pasting only the files you will be editing from the blank theme folder to yours with the exact same folder structure. Do not edit the files in the blank theme folder.

How many fallback steps are maximally available?

There are a maximum of three available fallback steps (in the newest versions of Magento):

  • Custom theme
  • Default theme
  • Base theme

How does choosing a theme on a category, product, or CMS page influence the fallback configuration?

Magento will look for the necessary files in the custom theme first, if they are there it will render those, if they are not there Magento will then look in the next in line fallback step. So, if the custom theme is only applied to one category, or one product, or one CMS page then Magento will render the custom theme files on that particular category, product or CMS page, and render the default theme files (next fallback step) for the rest of the site.

2. Use Layout XML to Customize a Theme (19%)

What is the difference between the name and as attributes for blocks?

name is an xml attribute that is used to (as the word says) give a unique, specific and intuitive name to your layout blocks. name is also used to call blocks inside the reference node in any layout xml file.

as is an xml attribute used as an alias instead, it’s usually a shorter version of the name attribute and it is used to call blocks in the template files with

<?php echo $this->getChildHtml(‘’); ?>

Also, a layout xml block must have a name attribute before it can have an as attribute.

What is the processing order of layout XML instructions?

Magento will first look for layout updates in the admin panel, and then in your local.xml file. When there are no updates it will then go to the next fallback step which is all the different module xml files in the default theme and finally, if it doesn’t find them there either, it will look for them in the base theme. Inside of the actual files, specific handles for pages or blocks will have a higher priority than what is inside of the default handles which covers pretty much every page.

How can I include a custom CSS file on a product detail page for a specific product?

In order to have a custom CSS file for a specific product, all you need to do is go to the store’s admin panel and from there go to Catalog > Manage Products > (Product you want to edit) > Design Tab. Find the ‘Custom Layout Update’ field and add the following:

<reference name=”head”>
    <action method="addCss"><stylesheet>directory/file.css</stylesheet></action>
</reference>

And, of course, change ‘directory/file.css’ to match your path, folder and file names.

How can I include a custom CSS file on a product detail page for a specific product type (e.g. grouped, downloadable, configurable, etc.)?

To do this you need to add that custom CSS file in your local.xml file, inside of the proper nodes.

Product Type

  • Simple
  • Configurable
  • Grouped
  • Virtual
  • Downloadable
  • Bundle
Layout Update Handle

  • <PRODUCT_TYPE_simple>
  • <PRODUCT_TYPE_configurable>
  • <PRODUCT_TYPE_grouped>
  • <PRODUCT_TYPE_virtual>
  • <PRODUCT_TYPE_downloadable>
  • <PRODUCT_TYPE_bundle>

How can I include a custom CSS file on a CMS page?

Similar to the explanation given two questions above but in a different location. You need to go to the admin panel under CMS > Pages > Manage Content > (Page you want to edit) > Design Tab. Find the ‘Custom Layout Update’ field and add the following:

<reference name=”head”>
    <action method="addCss"><stylesheet>directory/file.css</stylesheet></action>
</reference>

How can I include a custom CSS file on all Magento pages?

This is done in your local.xml file with the addCss action like so:

<action method="addCss">
    <stylesheet>directory/file.css</stylesheet>
</action>

and it must be inside of the reference name=”head” node for it to affect all pages.

How can you avoid copying core layout XML files into a custom theme by using the local.xml layout file?

By using the handles for the specific block from the core layout xml files that you want to edit. Use the name attribute to call the block inside of those handles in local.xml in the reference node and then use the add, remove, unset-child and any other actions needed to accomplish what you want.

3. Create and Customize Template Files (16%)

What are the conventions for variable naming?

In classes, an underscore at the beginning of a variable or function name indicates that the variable is private or protected.

Within templates, most variables that are used locally are prefixed with an underscore. This indicates that the variable is “private” to the template.

What does $this refer to in template files?

$this refers to the parent php block object where the template was declared.

How can I include another template inside the current one?

The template you want to include must be set as a child to the template you want to include it in. To do this, you need to find the name (layout xml attribute) of the parent template so you can call it inside of a node in your local.xml file and then add a block inside of it to declare the child template and give it a name and as attributes.

<block type="page/html_footer" name="footer" as="footer" template="page/html/footer.phtml">
    <block type="page/switch" name="store_switcher" as="store_switcher" after="-" template="page/switch/stores.phtml"/>
</block>

Here the parent block is “footer” with the footer.phtml template, and the child block is “store_switcher” with the stores.phtml template. The next step is to go back to your parent template file and just add the php call

<?php echo $this->getChildHtml(‘store_switcher’); ?>

with the child template as attribute inside the quotes.

4. Effectively Use the Magento Block-Template Design System (11%)

What is the difference between a template and a block?

A template is a .phtml file that contains all the HTML structure, PHP calls and JavaScript code necessary to display data. It is used to organize content and set the order in which data will be displayed and how it will function.

A block is where the data comes from. It’s a PHP object with a given class and a template. Each class has a group of PHP methods related to it, which means that in the template files you can only call the PHP methods included in its corresponding block class.

How can I see which block methods are available in a template?

Here are three ways of doing this:

1. You could find the .php file related to the template. For example, all the template (.phtml) files under the product folder in app/design/frontend/../template/catalog are related to the Product.php files under app/code/core/Mage/Catalog

2. Or you could use a variety of IDEs that can do php autocomplete. My favourite is PhpStorm to which you can install Magicento a tool that autocompletes your php code. If you click on the link, you can scroll down to the ‘Features’ section to learn what it can do. Here you can see what it looks like.

Auto-complete list of methods

3. You can also use this foreach loop to display them all

<?php
echo ‘<ul>’;
foreach (get_class_methods(get_class($this)) as $cMethod) {
echo ‘<li>’ . $cMethod . ‘</li>’;
}
echo ‘</ul>’;
?>

How can I assign a child block to another block?

You can do this in your local.xml file. Look for the handles or the name attribute needed to reference the block you want to assign the child block to and place the code for the child block inside of it. For example:

<reference name='left'>
   <block type='core/template' name='child' template='child.phtml'/>
</reference>

Here “left” is a parent block defined in page.xml.

How do I display a child block?

With the PHP call

<?php echo $this->getChildHtml(‘’); ?>

and adding the name or as attributes from that child block inside of the quotes. If you leave it empty without an attribute, it will display all child blocks defined in the parent block.

How can I access data from a parent block?

By using the variable $this and the appropriate PHP method related to the block’s class.

How can I set data on a block via layout XML, and how do I display that data in a template?

You can do this in your local.xml file with the setData method defined in Varien_Object.

<reference name="block_that_needs_data_set">
    <action method="setData"><name>category_id</name><value>3</value></action>
</reference>

name and value are some of the parameters of setData.
To display this data you will have to use the getData method in your template file (the one defined for your ‘block_that_needs_data_set’ block), like this:

<?php echo $this->getData(‘name’); ?>

5. Identify Where to Locate Files and Create New Files in the Theming-related Directory Structure (7%)

What is the purpose of packages?

Packages help keep all themes organized in an easy to find way for you (the developer) and Magento as well, so that the theme fallback system works.

What is the purpose of the theme fallback?

The purpose is to have an upgrade-safe store. Since you’re only editing your custom theme’s files and not the core Magento files, whenever Magento has a version upgrade and its core files change, your store won’t break.

What is the purpose of separating the skin and the design files?

The reason why the skin folder is in a different directory from the template and layout folders is for it to be higher in the folder hierarchy so that calls to the CSS files, images and JS are shorter.

6. Customize and Create JavaScript Within the Magento Framework (8%)

How can I extend an existing JavaScript class instance with new or customized functionality?

Here’s an example of an extension of the search form. This code must be in a new .js file in the js folder under your theme.

Varien.searchForm.addMethods({
  initAutocomplete: function(url, destinationElement) {
    // Your new implementation
    // This will override what was previously defined
    alert('new');
  },
  someNewMethod: function() {
    // This will add a new method, `someNewMethod`
    alert('someNewMethod');
  }
});

How many upgrade-safe ways can I find to execute custom JavaScript functions when a one-page checkout step is submitted?

There are a few ways to customize your one-page checkout JavaScript. But only one of them is upgrade-safe, and that is to place all your code in a new file in the js folder under your theme. All the JavaScript code for the one-page checkout is in opcheckout.js. A way to customize a function would be to initialize it in a new js file and inject your code for it to work later with an ‘onclick’ before the .save() function is triggered. Refer back to the previous question.

This article may be helpful

How can I add custom JavaScript form validation using the framework provided by Magento?

By extending the class from prototype. All you need is VarienForm() and Validation.add() like this:

<script type="text/javascript">
//<![CDATA[
    var theForm = new VarienForm('theForm', true);
    Validation.add('validate-must-be-baz','You failed to enter baz!',function(the_field_value){
        if(the_field_value == 'baz')
        {
            return true;
        }
        return false;
    });
//]]>   
</script>

A more in depth explanation by Alan Storm can be found here.

How can I change the label text of the configurable product dropdowns in an upgrade-safe way?

With the JavaScript translation facility found in js/mage/translate.js that Magento provides. Make sure it’s added in the head and remember to write your code in a new js file under your theme to keep things ‘upgrade safe’.

How do I use the JavaScript translation facility for custom text?

By writing something like this in your scripts

Translator.add('Some text to translate','<?php echo Mage::helper('yourmodule')->__('Translated text') ?>'); //adds a translation
alert(Translator.translate('Some text to translate')); //returns an alert with 'Translated text' inside

Example taken from this blog post, where he explains a couple other methods.

7. Use CSS Effectively to Customize Magento Look and Feel (9%)

Which types of selectors and rules of priority are available in CSS2?

Selector types:

  • Simple
  • Combined
  • Universal
  • Type
  • Class
  • ID
  • Combinators
  • Descendant
  • Child
  • Adjacent Sibling
  • Attribute
  • Pseudo-classes
  • Pseudo-elements

For a more in-depth explanation of each selector type, click here.

The rules of priority (specificity) are usually represented by weight like this…

Attribute = 1000
ID = 100
Class = 10
Elements = 1

When two selectors have the same weight, the browser will render the last declared one on the styles sheet, which is what “cascading” means.

For a more in-depth explanation click here

Which CSS related methods of Page Speed Optimization do you know?

  • CSS sprites
  • Have only one CSS file
  • Make CSS an external file
  • Always have your CSS file in the header/top
  • Use Link instead of @import
  • Use CSS shorthands
  • Group similar styles
  • Reduce white space and line breaks
  • Remove the last semicolon
  • Use simple comments
  • Simple colour
  • Remove ‘px’ when possible
  • Remove unused classes
  • Use compression tools
  • CSS compiler tools like SASS

Click here for more information and here for a list of helpful tools.

8. Customize the Look and Feel of Specific Magento Pages (12%)

Which structural blocks are available as part of the content on all pages?

There are five blocks in total:

  • Header
  • Left
  • Content
  • Right
  • Footer

Layout of content blocks in Magento

To which menus can I add custom entries using layout XML in an upgrade-safe way?

For anything to be upgrade-safe in Magento you need to avoid editing any core files. In the case of xml layouts, all your changes must go in your local.xml file.

You can add custom entries to any menus as long as you have the proper handles. For example, you can add new links to the customer account menu like this:

<customer_account translate=”label”>
    <reference name=”left”>
        <block type=”customer/account_navigation” 
               name=”customer_account_navigation” 
               template=”customer/account/navigation.phtml”>
            <action method=”addLink” module=”customer”>
            <name>account</name>
            <path>customer/account</path>
            <label>Account Dashboard</label>
            </action>
        </block>
    </reference>
</customer_account>

How can I create links to store pages in transactional email templates?

This must be done in a custom template and never in the default ones. Once you create your new custom template you can use the store variable inside of the href attribute of an <a> tag to add links to store pages. For example:

Check the status of your order by <a href="{{store url=""}}">logging into your account</a>

This will link you to the account page.

How can I include a custom template in transactional email templates?

Go to the admin panel under System > Transactional emails, click on ‘Add New Template’ and then you can choose a default template and after you click on ‘Load Template’ all of that template’s code will appear in the ‘Template Content’ field which you can then customize and give it its own name and subject.

How can I access properties of the template variables (for example the order in the new order email, or the customer in the registration confirmation email)?

You can access the properties with the PHP get method. For example:

{{var store.getFrontendName()}}

or

{{var order.getShippingAddress().format('html')}

9. Correctly Use the Admin Configuration Scopes (Default/Website/Store View Fallback) (6%)

Why are some options not configurable on a store view level?

Store view level options are mostly cosmetic as opposed to functional so they only allow for front-end/theme changes. Some options like shipping and payment gateway are meant to be different only across the website level.

How can I use the available configuration scopes to the greatest effect?

If you are going to be using a configuration option across all websites, the best way to do this is by setting that option at the ‘Default Config’ level which is the highest level. This helps avoid the repetition of the same configuration setting for each website. This is the same when you want an option for all store views; the best practice is to set it at the website level. Only edit these options when you want there to be exceptions.

10. Implement Internationalization of Frontend Pages (CE + EE) (4%)

Which methods are available for translation?

  • Inline translation
  • Locale translation files (translation.csv)
  • core_translate package
  • JavaScript translate.js

How can I customize translations in an upgrade-safe manner?

Keep your custom translations in your theme’s locale folder and only edit them there.

How can I add translations for custom strings in templates?

If the text you’re going to translate is in your template files it should be inside of

<?php echo $this->__(‘’); ?>

after that, you can go to the appropriate .csv file and apply the translation there.

How can I use the translation feature to customize existing text?

Let’s say this is the string you want to translate

<?php echo $this->__(‘Translate ME!’); ?>

and you want to translate it into french. The next step would be to find your fr_FR folder and create a translate.csv file if it’s not there yet. Then inside of it all you need is:

‘Translate ME!’, ‘Traduire MOI!’

The string you want to translate has to perfectly match the one in your template. So, for example, you can’t use anything like ‘Translate me!’ or ‘Translate ME’. It’s case sensitive, and every character should be included.

How can translations be moved from one host to another (for example, from a development host to the live server)?

All you have to do is upload your translation file to your server with your preferred file transfer tool, and then refresh the translation cache. Also clear block html cache and full page cache them you have it enabled.

How can I translate transactional emails?

You can copy the transactional email templates from en_US over to the corresponding language folder (es_ES for example, if you’re translating them into Spanish) and then translate them manually.

You can also go to System > Transactional Emails, click on ‘Add New Template’ then load a default template, choose the language in the ‘Locale’ field and edit manually in the ‘Template Content’ field.

How can I specify localized variables in transactional emails?

The wording here makes for a confusing question. There’s no way to know if they mean local variables specific to an instance or local variables that change based on locale.

Based on locale it would be something along the lines of:

{{var data.name.english}}
{{var data.name.french}}

But if they’re local variables specific to an instance then it would look more like this:

{{customVar code=“store_hours”}}

and you can find all the steps on how to do this by clicking here.



And that was it! If you find any mistakes in my answers or know ways to make this post better, let me know in the comments! Enjoy, and thanks for reading.

11. REFERENCES

0.

http://www.w3schools.com/HTML/default.asp

http://www.w3schools.com/js/default.asp

http://www.seomoz.org/blog/15-tips-to-speed-up-your-website

1.

The Magento Admin interface:

System > Design

System > Configuration > Design

Catalog > Manage Products > [choose product] > Design tab

Catalog > Manage Categories > [choose category] > Custom Design tab

CMS > Pages > [choose page] > Design tab

The Magento Designers Guide: http://www.magentocommerce.com/design_guide

http://www.magentocommerce.com/knowledge-base/entry/magentos-theme-hierarchy

2.

The Magento Designers Guide

http://www.magentocommerce.com/design_guide/articles/intro-to-layouts

– app/design/frontend/base/layout/page.xml

– app/design/frontend/base/layout/catalog.xml

The Magento Admin interface:

Catalog > Manage Products > [choose product] > Design tab

Similar options for categories and CMS pages

3.

The Magento Designers Guide

4.

The Magento Designers Guide

http://www.sitepoint.com/an-introduction-to-magento-themes/

5.

The Magento Designers Guide

6.

http://prototypejs.org/learn/

– js/prototype/validation.js

– js/varien/product.js

– skin/frontend/base/default/js/opcheckout.js

– skin/frontend/base/default/js/bundle.js

7.

http://www.w3schools.com/css/default.asp

http://www.seomoz.org/blog/15-tips-to-speed-up-your-website

8.

The Magento User Guide: http://www.magentocommerce.com/resources/magento-user-guide

9.

The Magento admin interface:

All settings under System > Configuration

10.

– app/locale/*

– app/design/frontend/*/*/locale/translate.csv

The Magento admin interface:

System > Configuration > Developer > Inline Translation

http://magebase.com/magento-tutorials/digging-deeper-into-magentos-layout-xml-part-2/

Downloadable Magento Frontend Developer Certification Exam Study Guide

If you’d like to have all this information compiled into one convenient document, then you should download our study guide! We’ve taken all of the questions and answers and put them together in one place. Then you’ll be able to print it off for your own study sessions and share with friends, colleagues, etc. Click on the button below, and get studying!





Download Study Guide