Show More / Less Not Populating in Answers Cards

Search
1

Hello,

I’m trying to implement the “Show More / Less” property for my client’s frontend Answers cards and it doesn’t seem to be showing correctly. If you could check the code I have attached that would be great:

{{> cards/card_component componentName=‘documentstandard-override’ }}

class documentstandard_overrideCardComponent extends BaseCard[‘documentstandard-override’] {
constructor(config = {}, systemConfig = {}) {
super(config, systemConfig);
}

/**

  • This returns an object that will be called card
  • in the template. Put all mapping logic here.
  • param profile profile of the entity in the card
    */
    dataForRender(profile) {
    let detailsData = ‘’;
    if (profile?.d_highlightedFields?.s_snippet) {
    const { value, matchedSubstrings } = profile.d_highlightedFields.s_snippet;
    detailsData = Formatter.highlightField(value, matchedSubstrings);
    } else if (profile.s_snippet) {
    detailsData = profile.s_snippet;
    }
return {
  title: profile.name, // The header text of the card
  url: profile.website || profile.landingPageUrl, // If the card title is a clickable link, set URL here
  target: '_top', // If the title's URL should open in a new tab, etc.
  // image: '', // The URL of the image to display on the card
  // altText: '', // The alternate text for the image
  titleEventOptions: this.addDefaultEventOptions(),
  subtitle: profile.externalArticleUpdateDate ? `Last Updated on ${profile.externalArticleUpdateDate}` : '', // The sub-header text of the card
  details: detailsData, // The text in the body of the card
  showMoreDetails: {
    showMoreLimit: 200, // Character count limit
    showMoreText: 'Show more', // Label when toggle will show truncated text
    showLessText: 'Show less' // Label when toggle will hide truncated text
  },
  // The primary CTA of the card
  CTA1: {
    label: (profile.c_primaryCTA ? profile.c_primaryCTA.label : null), // The CTA's label
    iconName: 'chevron', // The icon to use for the CTA
    url: Formatter.generateCTAFieldTypeLink(profile.c_primaryCTA), // The URL a user will be directed to when clicking
    target: '_top', // Where the new URL will be opened
    eventType: 'CTA_CLICK', // Type of Analytics event fired when clicking the CTA
    eventOptions: this.addDefaultEventOptions(),
    // ariaLabel: '', // Accessible text providing a descriptive label for the CTA
  },
  // The secondary CTA of the card
  CTA2: {
    label: (profile.c_secondaryCTA ? profile.c_secondaryCTA.label : null),
    iconName: 'chevron',
    url: Formatter.generateCTAFieldTypeLink(profile.c_secondaryCTA),
    target: '_top',
    eventType: 'CTA_CLICK',
    eventOptions: this.addDefaultEventOptions(),
    // ariaLabel: '',
  }
};

}

/**

  • The template to render
  • returns {string}
  • override
    */
    static defaultTemplateName (config) {
    return ‘cards/documentstandard-override’;
    }
    }

ANSWERS.registerTemplate(
‘cards/documentstandard-override’,
{{{stringifyPartial (read ‘cards/documentstandard-override/template’) }}}
);
ANSWERS.registerComponentType(documentstandard_overrideCardComponent);

Any help would be greatly appreciated here!

Thank you,