How to write JavaScript template in Magento 2

In this guide, you’ll learn how to create and use JavaScript templates in Magento 2 to enhance frontend customization and dynamic functionality.

Magento 2 JavaScript Template is known as a standard template to help Magento developers to quickly make HTML code that is repeated many times while only data is different.

Therefore, creating a template will help developers to write code snippets quicker, save more time than before.

If want to append a clone of your html code on any event with different value then it will be the best practice to use JavaScript template.

So in this post, I will show you a Magento 2 JavaScript tutorial: the best way to create a JavaScript template. Follow the steps below and quickly create a template for your own.

Include JavaScript template to your phtml file –

<button id="customer-button">
    <span>Click Here to get customer data</span>
</button>
<div id ="customer-container">
    <script id="customer-template" type="text/x-magento-template">
        <ul id="<%- data.id %>">
            <li>
                Name : <%- data.name %>
            </li>
            <li>
                Salary : <%- data.salary %>
            </li>
            <li>
                Location : <%- data.location %>
            </li>
        </ul>
    </script>
</div>

2. Prepare Customer Data for setting in javascript template –

The data sample can be as below:

$customerData = [
    ['name' => "John Doe",
    'salary' => "1000 USD",
    'location' => "California"],
    ['name' => "Jane Doe",
    'salary' => "800 USD",
    'location' => "Florida"],
    ['name' => "Bob Doe",
    'salary' => "500 USD",
    'location' => "California"],
];
$jsonCustomerData = $this->helper('Magento\Framework\Json\Helper\Data')->jsonEncode($customerData);

3. Write javascript code for appending data in your js template

In the web/js folder, you create the jstemplate.js file and use the code below:

require([
    "jquery",
    'mage/template',
    "mage/mage"
], function ($, mageTemplate, alert){
    $('#customer-button').click(function(){
        $.each($.parseJSON('<?php echo $jsonCustomerData ?>'), function() {
            console.log('sss');
            var progressTmpl = mageTemplate('#customer-template'),
                      tmpl;
            tmpl = progressTmpl({
                data: {
                    name: this['name'],
                    salary: this['salary'],
                    location: this['location'],
                }
            });
            $('#customer-container').after(tmpl);
        });
    });
});