Overridable components

Flex Grid Component

Thumbnail Title

The title/caption displayed at the bottom of each thumbnail in the grid view.

Note: to use this JS SDK method, "Display information on tiles" must be enabled in the Flex Grid component.

Key

FlexGridTileMediaInfo

Parameters

Key	Description
tile	Object, information about tile
product	Object, all available information about UGC item
defaultText	Text that is displayed in tile info by default (if user info is not available it will be caption or translated caption if this feature is used)

Text-only Media in tiles

Representation of text-only content in 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)

Content Details

The Media info, displayed on the right hand side in the details modal view (right under the media or conversion units in mobile version).

Key

FlexGridDetailsMediaInfo

Parameters

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

Expanded Image Media

The image media, displayed on the left hand side in the details modal view (on the top in mobile version).

Key

FlexGridDetailsMediaImage

Parameters

Key	Description
product	Object, all available information about UGC item.
alt	String, pre-calculated alt text.
src	String, direct URL to the the image in its original size.

Expanded Video Media

The video media, displayed on the left hand side in the details modal view (on the top in mobile version).

Key

FlexGridDetailsMediaVideo

Parameters

Key	Description
product	Object, all available information about UGC item.
alt	String, pre-calculated alt text.
src	String, direct URL to the the original video.

Expanded Text-only Media

The text-only media, displayed on the left hand side in the details modal view (on the top in mobile version).

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)

Expanded Media (Any)

Any media, displayed on the left hand side in the details modal view (on the top in mobile version).

Note: this allows to render any media on left-hand side from scratch, but may require more efforts - in a lot of cases it should be easier to use FlexGridDetailsMediaImage, FlexGridDetailsMediaVideo, FlexGridDetailsMediaTextOnly.

Key

FlexGridDetailsMediaAny

Parameters

Key	Description
product	Object, all available information about UGC item.

FlexGrid Social Feed

Item

Key

FlexGridFeedItem

Parameters

Key	Description
tile	Object, information about tile
product	Object, all available information about UGC item

Item header

Header above media

Key

FlexGridFeedItemHeader

Parameters

Key	Description
product	Object, all available information about UGC item.

Text only media

The text-only media displayed in the feed

Key

FlexGridFeedMediaTextOnly

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)

Image media

The image media displayed in the feed

Key

FlexGridFeedMediaImage

Parameters

Key	Description
product	Object, all available information about UGC item.
alt	String, pre-calculated alt text.
src	String, direct URL to the the image in its original size.

Video media

The video media displayed in the feed

Key

FlexGridFeedMediaVideo

Parameters

Key	Description
product	Object, all available information about UGC item.
alt	String, pre-calculated alt text.
src	String, direct URL to the the original video.

Any media

Any media displayed in the feed

Key

FlexGridFeedMediaAny

Parameters

Key	Description
product	Object, all available information about UGC item.
onDoubleClick	Callable, vote the feed item on double click
openShopping	Callable, opens shopping overlay

"Shop now" bar

A clickable bar below the media is displayed when the content has conversion units

Key

FlexGridFeedShopBar

Parameters

Key	Description
product	Object, all available information about UGC item.
onClick	Callable, opens shopping overlay
label	String, label which displayed in bar

Buttons pane

Buttons pane below media

Key

FlexGridFeedButtonsPane

Parameters

Key	Description
product	Object, all available information about UGC item.
onShop	Callable, opens shopping overlay
onShare	Callable, opens sharing overlay
onVote	Callable, vote the feed item
voteResult	Object, result of voting

Media info

Username and media caption below media

Key

FlexGridFeedMediaInfo

Parameters

Key	Description
product	Object, all available information about UGC item.

Questions

Product result

Content which is displayed on Product results (Show a product, Show preview of a web page, Show a product from conversion unit library).

Key

QuestionsProduct

Parameters

Key	Description
result	Object, information about result
metadata	Object, information from Product fields, Conversion unit or unfurl from a link

Examples

Assuming you want to replace the caption from a Flex Grid component tile to display the Author's name in capital letters, but only if the user comes from Instagram.

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

window.wyng['_WYNG_ID_'].setCustomRenderer({
    section: `FlexGridTileMediaInfo`,
    componentId: '[YOUR_COMPONENT_ID]',
    shouldOverride: params => params.product.content.social_platform === 'instagram',
    render: params => `<p>Instagram Media from @${params.product.content.author.profile.username.toUpperCase()}.</p>`,
})

Assuming you want to replace domain URL for each conversion unit and their render.

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

window.wyng['_WYNG_ID_'].setCustomRenderer({
    section: `ConversionUnitGallery`,
    componentId: '[YOUR_COMPONENT_ID]',
    render: params => `<div>${params.conversionUnits.map(unit => <a href={unit.click_through_url}>{unit.name}</a>)}</div>`,
    middleware: (params) => {
        const newUnits = params.conversionUnits.map(u => ({
            ...u,
            click_through_url: u.click_through_url.replace('conversion-unit.domain', 'new.domain'),
        }));

        return { conversionUnits: newUnits }
    }

})

Assuming you want to replace product result view.

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

window.wyng['_WYNG_ID_'].setCustomRenderer({
    section: `QuestionsProduct`,
    componentId: '[YOUR_COMPONENT_ID]',
    render: params => `<a href="${params.metadata.url}"><img src="${params.metadata.image}" /></a>`,
})