1

For example, native Magento theme-frontend-blank\web\js\navigation-menu.js has such code:

$.widget('mage.navigationMenu', {
    options: {
    ...
        collapsableDropdownTemplate:
            '<script type="text/x-magento-template">' +
                '<li class="level0 level-top more parent">' +
                    '<div class="submenu">' +
                        '<ul><%= elems %></ul>' +
                    '</div>' +
                '</li>' +
            '</script>'

And then they do

        this.collapsableDropdown = $(
            mageTemplate(
                this.options.collapsableDropdownTemplate,
                {elems: this.elemsToCollapseClone}
            )
        );

Is it possible to do something like this

collapsableDropdownTemplate: getTemplate(some_relative_path_to_template) ? instead of

        collapsableDropdownTemplate:
            '<script type="text/x-magento-template">' +
                '<li class="level0 level-top more parent">' +
                    '<div class="submenu">' +
                        '<ul><%= elems %></ul>' +
                    '</div>' +
                '</li>' +
            '</script>'

My template is a little bit bigger and I want to allow frontend developers to modify it.

1

Yes, we can do it.

1) Template selector: the script and template are in one place.

Using text/x-magento-template

vendor/magento/module-shipping/view/adminhtml/templates/order/tracking.phtml

<script id="track_row_template" type="text/x-magento-template">

......

trackingControl.template = mageTemplate('#track_row_template');

2) Require text (I think you need it)

vendor/magento/module-ui/view/base/web/js/grid/columns/thumbnail.js

Define it: text!Magento_Ui/templates/grid/cells/thumbnail/preview.html

define([
    './column',
    'jquery',
    'mage/template',
    'text!Magento_Ui/templates/grid/cells/thumbnail/preview.html',
    'Magento_Ui/js/modal/modal'
], function (Column, $, mageTemplate, thumbnailPreviewTemplate) {

Use it

var modalHtml = mageTemplate(
            thumbnailPreviewTemplate,
            {
                src: this.getOrigSrc(row), alt: this.getAlt(row), link: this.getLink(row),
                linkText: $.mage.__('Go to Details Page')
            }
        );

See here: vendor/magento/module-ui/view/base/web/js/modal/modal.js

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.