Reading list Switch to dark mode

    How to write JavaScript template in Magento2

    Updated 18 January 2023

    How to write JavaScript template in Magento2 :

    Magento 2 JavaScript Template is known as a standard template to help 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.

    1. 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);
    1. 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:

    Searching for an experienced
    Magento 2 Company ?
    Find out More
    require([
        "jquery",
        'mage/template',
        "mage/mage"By following all 5 above steps in this Magento 2 JavaScript tutorial, you absolutely create a Magento 2 Javascript template on your own. Please Like, Share or Comment your thought if you have any issues. We are willing to discuss with you
    ], 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);
            });
        });
    });
    1. Now you will see a “button” and on click on this button customer data will be displayed as shown in the screenshot
      FlQRBKD

    *Note: Input data must be JSON type.

    In this script, I use the .each () loop to retrieve data from the JavaScript file and use <ul>, <li>  tags in order to build a template.

    By following all above steps in this Magento 2 JavaScript tutorial, you absolutely create a Magento 2 Javascript template on your own. Please Like, Share or Comment your thought if you have any issues. We are willing to discuss with you.

    How to write JavaScript template in Magento2

    You can also check :

    https://webkul.com/blog/how-to-use-javascript-in-magento2/

    https://devdocs.magento.com/guides/v2.3/ui_comp_guide/concepts/knockout-bindings.html

    . . .

    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