Category: JS

Posted on

How to add custom validation rule in javascript using magento 2?

You can add a new validation rule with the data-validate attribute of the HTML tag using Magento.

By Default Magento mage/validation.js file used to set out-of-the-box custom rules for the Magento. Most of the times custom rules are used in the input tags. though you can apply to form tag, select tag as well as any HTML tag.

Syntax:
$.validator.addMethod(argument1, argument2, argument3) used to define custom validation rule in Magento. Continue reading “How to add custom validation rule in javascript using magento 2?”

Posted on

What is the RequireJS configuration map vs paths vs shim in Magento 2?

Magento 2 used Require JS Configuration properties are the map, paths, shim, mixins, and deps.

In Magento, We have to declare all the Require JS configuration properties inside the requirejs-config.js file.

You can declare the requirejs-config.js file at different AREA Scope like frontend or adminhtml. Continue reading “What is the RequireJS configuration map vs paths vs shim in Magento 2?”

Posted on

How to use different syntax of underscore JS template engine?

Underscore JS template engine used to compile javascript template into such a function to render the content with HTML file.

Underscore JS uses different syntax to render content into HTML format.

Syntax of template method in underscore JS,

_.template(templateString, [settings])

There will be three different syntax underscore js used,

  1. <%= %> Interpolate HTML tag to normal text in result. 
    var htmlContent = _.template('<h2><%= name %></h2>', { name: 'Rakesh' });
//Output will be, Rakesh
  2. <%- %> Keep HTML tag in result. 
    var htmlContent = _.template('<h2><%= name %></h2>', { name: 'Rakesh' });
//Output is, <h2>Rakesh</h2>
  3. <% %> used to define logical conditions for the execute code. 
    <% if (value > 0) { %>
  Execute code here.
<% } %>

    You can use syntax based on your requirement.