Fluent Commerce Docs

Docs

Search

Help & Feedback

Home
Essential Knowledge
By Type
Building Blocks
APIs
Releases

Content in this track:

Extending the UX Framework with the Component SDK

Building Custom Components with the Component SDK

Setting Up Your Component SDK Project

Client Scenario: Building a Product Availability Map

Creating and Registering a Custom Component

Configuring Custom Components via the Manifest

Accessing User and Location Context with the useAuth Hook

Integrating a Third-Party Map Component

Adding Nested (Child) Components

Accessing Page Query Data

Style and Theme Your Component

Make Your Component Interactive

Configuring Components with Settings

Configuring Components with Dynamic Attributes

Extending Forms with Custom Field Components

Implementing a Custom Form Field

Enhance Your Custom Fields: Leveraging Existing Components from the Registry

Fetching Data with the useQuery Hook

Completing the Custom Form Field: Outputting the Result

Creating Custom Template Helpers

Unit Testing Custom Components

Deploying a Custom Component Plugin

End Of Track

Content in this track: Creating Custom Template Helpers

Essential knowledge

Authors:

Cameron Johns, Cille Schliebitz, Anita Gu

Changed on:

3 Feb 2025

Overview

This lesson explores the creation and registration of custom template helpers within the Component SDK. Template helpers are powerful utilities that can be used within Manifest documents for tasks like styling, formatting, and calculations. We'll demonstrate how to create a custom template helper, in this case, one that bolds entity references, showcasing how to leverage the

`TemplateRegistry`

and its utility methods for generating formatted HTML.

Key points

Template Helpers: Template helpers are reusable functions that can be called within Manifest documents to perform various operations.
Use Cases: Template helpers can be used for styling, formatting, calculations, and other data transformations.
```
`TemplateRegistry`
```
: The
```
`TemplateRegistry`
```
is used to register custom template helpers, making them available for use in Manifests.
HTML Formatting: The lesson demonstrates creating a template helper that bolds entity references using
```
`TemplateRegistry`
```
utility methods for formatted HTML generation.
Customizability: Custom template helpers extend the functionality of Manifests, allowing for greater flexibility and control over data presentation.

Another useful feature of the Component SDK is the ability to create custom helpers for the Manifest document. The UX Framework provides a number of these as standard, but you can also create and register your own.

You can use them for various things such as:

Styling
Formatting
Calculations

Example:

Let's say that you would like to style all entity references displayed in a specific style, such as bold.

You can create a "bold" template like this:

No alt provided

HTML Formatting in Template Helpers

The

`TemplateRegistry`

comes with a handy utility method for returning formatted html, and prevents automatic escaping.

Cameron Johns

Cameron Johns

Contributors:

Knowledge Tracks Related To This Topic

Component SDK

Extending the UX Framework with the Component SDK

Building Custom Components with the Component SDK

Setting Up Your Component SDK Project

Client Scenario: Building a Product Availability Map

Creating and Registering a Custom Component

Configuring Custom Components via the Manifest

Accessing User and Location Context with the useAuth Hook

Integrating a Third-Party Map Component

Adding Nested (Child) Components

Accessing Page Query Data

Style and Theme Your Component

Make Your Component Interactive

Configuring Components with Settings

Configuring Components with Dynamic Attributes

Extending Forms with Custom Field Components

Implementing a Custom Form Field

Enhance Your Custom Fields: Leveraging Existing Components from the Registry

Fetching Data with the useQuery Hook

Completing the Custom Form Field: Outputting the Result

Creating Custom Template Helpers

Unit Testing Custom Components

Deploying a Custom Component Plugin

Copyright © 2025 Fluent Retail Pty Ltd (trading as Fluent Commerce). All rights reserved. No materials on this docs.fluentcommerce.com site may be used in any way and/or for any purpose without prior written authorisation from Fluent Commerce. Current customers and partners shall use these materials strictly in accordance with the terms and conditions of their written agreements with Fluent Commerce or its affiliates.