[Dawn 12.0] Adding a HTML translatable snippet to contact form template.

[t_pynchon]

Hello,
I'm adding a checkbox to the contact form template (contact-form.liquid) in Dawn theme ver 12.0.
The HTML is very simple:

<input type="checkbox" id="agree" required>
<label for="agree">
    Having read the <a href="{{ pages['privacy-policy'].url }}">{{ pages['privacy-policy'].title }}></a>, I accept its terms.
</label>

This snippet works well, no problem at all.

The problems arose when I tried to translate the label content... the part that contains a link with two calls to the page object.

So, to translate that part, I added a key to the en.default.json file, under templates.contact escaping every possible special character. The complete key was like this:

"privacy_accept" : "Having read the <a href=\"{{ pages['privacy-policy'].url }}\">{{ pages['privacy-policy'].title }}><\/a>, I accept its terms."

 Then, in the contact form template I substituted the old code with this one:

<input type="checkbox" id="agree" required>
<label for="agree">
    {{ 'templates.contact.form.privacy_accept' | t }}
</label>

And.... it doesn't work.
It doesn't parse the <a> tag and doesn't call the page object. The output on the page is like this:

I don't understand what I did wrong.
Can you help me?

Thanks

[t_pynchon · Accepted solution]

[UPDATE]

1 - Solving the HTML parsing problem.
The first thing I had to do was to add the suffix "_html" to the key I created in en.default.json. To quote the docs:

"You can add the suffix _html to the description level of your translation key to prevent translated content from being escaped."
This is a link to that section of the docs that talks about this feature.

So the updated key became:

"privacy_accept_html" : "Having read the <a href=\"{{ pages['privacy-policy'].url }}\">{{ pages['privacy-policy'].title }}><\/a>, I accept its terms."

This indeed created an <a> tag.... but the _html suffix didn't seem to parse the two {{  pages[''] }} bits.

2 - Retreive title and url of the policy page from the page object and put them in the snippet
This is the section about "interpolation" that solved my problem

To quote the docs:
"Translation strings can be interpolated, meaning you can include variables in your strings to be dynamically populated when the string is referenced in Liquid."

And also:
"With interpolation, it's possible to pass multiple arguments, separated by a comma (,)."

The solution was to put a placeholder, in the string, that would be populated in the contact form template.

I rewrote the key to be like this:

"privacy_accept_html" : "Having read the <a href=\"{{ privacy_url }}\">{{ privacy_title }}><\/a>, I accept its terms."

creating two placeholders {{ privacy_url  }} and {{ privacy_title }} to be populated during page rendering.

Then on the contact form template I changed the snippet in this way:

<input type="checkbox" id="agree" required>
<label for="agree">
    {{ 'templates.contact.form.privacy_accept_html' | t: policy_url: pages['privacy-policy'].url, policy_title: pages['privacy-policy'].title }}
</label>

This solved the problem.

3 - A last hicup
I suffered a last hicup when I used the theme content editor to add a translation to the string. 
I discovered that while in the theme code editor the string had to be escaped... in the theme content editor you don't have to escape special characters.

Took me a couple of hours to get to destination, but it was an interesting journey 😁