Text Builders

The SDK allows advanced users to override text building of some components with their own custom solution. This approach allows to avoid full overriding of component rendering (which can be hard), but just make some corrections in text.

This is achieved through the setCustomTextBuilder method. It accepts a configuration object with the following parameters:

Key	Type	Description
section	String - required	The key of the section that needs to be replaced (see the list of overridable sections below).
componentId	String - required	The ID of the experience component which the section belongs to
build	Function - required	The custom text building function. It accepts predefined parameters (see the list of overridable sections below) and should return a string.
shouldOverride	Function	A function that accepts the same parameters as build and must return a Boolean. If it returns true the custom text will be displayed.

Overridable text components

FlexGrid Gallery

Text-only Media in tiles

Text which is displayed on text-only content tiles.

Key

FlexGridTileMediaTextOnly

Parameters

Key	Description
tile	Object, information about tile
product	Object, all available information about UGC item
defaultText	Text of caption (it's translated if this feature is used)

Note: see more info in Complex parameters definition section below.

Text-only Media in details view

Controls building of a Text only UGC text in the details view.

Key

FlexGridDetailsMediaTextOnly

Parameters

Key	Description
product	Object, all available information about UGC item
defaultText	Text of caption (it's translated if this feature is used)

Note: see more info in Complex parameters definition section below.

Conversion units in details view

The conversion units, displayed on the right hand side in the details modal view.

Key

ConversionUnitGallery

Parameters

Key	Description
conversionUnits	Array of conversion-unit objects

Note: see more info in Complex parameters definition section below.

Examples

Assuming you want to change text in text-only media in FlexGrid tile to display all text in capital letters, but only in big tiles and if the content comes from Twitter.

Here's what would go in the experience's custom JS section:

window.wyng['_WYNG_ID_'].setCustomTextBuilder({
    section: `FlexGridTileMediaTextOnly`,
    componentId: '[YOUR_COMPONENT_ID]',
    shouldOverride: ({ tile, product }) => product.content.social_platform === 'twitter' && tile.isBigTile,
    build: ({ product }) => `${product.content.text.toUpperCase()}`,
})