Can not add string to underscore template using knockout

[DanielRuf]

Preconditions

1. Magento 2.4-develop

Steps to reproduce

1. create custom theme based on Luma
2. extend Magento_Theme/frontend/web/templates/breadcrumbs.html
3. add string to breadcrumbs.html using knockout

<ul class="items">
    <!-- ko i18n: 'You are here:' --><!-- /ko -->
    <% _.each(breadcrumbs, function(crumb) { %>
        <li class="item <%- crumb.name %>">
            <% if (crumb.link) { %>
            <a href="<%= crumb.link %>" title="<%- crumb.title %>"><%- crumb.label %></a>
            <% } else if (crumb.last) { %>
            <strong><%- crumb.label %></strong>
            <% } else { %>
            <%- crumb.label %>
            <% } %>
        </li>
    <% }); %>
    </ul>

Expected result

1. the string "You are here:"
   

Actual result

1. No string shown
   

[magento-engcom-team]

Hi @DanielRuf. Thank you for your report.
To help us process this issue please make sure that you provided the following information:

• Summary of the issue
• Information on your environment
• Steps to reproduce
• Expected and actual results

Please make sure that the issue is reproducible on the vanilla Magento instance following Steps to reproduce. To deploy vanilla Magento instance on our environment, please, add a comment to the issue:

@magento-engcom-team give me {$VERSION} instance

where {$VERSION} is version tags (starting from 2.2.0+) or develop branches (2.2-develop +).
For more details, please, review the Magento Contributor Assistant documentation.

@DanielRuf do you confirm that you was able to reproduce the issue on vanilla Magento instance following steps to reproduce?

• yes
• no

[DanielRuf]

It seems only <%= jQuery.mage.__('You are here:') %> works. <%= $.mage.__('You are here:') %> does not.

[ghost]

Hi @DanielRuf I'm not able to reproduce by following steps you described, in my case i ovveride
breadcrumbs.phtml with this code

<?php
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

// @codingStandardsIgnoreFile

?>
<?php if ($crumbs && is_array($crumbs)) : ?>
    <div class="breadcrumbs">
        <ul class="items">
            <!-- ko i18n: 'You are here:' --><!-- /ko -->
            <?php foreach ($crumbs as $crumbName => $crumbInfo) : ?>
                <li class="item <?= /* @escapeNotVerified */ $crumbName ?>">
                    <?php if ($crumbInfo['link']) : ?>
                        <a href="<?= /* @escapeNotVerified */ $crumbInfo['link'] ?>" title="<?= $block->escapeHtml($crumbInfo['title']) ?>"><?= $block->escapeHtml($crumbInfo['label']) ?></a>
                    <?php elseif ($crumbInfo['last']) : ?>
                        <strong><?= $block->escapeHtml($crumbInfo['label']) ?></strong>
                    <?php else: ?>
                        <?= $block->escapeHtml($crumbInfo['label']) ?>
                    <?php endif; ?>
                </li>
            <?php endforeach; ?>
        </ul>
    </div>
<?php endif; ?>

[DanielRuf]

breadcrumbs.phtml with this code

This is wrong, I mean breadcrumbs.html, please read again.

[DanielRuf]

Magento_Theme/frontend/web/templates/breadcrumbs.html

[DanielRuf]

<ul class="items">
    <!-- ko i18n: 'You are here:' --><!-- /ko -->
    <% _.each(breadcrumbs, function(crumb) { %>
        <li class="item <%- crumb.name %>">
            <% if (crumb.link) { %>
            <a href="<%= crumb.link %>" title="<%- crumb.title %>"><%- crumb.label %></a>
            <% } else if (crumb.last) { %>
            <strong><%- crumb.label %></strong>
            <% } else { %>
            <%- crumb.label %>
            <% } %>
        </li>
    <% }); %>
    </ul>

[DanielRuf]

#18012 (comment)

[ghost]

@DanielRuf , thank you for your report.
We've acknowledged the issue and added to our backlog.

[jayankaghosh]

Since Magento_Theme/frontend/web/templates/breadcrumbs.html is an underscore template, wouldn't knockout bindings not work anyhow here?

And <%= $.mage.__('You are here:') %> doesn't work because the variable $ wasn't passed to the underscore templating engine while parsing the breadcrumbs template.

<%= jQuery.mage.__('You are here:') %> works since the variable jQuery is defined in the window object.

Am I missing something here?

[DanielRuf]

And <%= $.mage.__('You are here:') %> doesn't work because the variable $ wasn't passed to the underscore templating engine while parsing the breadcrumbs template.

<%= jQuery.mage.__('You are here:') %> works since the variable jQuery is defined in the window object.

Am I missing something here?

Exactly.

Since Magento_Theme/frontend/web/templates/breadcrumbs.html is an underscore template, wouldn't knockout bindings not work anyhow here?

Not sure how it should look like but the docs are not clear here.
See https://devdocs.magento.com/guides/v2.0/frontend-dev-guide/translations/translate_theory.html

[jayankaghosh]

What could be done is, under the underscore object, an i18n method could be introduced, so that translations would work if we wrote something like <%= _.i18n('You are here:') %>

[m2-assistant]

Hi @engcom-Charlie. Thank you for working on this issue.
Looks like this issue is already verified and confirmed. But if you want to validate it one more time, please, go though the following instruction:

• 1. Add/Edit Component: XXXXX label(s) to the ticket, indicating the components it may be related to.

• 2. Verify that the issue is reproducible on 2.4-develop branch

  Details

  - Add the comment @magento give me 2.4-develop instance to deploy test instance on Magento infrastructure.
  - If the issue is reproducible on 2.4-develop branch, please, add the label Reproduced on 2.4.x.
  - If the issue is not reproducible, add your comment that issue is not reproducible and close the issue and stop verification process here!

• 3. If the issue is not relevant or is not reproducible any more, feel free to close it.

---

• Join Magento Community Engineering Slack and ask your questions in #github channel.

[magento-engcom-team]

✅ Confirmed by @engcom-Charlie
Thank you for verifying the issue. Based on the provided information internal tickets MC-30107 were created

Issue Available: @engcom-Charlie, You will be automatically unassigned. Contributors/Maintainers can claim this issue to continue. To reclaim and continue work, reassign the ticket to yourself.

[m2-assistant]

Hi @sergiy-v. Thank you for working on this issue.
Looks like this issue is already verified and confirmed. But if you want to validate it one more time, please, go though the following instruction:

• 1. Add/Edit Component: XXXXX label(s) to the ticket, indicating the components it may be related to.

• 2. Verify that the issue is reproducible on 2.4-develop branch

  Details

  - Add the comment @magento give me 2.4-develop instance to deploy test instance on Magento infrastructure.
  - If the issue is reproducible on 2.4-develop branch, please, add the label Reproduced on 2.4.x.
  - If the issue is not reproducible, add your comment that issue is not reproducible and close the issue and stop verification process here!

• 3. If the issue is not relevant or is not reproducible any more, feel free to close it.

---

• Join Magento Community Engineering Slack and ask your questions in #github channel.

[slavvka]

Hi @DanielRuf. Thank you for your report.
The issue has been fixed in #26435 by @sergiy-v in 2.4-develop branch
Related commit(s):

• 819c3f255224d7e2d04e90bcd47bb410a2eee23b
• 064ee0ef6d59ca3fb27802d74609377b4816e869
• 3a19f179309633f3c12ee8e039e5dd5b2d513624
• c32b64377fc06771f12e74b4add2f32c8fa0a555
• e26bbc17188b94b6c8bac770d3d4586576f28267
• 69d07c13b394bdf367048ba25dbf922f7cc4f1b6
• 58adcc59e675430e890ab5d18f675e90715646a1

The fix will be available with the upcoming 2.4.0 release.