Add Translations outside of component.js Files

Search Best Practices - Search Front-End
1

Hey Team we’re trying to clean up some of the repetitive code in our codebase and move it to helper functions so it can be reused. However we’re coming across an issue with any string that uses ‘translateJS’ since that isn’t valid javascript.

For example we have a function that sets a CTA text depending on the entity type. See below:

In article_tile/component.js:

function getCtaText(profile) {
      // set the ctaText
      if (profile.c_answersCardCTAText) {
        return profile.c_answersCardCTAText;
      } else if (profile.type.includes('whitepaper')) {
        return {{ translateJS phrase='Read Now' context='Phrase is a Call to Action' }};
      } else if (profile.type.includes('event')) {
        if (profile.c_embedVideoURL) {
          return {{ translateJS phrase='Watch Now' context='Phrase is a Call to Action' }};
        } else {
          return {{ translateJS phrase='Register Now' context='Phrase is a Call to Action' }};
        }
      } else if (profile.type.includes('caseStudy')) {
        if (profile.c_filterCaseStudyType && 
            profile.c_filterCaseStudyType.includes("Webinar")) {
          return {{ translateJS phrase='Watch Now' context='Phrase is a Call to Action' }};
        } else if (profile.c_filterCaseStudyType && 
            profile.c_filterCaseStudyType.includes("Testimonial")) {
          return {{ translateJS phrase='Read Testimonial' context='Phrase is a Call to Action' }};
        } else {
          return {{ translateJS phrase='Read Case Study' context='Phrase is a Call to Action' }};
        }
      } else if (profile.type.includes('industry') || profile.type.includes('solution')) {
        return {{ translateJS phrase='See Solutions' context='Phrase is a Call to Action' }};
      } else if (profile.type.includes('podcast')) {
        return {{ translateJS phrase='Listen Now' context='Phrase is a Call to Action' }};
      } else if (profile.type.includes('blog')) {
        return {{ translateJS phrase='Read Now' context='Phrase is a Call to Action' }};
      
      }
      return {{ translateJS phrase='Learn More' context='Phrase is a Call to Action' }};
        
    }

Is there a way to translate content outside of the component.js file so we can move this function to formatters-custom.js?

3

(re-sending this since I fat fingered the enter key)

Hi Paige, unfortunately {{ translateJS }} hbs calls cannot go inside static js like formatters. There is also no sane way to have jambo generate js files, since jambo will generate completely separate files for each language you have.

I would recommend adding any shared code that needs to use translation HBS helpersto the script/on-ready.hbs partial. You may need to use jambo to override this file if it hasn’t already been overridden. This shared code can then be accessed by all of your components.