How does translation work in HTML BLOCKs

I have created an HTML BLOCK and when a user changes language i want the word to be translated as well like the rest of the system. I appreciate your sharing experiences and support

<div id="buttons-container">
    <div class="custom-block">
        <a href="/app/sales-invoice/new-sales-invoice" class="tile-button sale">
            <div class="tile-image"></div>
            <div class="tile-text">Selling</div>
        </a>
    </div>
</div>

Try the code below, and add the translation of “Selling” in the Translation Doctype.

{{ _('Selling') }}

i tried it but it seems not working, fyi i used many letters that already avalable in arabic csv of erpnext

let elements = root_element.querySelectorAll('*:not(script):not(style)');

elements.forEach(function(element) {
    if (element.childNodes.length) {
        element.childNodes.forEach(function(child) {
            if (child.nodeType === 3) {
                let textContent = child.textContent.trim();
                let regex = /\{\{\s*_\("(.+?)"\)\s*\}\}/g;
                let matches = regex.exec(textContent);
                if (matches && matches[1]) {
                    let translatableText = matches[1];
                    let translatedText = __(translatableText);
                    child.textContent = textContent.replace(matches[0], translatedText);
                }
            }
        });
    }
});

add this code in javascript section and save the form

1 Like