How To Use Handlebar.js In Opencart
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 http://handlebarsjs.com/
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:
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:
