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
