How to Use UnderscoreJS as a Templating Engine

UnderscoreJS-Magento

Underscore JS is a compact, yet wonderful JS library that “provides a whole mess of useful functional programming helpers without extending any built-in objects“. The best part is, Underscore JS comes out-of-the-box, with Magento 2.x. In this tutorial, we’re going to see how we can use Underscore JS as a templating engine, within Magento 2.

It is advisable to understand what jQuery widgets are and how to instantiate widgets the Magento way first before continuing with this tutorial.

Task

Display products in a template being fetched dynamically, using AJAX.

Solution

Define our block file

app/code/Codilar/HelloWorld/Block/Underscore.php
<?php
/**
 *
 * @package     magento2
 * @author      Codilar Technologies
 * @license     https://opensource.org/licenses/OSL-3.0 Open Software License v. 3.0 (OSL-3.0)
 * @link        https://www.codilar.com/
 */

namespace Codilar\HelloWorld\Block;

class Underscore extends Template
{
    /**
     * @return string
     */
    public function getUnderscoreTemplate() {
        return "Codilar_HelloWorld/template/underscore.html";
    }
}

In our template file, define our widget

app/code/Codilar/HelloWorld/view/frontend/templates/underscore.phtml
<?php
/* @var \Codilar\BoughtBefore\Block\Underscore $block */
?>
<div class="template_container"></div>

<script type="text/x-magento-init">
    {
        ".template_container" : {
            "myProductWidget" : {
                "template" : "<?= $block->getUnderscoreTemplate() ?>"
            }
        }
    }
</script>

Next, we define our JS file in the requirejs-config

app/code/Codilar/HelloWorld/view/frontend/requirejs-config.js
var config = {
    map: {
        '*': {
            'myProductWidget':  'Codilar_HelloWorld/js/widget'
        }
    }
};

And finally, we define our JS file containing the widget

app/code/Codilar/HelloWorld/view/frontend/web/js/widget.js
require([
    'jquery',
    'underscore',
    'mage/url'
], function ($, _, urlBuilder) {
    var widget = {
        /* default values. Can be overridden when initializing the widget */
        options: {
            template: ""
        },
        _create: function () {
            this._initTemplate();
        },
        _initTemplate: function () {
            require("text!"+this.options.template, function (template) {
                this.showProducts(_.template(template));
            }.bind(this));
        },
        showProducts: function (template) {
            var self = this;
            $.ajax({
                url: urlBuilder.build("underscore/products/get"),
                method: "GET",
                success: function (products) {
                    self.element.html(template(products));
                }
            });}
    };

    return $.widget('codilar.myProductWidget', widget);
});

And then in our app/code/codilar/HelloWorld/view/frontend/web/template/underscore.html file, we write the actual underscore template

<% if (products.length > 0 ) { %>
    <% products.forEach (function (product) { %>
        <a href="<%= product.url %>"><%= product.name %></a>
    <% }); %>
<% } %>

For documentation on how to build Underscore templates, check this link out

NOTE: The app/code/Codilar/HelloWorld/Controller/Products/Get.php controller must be created on your own for this tutorial to work. Do have a look at the Hello World module to understand how to make routes and Controllers.

Well that’s all. Thank’s a lot for sticking through. Do let us know in the comment section below about what you want our next Magento tutorial blog to be about.

***

Previous Tutorials

What is x-magento-init?

What is KnockoutJS and how is it relevant in Magento 2?

Author



Leave a Reply

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

Recent Posts

Ecommerce roundup Oct

eCommerce Roundup October 2024

Halloween is just round the corner and businesses are creatively cashing in on the festive spirit with innovative strategies to

Join 40,000+ Magento pros who receive eCommerce insights, tips, and best practices.

Request PWA Demo