Jamersan | Magento and BigCommerce Elite Partner Agency

What are Directives in Magento and How to Use Them

WhatĀ is a Directive?

From time to time, in Magento, you may run across code snippets with two squiggly opening and closing brackets.
1-DirectivesInCms
What are those ā€œsquiggly bracketedā€ snippets of code officially called? They are called directives. These are very similar to ā€œshortcodesā€ in WordPress. The first word after the two opening squiggly brackets is the name of the directive. So, in the picture on the right, we have examples of the skin directive, media directive, config directive, store directive, and the customvar directive.

What is the purpose of a directive? To put it simply, a directive executes code that inserts content onto a page or email.

What is the Output Generated by the Directives in The above Image?

The above image is a picture of the location in the Magento CMS where you can edit the text on the homepage. So, Iā€™m going to refresh the homepage to see what the directives doā€¦ā€¦ā€¦.

2-DirectivesInCms-Result

The directives in the very first image of this article produce the output shown directly above. Below, is a summary of what is going on:

3-DirectivesInCms-Mapping(raw)

What do Each of These Directives Do?

The ā€œconfigā€ Directive

The first two examples in the above image are ā€œconfigā€ directives. These directives are calling the function Mage::getStoreConfig($path). They are passing the ā€œpathā€ into this function. How do we know the Mage::getStoreConfig() function is being called?

Every directive has one function that is responsible for outputting it. The function responsible for outputting the ā€œconfigā€ directive is called configDirective. The function responsible for outputting the ā€œmediaā€ directive is called mediaDirective. The function that outputs the ā€œskinā€ directive is called skinDirective. And, so on, and so forthā€¦.

All of the functions that output the directives in the above image are located in the class Mage_Core_Model_Email_Template_Filter.

Letā€™s take a look at the configDirective function:

4-configDirective

The above picture shows that the ā€œpathā€ is being inserted into the Mage::getStoreConfig($path) function. Please note that the value of $params[ā€˜pathā€™] is the value you passed into it (general/locale/timezone) as the picture below illustrates.

5-configDirectiveCmsEditor

The getStoreConfig($path) function is pulling data from the core_config_data table. There is a column in this table called path. This function will find the row in this table whose path is equal to the value we specified, ā€œgeneral/locale/timezoneā€. Then, this function will pull the ā€˜valueā€™Ā Ā  from this row. The ā€˜valueā€™ is then output to your screen.

(note: there are certain circumstances where this value will come from a config.xml if it does not exist in the database.)

Please note, for the ā€œconfigā€ directive to work, please insert the path you want to output into the permission_variable table. And, please be sure to set the is_allowed column in this table to 1. Then, press the ā€œFlush Cache Storageā€ button.

The ā€œcustomvarā€ Directive

Go to “System” –> “Custom Variables” in the Magento admin and create a custom variable. This ā€œcustomvarā€ directive can retrieve the value of any custom variable you have created.

The image below shows the parameter called ā€œcodeā€. The parameter is the part within the squiggly brackets that comes after the directive (the word ā€œcustomvarā€ is the directive). The image below shows that the parameter called code. This parameter is set equal to ā€œtest_custom_variableā€

6-customVarDirective-CMS

Please observe how, in the picture below, $params[ā€˜codeā€™] is equal to the value of the parameter, which is ā€œtest_custom_variableā€. When the code below calls loadByCode(), this retrieves a value from the core_variable table.

7-customvarDirective-code

The ā€œmediaā€ Directive

The media directive looks for and retrieves a url. The path must correspond to a location within the media directory. For example, the directive belowā€¦ā€¦..

8-mediaDirective

Refers to this location in the media folderā€¦ā€¦ā€¦.

9-mediaFolderinFileStructure

The picture of the mediaDirective function below contains $params[ā€˜urlā€™]. $params[ā€˜urlā€™] is equal to the value of the parameter called ā€œurlā€.

10-mediaDirectiveCode

The parameters are those things that come after the name of the directive (which is media). Therefore, the image below shows that ā€œurlā€ is the name of the parameter.

11-mediaDirectiveShortCode

The ā€œskinā€ Directive

The skin directive looks for and retrieves a url. The path must correspond to a location within the skin directory. For example, the parameter called url in the picture below contains the value ā€œimages/centinel/sc_learn_62x34.pngā€.

12-skinDirectiveShortcode

This refers to this location in the skin folder pictured belowā€¦ā€¦ā€¦.

13-skinFolderFIleStructure

And, here is the function that is used to output the skin directive. The reason why the parameter we are using above is called ā€œurlā€ is because the code below contains $params[ā€˜urlā€™]

14-skinDirectiveCodeExample

The ā€œblockā€ Directive

In the Magento CMS editor, I typed in the following directivesā€¦ā€¦ā€¦..

15-blockDirectiveShortCodeExample

These directives in the picture above produce the colored blocks shown belowā€¦ā€¦ā€¦ā€¦

16-blockDirectiveOutput

Please note, if type is anything different than ā€œcore/templateā€. Then, please add the type to the ā€œpermission_blockā€ table and then press the ā€œFlush Cacheā€ storage button. This step must be performed otherwise the ā€œblockā€ directive will be unable to output the block.

The Layout Directive

The layout directive is used to output multiple blocks. Here is a picture of a handle called ā€œcustom_handle_for_blocksā€ in one of my layout.xml files.

17-layoutDirectiveXML

Here is the directive that I am calling:

18-layoutDirectiveShortcode

Here is the result:

19-layoutDirectiveOutput

The layout directive is used in the email that is sent to the customer after an order is placed. This directive is used to load blocks that list all of the items the customer has purchased.

What directives can you use in emails?

You can use all of these directives mentioned in this article in emails too!

Where can Directives be Used?

In the above examples, these directives are being entered into the CMS editor for the home page. But, directives can be used in many other places as well. They can be used on the product detail page, emails, and in newsletters.

Adding Your Own Directives

You can create your own directives:

  • To add a directive that can be used on a CMS page overwrite this node: config/global/cms/page/template_filter
  • To add a directive that can be used on a CMS block overwrite this node:
  • config/global/cms/block/template_filter
  • To add a directive that can be used on the product detail page overwrite this node:
  • config/global/catalog/content/tempate_filter
  • To add a directive that can be used on newsletters overwrite this node:
  • config/global/newsletter/tempate_filter

 

 

Our Leadership

TJ Gamble

CEO

Shane Rodgers

Director, Operations

Alex Schreck

Director, Sales & Partnerships

Dave Christy BigCommerce & Adobe Expert

Dave Christy

Director, Delivery