If you’re wanting to add a list of links from a custom field made up of a list of Call to Actions (for example, a list of ways to contact someone on a Professional card), you’ll need to use a formatter to extract an array of items from the list of Call to Actions. Follow the instructions below!
1. Override the theme to add a new formatter. When you override the theme, select formatters.js and add the below function to your static/js/formatters.js file
static listCTA(list) {
if(!list) {
return null;
}
let names = [];
list.forEach(element => names.push(`<a href="${Formatter.generateCTAFieldTypeLink(element)}">${element.label}</a>`));
return names;
}
Since you’re now shadowing this file, just be careful in future theme upgrades to not overwrite this.
2. Use the formatter in a ‘list’ section on your card.
listItems: Formatter.listCTA(profile.c_contactLinks)
3. Update the handlebars template to display the HTML
To allow the HTML to display on the page, we need to ensure the Handlebars template treats it correctly. We do this by ensuring the element is surrounded by three braces {{{ }}}
Specifically for the listItems field ensure, it looks like the following:
<ul class="HitchhikerProfessionalStandard-list">
{{#each card.listItems}}
<li class="HitchhikerProfessionalStandard-listItem">{{{this}}}</li>
{{/each}}
</ul>
The end result will look like the below:
