Dynamic link targets (#803)

Use link targets from runtime config, and default to "_top" if it is not specified Update all targets which include card title links, CTAS, phone links, RTF links, and direct answer links J=SLAP-1349 TEST=manual Load the test site, change the runtime config link target and see different link target behavior. Test title links, CTAs, phone links, RTF links, and direct answer links
yext · Jun 1, 2021 · 30d2e07 · 30d2e07
1 parent 83deb84
commit 30d2e07
Show file tree

Hide file tree

Showing 37 changed files with 143 additions and 94 deletions.
diff --git a/cards/event-standard/component.js b/cards/event-standard/component.js
@@ -12,10 +12,12 @@ class event_standardCardComponent extends BaseCard['event-standard'] {
    * @param profile profile of the entity in the card
    */
   dataForRender(profile) {
+    const linkTarget = AnswersExperience.runtimeConfig.get('linkTarget') || '_top';
+
     return {
       title: profile.name, // The header text of the card
       url: profile.website, // 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.
+      target: linkTarget, // If the title's URL should open in a new tab, etc.
       titleEventOptions: this.addDefaultEventOptions(),
       date: Formatter.bigDate(profile),
       subtitle: Formatter.dateRange(profile),
@@ -32,7 +34,7 @@ class event_standardCardComponent extends BaseCard['event-standard'] {
         label: 'RSVP', // The CTA's label
         iconName: 'calendar', // The icon to use for the CTA
         url: profile.ticketUrl || profile.website, // The URL a user will be directed to when clicking
-        target: '_top', // Where the new URL will be opened
+        target: linkTarget, // Where the new URL will be opened
         eventType: 'RSVP', // Type of Analytics event fired when clicking the CTA
         eventOptions: this.addDefaultEventOptions(),
         // ariaLabel: '', // Accessible text providing a descriptive label for the CTA
@@ -42,7 +44,7 @@ class event_standardCardComponent extends BaseCard['event-standard'] {
         label: 'Directions',
         iconName: 'directions',
         url: Formatter.getDirectionsUrl(profile),
-        target: '_top',
+        target: linkTarget,
         eventType: 'DRIVING_DIRECTIONS',
         eventOptions: this.addDefaultEventOptions(),
         // ariaLabel: '',

diff --git a/cards/faq-accordion/component.js b/cards/faq-accordion/component.js
@@ -12,10 +12,12 @@ class faq_accordionCardComponent extends BaseCard['faq-accordion'] {
    * @param {Object} profile of the entity in the card
    */
   dataForRender(profile) {
+    const linkTarget = AnswersExperience.runtimeConfig.get('linkTarget') || '_top';
+
     return {
       title: profile.question || profile.name, // The header text of the card
       // subtitle: '', // The sub-header text of the card
-      details: profile.answer ? ANSWERS.formatRichText(profile.answer, "answer", "_top") : null, // The text in the body of the card
+      details: profile.answer ? ANSWERS.formatRichText(profile.answer, "answer", linkTarget) : null, // The text in the body of the card
       // If the card's details are longer than a certain character count, you can truncate the
       // text. A toggle will be supplied that can show or hide the truncated text.
       // showMoreDetails: {
@@ -29,7 +31,7 @@ class faq_accordionCardComponent extends BaseCard['faq-accordion'] {
         label: profile.c_primaryCTA ? profile.c_primaryCTA.label : null, // The CTA's label
         // iconName: '', // 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. To open in a new tab use '_blank'
+        target: linkTarget, // Where the new URL will be opened. To open in a new tab use '_blank'
         eventType: 'CTA_CLICK', // Type of Analytics event fired when clicking the CTA
         // Event options for the analytics event fired when this CTA is clicked.
         eventOptions: this.addDefaultEventOptions({ /* Add additional options here */ }),
@@ -40,7 +42,7 @@ class faq_accordionCardComponent extends BaseCard['faq-accordion'] {
         label: profile.c_secondaryCTA ? profile.c_secondaryCTA.label : null,
         // iconName: '',
         url: Formatter.generateCTAFieldTypeLink(profile.c_secondaryCTA),
-        target: '_top',
+        target: linkTarget,
         eventType: 'CTA_CLICK',
         eventOptions: this.addDefaultEventOptions({ /* Add additional options here */ }),
         // ariaLabel: '',

diff --git a/cards/financial-professional-location/component.js b/cards/financial-professional-location/component.js
@@ -18,12 +18,14 @@ class financial_professional_locationCardComponent extends BaseCard['financial-p
    * @param profile profile of the entity in the card
    */
   dataForRender(profile) {
+    const linkTarget = AnswersExperience.runtimeConfig.get('linkTarget') || '_top';
+
     return {
       showOrdinal: true, // Show the map pin number on the card. Only supported for universal search
       title: profile.name, // The header text of the card
       // subtitle: '', // The sub-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.
+      target: linkTarget, // If the title's URL should open in a new tab, etc.
       titleEventOptions: this.addDefaultEventOptions(),
       address: Formatter.address(profile), // The address for the card
       details: profile.description, // The text in the body of the card
@@ -48,7 +50,7 @@ class financial_professional_locationCardComponent extends BaseCard['financial-p
         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
+        target: linkTarget, // 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
@@ -58,7 +60,7 @@ class financial_professional_locationCardComponent extends BaseCard['financial-p
         label: profile.c_secondaryCTA ? profile.c_secondaryCTA.label : null,
         iconName: 'chevron',
         url: Formatter.generateCTAFieldTypeLink(profile.c_secondaryCTA),
-        target: '_top',
+        target: linkTarget,
         eventType: 'CTA_CLICK',
         eventOptions: this.addDefaultEventOptions(),
         // ariaLabel: ''

diff --git a/cards/financial-professional-location/template.hbs b/cards/financial-professional-location/template.hbs
@@ -145,7 +145,7 @@
     href="tel:{{card.phone}}"
     data-eventtype="TAP_TO_CALL"
     data-eventoptions='{{json card.phoneEventOptions}}'
-    target="_top">
+    target={{#if card.target}}"{{card.target}}"{{else}}"_top"{{/if}}>
     {{card.phone}}
   </a>
 </div>

diff --git a/cards/job-standard/component.js b/cards/job-standard/component.js
@@ -12,10 +12,12 @@ class job_standardCardComponent extends BaseCard['job-standard'] {
    * @param profile profile of the entity in the card
    */
   dataForRender(profile) {
+    const linkTarget = AnswersExperience.runtimeConfig.get('linkTarget') || '_top';
+
     return {
       title: profile.name, // The header text of the card
       url: 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.
+      target: linkTarget, // If the title's URL should open in a new tab, etc.
       // image: '', // The URL of the image to display on the card
       // tagLabel: '', // The label of the displayed image
       titleEventOptions: this.addDefaultEventOptions(),
@@ -33,7 +35,7 @@ class job_standardCardComponent extends BaseCard['job-standard'] {
         label: 'Apply Now', // The CTA's label
         iconName: 'briefcase', // The icon to use for the CTA
         url: profile.applicationUrl || profile.landingPageUrl, // The URL a user will be directed to when clicking
-        target: '_top', // Where the new URL will be opened
+        target: linkTarget, // 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

diff --git a/cards/link-standard/component.js b/cards/link-standard/component.js
@@ -12,10 +12,12 @@ class link_standardCardComponent extends BaseCard['link-standard'] {
    * @param profile profile of the entity in the card
    */
   dataForRender(profile) {
+    const linkTarget = AnswersExperience.runtimeConfig.get('linkTarget') || '_top';
+
     return {
       title: profile.htmlTitle, // The header text of the card
       url: profile.link, // 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.
+      target: linkTarget, // If the title's URL should open in a new tab, etc.
       titleEventOptions: this.addDefaultEventOptions(),
       // subtitle: '', // The sub-header text of the card
       // If the card's details are longer than a certain character count, you can truncate the

diff --git a/cards/location-standard/component.js b/cards/location-standard/component.js
@@ -18,10 +18,12 @@ class location_standardCardComponent extends BaseCard['location-standard'] {
    * @param {Object} profile of the entity in the card
    */
   dataForRender(profile) {
+    const linkTarget = AnswersExperience.runtimeConfig.get('linkTarget') || '_top';
+
     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.
+      target: linkTarget, // If the title's URL should open in a new tab, etc.
       titleEventOptions: this.addDefaultEventOptions(), // The event options for title click analytics
       // subtitle: '', // The sub-header text of the card
       hours: Formatter.openStatus(profile),
@@ -38,7 +40,7 @@ class location_standardCardComponent extends BaseCard['location-standard'] {
         label: 'Call', // The label of the CTA
         iconName: 'phone', // The icon to use for the CTA
         url: Formatter.phoneLink(profile), // The URL a user will be directed to when clicking
-        target: '_top', // If the URL will be opened in a new tab, etc.
+        target: linkTarget, // If the URL will be opened in a new tab, etc.
         eventType: 'TAP_TO_CALL', // Type of Analytics event fired when clicking the CTA
         eventOptions: this.addDefaultEventOptions(), // The analytics event options for CTA clicks
         // ariaLabel: '', // Accessible text providing a descriptive label for the CTA
@@ -47,7 +49,7 @@ class location_standardCardComponent extends BaseCard['location-standard'] {
         label: 'Get Directions',
         iconName: 'directions',
         url: Formatter.getDirectionsUrl(profile),
-        target: '_top',
+        target: linkTarget,
         eventType: 'DRIVING_DIRECTIONS',
         eventOptions: this.addDefaultEventOptions(),
         // ariaLabel: '',

diff --git a/cards/location-standard/template.hbs b/cards/location-standard/template.hbs
@@ -47,7 +47,7 @@
   <a class="HitchhikerLocationStandard-phone--mobile js-Hitchhiker-phone" href="tel:{{card.phone}}"
     data-eventtype="TAP_TO_CALL"
     data-eventoptions='{{json card.phoneEventOptions}}'
-    target="_top">
+    target={{#if card.target}}"{{card.target}}"{{else}}"_top"{{/if}}>
     {{card.phone}}
   </a>
 </div>

diff --git a/cards/menuitem-standard/component.js b/cards/menuitem-standard/component.js
@@ -12,10 +12,12 @@ class menuitem_standardCardComponent extends BaseCard['menuitem-standard'] {
    * @param profile profile of the entity in the card
    */
   dataForRender(profile) {
+    const linkTarget = AnswersExperience.runtimeConfig.get('linkTarget') || '_top';
+
     return {
       title: profile.name, // The header text of the card
       url: 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.
+      target: linkTarget, // If the title's URL should open in a new tab, etc.
       image: Formatter.image(profile.c_photo).url, // The URL of the image to display on the card
       altText: Formatter.image(profile.c_photo).alternateText,  // The alternate text for the image
       // tagLabel: '', // The label of the displayed image
@@ -38,7 +40,7 @@ class menuitem_standardCardComponent extends BaseCard['menuitem-standard'] {
         label: 'Order Now', // The CTA's label
         iconName: 'chevron', // The icon to use for the CTA
         url: profile.orderUrl && profile.orderUrl.url, // The URL a user will be directed to when clicking
-        target: '_top', // Where the new URL will be opened
+        target: linkTarget, // 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
@@ -48,7 +50,7 @@ class menuitem_standardCardComponent extends BaseCard['menuitem-standard'] {
         label: 'View Menu',
         iconName: 'magnifying_glass',
         url: profile.landingPageUrl,
-        target: '_top',
+        target: linkTarget,
         eventType: 'CTA_CLICK',
         eventOptions: this.addDefaultEventOptions(),
         // ariaLabel: '',

diff --git a/cards/multilang-event-standard/component.js b/cards/multilang-event-standard/component.js
@@ -12,10 +12,12 @@ class multilang_event_standardCardComponent extends BaseCard['multilang-event-st
    * @param profile profile of the entity in the card
    */
   dataForRender(profile) {
+    const linkTarget = AnswersExperience.runtimeConfig.get('linkTarget') || '_top';
+
     return {
       title: profile.name, // The header text of the card
       url: profile.website, // 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.
+      target: linkTarget, // If the title's URL should open in a new tab, etc.
       titleEventOptions: this.addDefaultEventOptions(),
       date: Formatter.bigDate(profile),
       subtitle: Formatter.dateRange(profile),
@@ -32,7 +34,7 @@ class multilang_event_standardCardComponent extends BaseCard['multilang-event-st
         label: {{ translateJS phrase='RSVP' context='RSVP is a verb' }}, // The CTA's label
         iconName: 'calendar', // The icon to use for the CTA
         url: profile.ticketUrl || profile.website, // The URL a user will be directed to when clicking
-        target: '_top', // Where the new URL will be opened
+        target: linkTarget, // Where the new URL will be opened
         eventType: 'RSVP', // Type of Analytics event fired when clicking the CTA
         eventOptions: this.addDefaultEventOptions(),
         // ariaLabel: '', // Accessible text providing a descriptive label for the CTA
@@ -42,7 +44,7 @@ class multilang_event_standardCardComponent extends BaseCard['multilang-event-st
         label: {{ translateJS phrase='Directions' }},
         iconName: 'directions',
         url: Formatter.getDirectionsUrl(profile),
-        target: '_top',
+        target: linkTarget,
         eventType: 'DRIVING_DIRECTIONS',
         eventOptions: this.addDefaultEventOptions(),
         // ariaLabel: '',

diff --git a/cards/multilang-faq-accordion/component.js b/cards/multilang-faq-accordion/component.js
@@ -12,10 +12,12 @@ class multilang_faq_accordionCardComponent extends BaseCard['multilang-faq-accor
    * @param {Object} profile of the entity in the card
    */
   dataForRender(profile) {
+    const linkTarget = AnswersExperience.runtimeConfig.get('linkTarget') || '_top';
+
     return {
       title: profile.question || profile.name, // The header text of the card
       // subtitle: '', // The sub-header text of the card
-      details: profile.answer ? ANSWERS.formatRichText(profile.answer, "answer", "_top") : null, // The text in the body of the card
+      details: profile.answer ? ANSWERS.formatRichText(profile.answer, "answer", linkTarget) : null, // The text in the body of the card
       // If the card's details are longer than a certain character count, you can truncate the
       // text. A toggle will be supplied that can show or hide the truncated text.
       // showMoreDetails: {
@@ -29,7 +31,7 @@ class multilang_faq_accordionCardComponent extends BaseCard['multilang-faq-accor
         label: profile.c_primaryCTA ? profile.c_primaryCTA.label : null, // The CTA's label
         // iconName: '', // 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. To open in a new tab use '_blank'
+        target: linkTarget, // Where the new URL will be opened. To open in a new tab use '_blank'
         eventType: 'CTA_CLICK', // Type of Analytics event fired when clicking the CTA
         // Event options for the analytics event fired when this CTA is clicked.
         eventOptions: this.addDefaultEventOptions({ /* Add additional options here */ }),
@@ -40,7 +42,7 @@ class multilang_faq_accordionCardComponent extends BaseCard['multilang-faq-accor
         label: profile.c_secondaryCTA ? profile.c_secondaryCTA.label : null,
         // iconName: '',
         url: Formatter.generateCTAFieldTypeLink(profile.c_secondaryCTA),
-        target: '_top',
+        target: linkTarget,
         eventType: 'CTA_CLICK',
         eventOptions: this.addDefaultEventOptions({ /* Add additional options here */ }),
         // ariaLabel: '',

diff --git a/cards/multilang-financial-professional-location/component.js b/cards/multilang-financial-professional-location/component.js
@@ -18,12 +18,14 @@ class multilang_financial_professional_locationCardComponent extends BaseCard['m
    * @param profile profile of the entity in the card
    */
   dataForRender(profile) {
+    const linkTarget = AnswersExperience.runtimeConfig.get('linkTarget') || '_top';
+
     return {
       showOrdinal: true, // Show the map pin number on the card. Only supported for universal search
       title: profile.name, // The header text of the card
       // subtitle: '', // The sub-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.
+      target: linkTarget, // If the title's URL should open in a new tab, etc.
       titleEventOptions: this.addDefaultEventOptions(),
       address: Formatter.address(profile), // The address for the card
       details: profile.description, // The text in the body of the card
@@ -48,7 +50,7 @@ class multilang_financial_professional_locationCardComponent extends BaseCard['m
         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
+        target: linkTarget, // 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
@@ -58,7 +60,7 @@ class multilang_financial_professional_locationCardComponent extends BaseCard['m
         label: profile.c_secondaryCTA ? profile.c_secondaryCTA.label : null,
         iconName: 'chevron',
         url: Formatter.generateCTAFieldTypeLink(profile.c_secondaryCTA),
-        target: '_top',
+        target: linkTarget,
         eventType: 'CTA_CLICK',
         eventOptions: this.addDefaultEventOptions(),
         // ariaLabel: ''

diff --git a/cards/multilang-financial-professional-location/template.hbs b/cards/multilang-financial-professional-location/template.hbs
@@ -145,7 +145,7 @@
     href="tel:{{card.phone}}"
     data-eventtype="TAP_TO_CALL"
     data-eventoptions='{{json card.phoneEventOptions}}'
-    target="_top">
+    target={{#if card.target}}"{{card.target}}"{{else}}"_top"{{/if}}>
     {{card.phone}}
   </a>
 </div>