Static Blocks / CMS Pages

Adding store URLs to static blocks and CMS pages via Magento template tags

Magento's template tags allow you to add the store's base URL to links based on the base URL's setup in the Magento admin. Especially useful in multiple store environments where stores with different base URL's share the same static block or CMS page content. Also from a development perspective not having to change the URL as the site progresses from development, UAT, staging and production environments, each with their own specific base URL. Below are examples of the various ways of adding a URL to a static block or CMS page via template tags added to the href attribute each with its own use case.

//Code
{{store url=''}}

// Example
<a href="{{store url='customer-service'}}">Customer Service</a>

// Result 
<a href="http://www.example-store.com/customer-service/">Customer Service</a>

Inserts the store's base URL followed by a trailing slash. By adding a value between the single quotes, it will append the value to the end of the base URL as shown in the example.

//Code
{{store direct_url=''}}

// Example
<a href="{{store direct_url='customer-service.html'}}">Customer Service</a>

// Result: <a href="http://www.example-store.com/customer-service.html">Customer Service</a>

Similar to using {{store url=""}} except it won't add a trailing slash to the URL. Useful when you're linking to a page with an extension such as .html.

// Code
{{config path="web/unsecure/base_url"}}

// Example
<a href="{{config path="web/unsecure/base_url"}}/customer-service">Customer Service</a>

// Result: <a href="http://www.example-store.com/customer-service/">Customer Service</a>

Used for linking to pages which aren't required to be secure. The resulting url will always be a http:// link even if the existing page is https://. For example linking from a secure page such as the Checkout to a CMS content page.

// Code
{{config path="web/secure/base_url"}}

// Example
<a href="{{config path="web/secure/base_url"}}/checkout">Checkout</a>

// Result: <a href="https://www.example-store.com/checkout">Checkout</a>

Used for linking to pages which should be secure such as the Checkout. The resulting url will always be be a secure https:// link.

Adding images to static blocks / CMS pages

// Code
{{skin url=''}}
                    
// Example
<img src="{{skin url='images/image01.jpg'}}" alt="image" />

// Result: <img src="http://www.example-store.com/skin/frontend/theme/images/image01.jpg" alt="image" />

Provides the store's base URL and path to the skin folder of the store's theme. Within the single quotes is where the path to the specific media item is provided. This tag is mainly used for images but can be used for anything else stored in the template skin folder.

Adding a widget to a static block / CMS page

// Code
{{widget type="cms/widget_block" template="" block_id=""}}
                    
// Example
{{widget type="cms/widget_block" template="cms/widget/static_block/default.phtml" block_id="18"}}

In the case where you need to add a widget to a static block or CMS page, the above template tag is used. The template and block_id attributes need to be specified for it to work. The template attribute value is where in the template folder of the theme the template file (.phtml) of the widget is located. The block_id is the id assigned to the widget when it is created in the Magento admin.

Adding a static block within a static block or within a CMS page

// Code
{{block type="cms/block" block_id="" template="cms/content.phtml"}}
   
// Example
{{block type="cms/block" block_id="your_block_identifier" template="cms/content.phtml"}}

In the case where you need to add a static block within a static block or CMS page, the template tag above is used. The block_id attribute needs to be modified, the block_id attribute is the id of the static block and can be found in the Magento admin.

Additional Resources

Magento Wiki - Markup Tags

Template Files (.phtml)

Adding translatable text to a template

//Code 
<?php echo $this->__('') ?>

//Example
<p><?php echo $this->__('Your text here') ?></p>

When adding text to a template which will be displayed on the frontend of a store, place the text within the single quotes of this PHP statement so that it can be translatable. Especially useful for store which share the same template in different languages.

Adding Links to pages within the site

// Code
<?php echo $this->getUrl('') ?>

//Example
<a href="<?php echo $this->getUrl('customer-service') ?>">Customer Service</a>

Inserts the store's base URL followed by a trailing slash. By adding a value between the single quotes, it will append the value to the end of the base URL as shown in the example.

// Code
<?php $this->getUrl('', array('_secure' => false)) ?>
                 
//Example
<a href="<?php $this->getUrl('customer-service', array('_secure' => false)) ?>">Customer Service</a>

Used for linking to pages which aren't required to be secure. The resulting url will always be a http:// link even if the existing page is https://. For example linking from a secure page such as the Checkout to a CMS content page.

Adding images / js to template files

// Code
<?php echo $this->getSkinUrl(''); ?>

//Example                                    
<img src="<?php echo $this->getSkinUrl('images/image01.jpg'); ?>" alt="image" />

Provides the store's base URL and path to the skin folder of the store's theme. Within the single quotes is where the path to the specific media item is provided. This tag is mainly used for images but can be used for anything else stored in the template skin folder.

Adding content blocks to a page

// Code 
<?php echo $this->getChildHtml('') ?>

//Example
<?php echo $this->getChildHtml('name of block') ?>

For blocks which are a child of the parent block you can use the following code to display it to the frontend replacing 'name of block' with the appropriate name.

Adding a static block to a template

// Code
<?php echo $this->getLayout()->createBlock('cms/block')->setBlockId('')->toHtml() ?>

//Example
<?php echo $this->getLayout()->createBlock('cms/block')->setBlockId('contactpage')->toHtml() ?>

In the case where you need to add a static block within a template, the template tag above is used. The setBlockId attribute needs to be modified, the setBlockId attribute is the id of the static block and can be found in the Magento admin.

Layout XML Files (.xml)

Adding CSS stylesheets through layout XML

//Example
<action method="addCss"><stylesheet>css/styles.css</stylesheet></action>

Adding stylesheets located in the skin folder can be done using the code above changing the <stylesheet> value and placing the <action method="addCss"> within the <reference name="head"> in your local.xml.

Removing CSS stylesheets through layout XML

//Example
<action method="removeItem"><type>skin_css</type><name>css/styles.css</name></action>

If you need to remove a stylesheet from an existing base layout xml file, use the code above changing the <name> value and placing the code within the <reference name="head"> section of your local.xml file

Adding js files from the skin js folder through layout XML

//Example
<action method="addItem">
    <type>skin_js</type><name>js/scripts.js</name>
</action>

If you need to add a new javascript file from the js folder located in the theme, use the code above changing the <name> value and placing the <action method="addItem"> within the <reference name="head"> of your local.xml.

Removing js files from the skin js folder through XML layouts

//Example
<action method="removeItem">
     <type>skin_js</type><name>js/scripts.js</name>
</action>

If you need to remove a javascript file located in your themes skin js folder or a fallback theme skin js folder, use the code above changing the <name> value and placing the <action method="addItem"> within the <reference name="head"> of your local.xml.

Adding js files from the core js folder through layout xml

//Example
<action method="addJs"><script>script/scripts.js</script></action>

If you need to add a js file from the core js folder, you can use the code above changing the value within <script> and placing the <action method="addJs"> within the <reference name="head"> of your local.xml.

Removing js files from the core js folder through layout XML

//Example
<action method="removeItem">
     <type>js</type><name>scripts.js</name>
</action>

If you need to remove a javascript file from the core js folder, use the code above changing the <name> value and placing the <action method="addItem"> within the <reference name="head"> of your local.xml.

Removing structural or content blocks through layout xml

//Example
<remove name="welcome" />

If you need to remove a content or structural block from displaying on the frontend, use the above code within the appropriate <reference> and replacing the <name> value with the name of the block, not the alias. The name is an attribute of the block where it originally is declared.

Moving a content block to another structural block on a page

//original code in newsletter.xml
<reference name="left">
    <block type="newsletter/subscribe" name="left.newsletter" template="newsletter/subscribe.phtml"/>
</reference>

//code removing the newsletter block from the left structural block
<reference name="left">
    <action method="unsetChild">
        <name>left.newsletter</name>
    </action>
</reference>

//adding the newsletter block to the footer
<reference name="footer">
    <action method="insert">
        <block>left.newsletter</block>
    </action>
</reference>

In the above code, there are three pieces of layout xml which illustrates how to move the newsletter block from its default position in the left structural block to the footer using the unsetChild and insert method. The first piece of code is the original newsletter block in the newsletter.xml file. The next two pieces of code involve removing and inserting the newsletter block and should reside in your local.xml. If the original content block has an alias attribute, you can use that instead of <name>

Changing the page layout

//Example
<reference name="root">
    <action method="setTemplate"><template>page/2columns-left.phtml</template></action>
</reference>

By default Magento comes with five different page layouts, one column, two column left, two column right, three column and empty. The code above shows an example of setting the page template to the two column left layout.

Adding a class to the <body>

//Example
<reference name="root">
    <action method="addBodyClass"><className>customer</className></action>
</reference>

This snippet of XML will add a class to the body tag of the page. Make sure the line of code is added within the reference name root and that the page template you're using (template/page/...) has <body<?php echo $this-getBodyClass()?' class="'.$this->getBodyClass().'"':'' ?>>

Adding a static block to a page through layout XML

//Example
<block type="cms/block" name="static-block">
    <action method="setBlockId"><block_id>static-block</block_id></action>
</block>

If you want to add a static block through the layout XML, use the code below changing the name="static-block" and <block_id>static-block</block_id> to the id of the static block you wish to include.

Changing the number of products displayed per row on a category page

//Example
<block type="catalog/product_list" name="product_list" template="catalog/product/list.phtml"></block>
<action method="setColumnCount"><columns>4</columns></action>

Add this line of code to the catalog.xml

Javascript

Script to run Prototype after document load

Event.observe(window, 'load', function() {

});

Running jQuery within the Prototype on document load

Event.observe(window, 'load', function() {
    (function($){

    })(jQuery);
});

Built-in Magento javascript

Magento has some built in javascript which you can make use of instead of including new libraries. The decorate functions are very useful when you need to style alternate, first or last items in tables or lists. The decorate function add classes to elements, allowing you to style arrays of dynamically generated content.

For use with tables, you will need to change shopping-cart-table to the id of the table you with to decorate.

<script type="text/javascript">decorateTable('shopping-cart-table')</script>

For use with lists, you will need to change mini-products-list to the id of the list you wish to decorate.

<script type="text/javascript">decorateList('mini-products-list', 'none-recursive')</script>

Generic function which will add classes to an array of elements specified. Change ul.products-grid to the class of the element you wish to decorate

<script type="text/javascript">decorateGeneric($$('ul.products-grid'), ['odd','even','first','last'])</script>