Categories


Archives


Recent Posts


Categories


Handlebars JS in Magento

astorm

Frustrated by Magento? Then you’ll love Commerce Bug, the must have debugging extension for anyone using Magento. Whether you’re just starting out or you’re a seasoned pro, Commerce Bug will save you and your team hours everyday. Grab a copy and start working with Magento instead of against it.

Updated for Magento 2! No Frills Magento Layout is the only Magento front end book you'll ever need. Get your copy today!

In response to a retweet of adam_webdev by kalenjordan

Magento’s flexible layout system makes adding a javascript library like handlebars a cinch.

First, download the latest version of handlebars and drop it in your root javascript folder

js/handlebars-v1.3.0.js 

Next, add the following to your local.xml file.

<layout>
    <!-- this adds the javascript to the page.  This needs to be in a layout update xml -->
    <default>
        <reference name="head">
            <action method="addJs"><script>handlebars-v1.3.0.js</script></action>
        </reference>        
    </default>

    <!-- this adds a handlebars template to the page. It does not need to be
         in layout update XML file, we're putting it there for convience -->
    <cms_index_index>
        <reference name="content">
            <block type="core/text" name="example_handlebars_template">
                <action method="setText"><text><![CDATA[                    
                    <script id="entry-template" type="text/x-handlebars-template">                
                        <div class="entry">
                          <h1>{{title}}</h1>
                          <div class="body">
                            {{body}}
                          </div>
                        </div>
                    </script>
                ]]></text></action>
            </block>
        </reference>
    </cms_index_index>
    <!-- this adds a prototype js dom:ready listener to replace the body content
         with our template.  This does not need tobe in a layout update XML file         
         we're putting it here for convenience -->

    <cms_index_index>
        <reference name="content">
            <block type="core/text" name="example_handlebars_usage">
                <action method="setText"><text><![CDATA[                    
                    <script type="text/javascript">
                        document.observe("dom:loaded", function() {
                            var source = $('entry-template').innerHTML
                            var template = Handlebars.compile(source);
                            var context = {title: "My New Post", body: "This is my first post!"};
                            var html    = template(context);
                            $($$('.col-main')[0]).update(html);
                        });                    
                    </script>
                ]]></text></action>
            </block>
        </reference>
    </cms_index_index>         
</layout>

Only the first <default/> is actually required to be in a layout update XML file. The two <cms_index_index/> handles are used to

  1. Add a handlebars template to the page

  2. Add a simple init script to the dom:ready event, showing how you might use the library with Prototype JS.

Also, the <default/> node doesn’t need to be in local.xml — you could create you own Magento module, use it to add a custom layout update XML file, and add the addJs call there.

Assuming you theme’s CMS index page has a div with the class .col-main, the above code sample will replace the main content of the homepage with a rendered handlebars template.

If you’re unfamiliar with the Magento layout terms above, you may be interested in my Magento for PHP MVC developers series of blog posts, or my book No Frills Magento Layout.

Copyright © Alan Storm 1975 – 2019 All Rights Reserved

Originally Posted: 7th February 2014