Back to Top

How To Use Handlebar.js In Opencart

Updated 31 March 2016

Today we will learn how we can use Handlebar.js in opencart for templating. By using Handlebar.js we not need to append the html content in DOM each time. Before using Handlebar.js you have to download this from handlebar site

After downloading the js file, add that js file into your .tpl file as mentioned below:


After including that handlebar.js file, you have to write your html content within a <script id=”unique_id” type=”text/x-handlebars-template”> HTML CONTENT </script> tag like this:


Start your headless eCommerce
Find out More

In above screenshot we write our html content within the <script> tag.

By doing this we not need to create html content each time(like we do normally in ajax success callback method). Here we use {{customer_firstname}} and {{customer_lastname}} handlebar expression these are the values that i will map after performing some task like ajax call.


In the above screenshot i have used an object named customer_details with customer firstname and lastname. So Before mapping the html content with the values, get the pre-created html content with the help of unique_id selector as in above screenshot “#customer_data” then pass the html to Handlebars.compale() method.

After this map the customer_details object with the compiled template.

If you will console the html variable,  the output will be like this:


. . .

Leave a Comment

Your email address will not be published. Required fields are marked*

Be the first to comment.

Back to Top

Message Sent!

If you have more details or questions, you can reply to the received confirmation email.

Back to Home