Localize widget interface text without confusing it with editor content

Znode 10
Written By

Keep an editor's saved heading separate from a translated action label and load the required interface catalogs in Page Builder and Webstore.

Znode 10RecipeFoundationGCG engineering guide
In this guide
  1. widget configuration
  2. editor content
  3. translation catalog
  4. preview runtime
  5. storefront runtime
Content travels with the widget configuration; interface strings resolve from the catalog in each runtime.

Separate two kinds of text

Keep editor content and fixed interface text separate. A resource-card heading such as 'Installation manuals' is saved page content. Its 'Read more' action is interface text shared by every instance of that card.

The helper keeps heading and href from the saved props and asks Translate for resourceCard.readMore. Bind Translate to the installed SDK's translation provider in the component that builds these props. The function signature is an example application interface, not the name of a Znode translation API.

resourceCard.ts typescript

type Translate = (key: string) => string;
type ResourceCardProps = { heading: string; href: string; t: Translate };

export function resourceCardLabel({ heading, href, t }: ResourceCardProps) {
  return { heading, href, actionLabel: t('resourceCard.readMore') };
}

// en-US: resourceCard.readMore = 'Read more'
// fr-CA: resourceCard.readMore = 'Lire la suite'

With a French provider, the actionLabel becomes 'Lire la suite'. The saved heading remains exactly what the editor supplied. To translate that heading, use the page's localized content workflow rather than a fixed interface translation key.

Keep catalog scope explicit

Locate the catalogs loaded by Page Builder preview and by Webstore. Add resourceCard.readMore to every catalog that renders the card, using the same key in each locale. A shared component does not guarantee the two applications load the same translations.

Decide how a missing key appears during development, then verify that the selected locale reaches the provider. Keep href validation and any protected-document authorization in the rendering and request paths that already own those decisions.

Verify both runtimes

Render a configured heading and action in en-US and fr-CA in both Page Builder preview and Webstore. Reopen the saved configuration to confirm the heading was preserved, and remove one translation in a development fixture to check the chosen fallback.

Check a long translated label on a narrow layout and activate the link with a keyboard. The final result should combine editor-controlled content with the correct interface text for the active locale.

References and further reading

Bring your next engineering question.

Need a Page Builder widget reviewed across preview and storefront?

Explore how GCG can help

Independent guidance from GCG. Znode is a trademark of its owner. Examples use fictional data and are not official platform documentation. Suggest a correction.

Previous

Recover from a timed-out write without creating duplicates
Next

Test configurable products and add-ons with real published fixtures