Javascript Templates

jquery-widget

basic-jquery-widget.tpl.jst

define([
    'jquery'
], function ($) {
    'use strict';

    $.widget('{{widget_name}}', {
        /**
         * Default options
         */
        options: {

        },

        /**
         * Creates and initializes widget
         * @private
         */
        _create: function() {

        },
    });

    return $.{{widget_name}};
})

jquery-widget-with-ajax-get.tpl.jst

define([
    'jquery'
], function ($) {
    'use strict';

    $.widget('{{widget_name}}', {
        /**
         * Default options
         */
        options: {
            ajaxGetUrl: null,
        },

        /**
         * Creates and initializes widget
         * @private
         */
        _create: function() {

        },

        /**
         * @private
         */
        _ajaxGetRequest: function () {
            const self = this;
            $.ajax({
                url: self.options.ajaxGetUrl
            }).success(function(response){

            })
        }
    });

    return $.{{widget_name}};
})

jquery-widget-with-ajax-post.tpl.jst

define([
    'jquery'
], function ($) {
    'use strict';

    $.widget('{{widget_name}}', {
        /**
         * Default options
         */
        options: {
            ajaxPostUrl: null,
        },

        /**
         * Creates and initializes widget
         * @private
         */
        _create: function() {

        },

        /**
         * @private
         */
        _ajaxPostRequest: function () {
            const self = this;
            $.ajax({
                url: self.options.ajaxPostUrl,
                method: 'post',
                data: { }
            }).success(function(response){

            })
        }
    });

    return $.{{widget_name}};
})

jquery-widget-with-storage-post.tpl.jst

define([
    'jquery',
    'mage/storage'
], function ($, storage) {
    'use strict';

    $.widget('{{widget_name}}', {
        /**
         * Default options
         */
        options: {
            storagePostUrl: null,
        },

        /**
         * Creates and initializes widget
         * @private
         */
        _create: function() {

        },

        /**
         * @private
         */
        _storagePostRequest: function () {
            const self = this;
            let data = { };
            storage.post(self.options.storagePostUrl, JSON.stringify(data), true)
                .done(response => {

                })
                .complete(() => {

                })
                .fail(() => {

                });
        }
    });

    return $.{{widget_name}};
})

ui-component

basic-ui-component.tpl.jst

define([
    'uiComponent'
], function(Component) {
    'use strict';

    return Component.extend({
        defaults: {

        },

        initialize: function () {
            this._super();
        },
    });
});

mixin

jquery-validation-mixin.tpl.jst

define(['jquery'], function($) {
    'use strict';

     return function() {
        $.validator.addMethod(
            'validate-something',
            function(value, element) {

            }
        );
    }
});