spz-text

When to use

spz-text renders internationalized text by looking up translations and substituting placeholder values. It supports text slots and currency slots.

<spz-text layout="container" translationid="welcome_message"></spz-text>

If the translation contains {name}, you can supply the value via slot-text-name:

<spz-text
  layout="container"
  translationid="greeting"
  slot-text-name="World">
</spz-text>

Currency slots render an <spz-currency> component for proper currency formatting:

<spz-text
  layout="container"
  translationid="price_label"
  slot-currency-price="29.99">
</spz-text>

Attribute	Description	Type	Required
translationid	Translation key used for i18n lookup. The component resolves this against the current section's settings	`string`	No
slot-text-*	Text slot attributes. Replace `*` with the placeholder name. Example: `slot-text-name="John"` replaces `{name}` in the translation	`string`	No
slot-currency-*	Currency slot attributes. Replace `*` with the placeholder name. Example: `slot-currency-price="9.99"` renders `{price}` as an `<spz-currency>` element	`string`	No

The component fetches locale data from the locale service.
It looks up the translation using the pattern sections.{sectionId}.settings.{translationid}, where sectionId comes from the nearest parent element with a data-section-id attribute.
Placeholders in the form {name} are replaced with the corresponding slot-text-name or slot-currency-name attribute values.
Currency slots are wrapped in <spz-currency> tags for proper formatting.