Render HTML from locale file in Checkout Extension

Shopify Apps
1

Hello everyone!

I’m working on a Shopify Checkout Extension and have the requirement to render links based on the locale.

My first approach was to just add the string including the HTML for the links to the locale file, like this:

{
  "test": "Our <a target=\"_blank\" href=\"/en/policies/terms-of-service\">General Terms and Conditions</a>"
}

Rendering the string using

{translate('test')}

won’t render the HTML that is included in the string:

marm_alex_0-1678203090832.png
marm_alex_0-1678203090832.png631×177 16.3 KB

Because I write my extension with ReactJS I thought about using the

dangerouslySetInnerHTML

property to achieve this. But the checkout components provided by Shopify don’t use this property and native HTML are not allowed to use, so I must stick with the components provided by Shopify.

I also thought about using the Link-Component (https://shopify.dev/docs/api/checkout-ui-extensions/components/actions/link) but this would only make my code much more complex.

Because instead of writing this

<TextBlock>
  {translate('test')}
</TextBlock>

I would have to write something like this:

<TextBlock>
  {/* need some validation to check for the current locale*/}
  {/* if the locale is EN*/}
  Our <Link to="/en/policies/terms-of-service">General Terms and Conditions</Link>
  {/* or if it is DE*/}
  Unsere <Link to="/en/policies/terms-of-service">AGBs</Link>
</TextBlock>

Does someone know how I can achieve this?

Kind regards

2

@Shopify_77 Is there a follow up on this??

Have you resolved your issue, if so how have you done please?