Hitchhikers Theme Changelog

This changelog outlines changes introduced in each minor version of the Hitchhikers Theme. For step-by-step instructions on how to upgrade the Theme and SDK, check out the Upgrade Theme for Search Frontend Experiences guide.

Note: In the August ‘24 Release, several search algorithms were renamed: NLP filter is now inferred filter, semantic text search is now semantic search, and text search is now keyword search.

Theme 1.36

January 9, 2026

We are excited to announce our Hitchhikers Theme v1.36 as well as Search UI SDK 1.19!

Autocomplete Limit

Users can now customize the number of results displayed in the search autocomplete dropdown, which was previously hardcoded to a maximum of 10. This update provides greater control over the search UI, allowing you to optimize the density and layout of autocomplete suggestions for your end users.

To adjust this limit, add the autocompleteLimit property to the verticalsToConfig object within your configuration files:

Universal Search: Update index.json.
Vertical Pages: Update the corresponding config/pageName.json for each specific page.

"verticalsToConfig": {
  "Universal": {
    "autocompleteLimit": 12, // new property
    "isFirst": "true",
    "label": "All"
  },
}

Theme 1.35

February 26, 2025

We are excited to announce our Hitchhikers Theme v1.35 as well as Search UI SDK 1.18!

Generative Answers

Advanced Search Tier Feature

Generative Answers are only available on the Advanced Search tier. Check out the Search Tiers reference doc to learn more about the features that are available in each tier.

Generative Answers are AI-generated summaries of search results displayed at the top of the page. Generative Answers synthesize information from top search results to help users quickly find relevant information without having to sift through multiple results, improving efficiency and reducing friction in the search experience.

To support this in the theme, we are introducing a Generative Answers component for pages, a Generative Answers card, and a new click type citation_click, which will track when users click on sources in Generative Answers.

Upgrade Implications

Once you enable Generative Answers in the backend config and run the Jambo command to upgrade the theme, you will need to:

Enable Generative Answers by setting useGenerativeDirectAnswers to true (currently commented out) in config/global_config.json.
Add the Generative Answers component to every universal or vertical page you want to add Generative Answers to (see details below)
Add the component to each vertical pages.html.hbs Handlebars file
(Optional) Add optional configurations in each vertical config.json file
1. Optionally, add source URL fields to link out to in the sources

For the second step, net-new verticals you add to your experiences will have the Generative Answer component and partials commented out by default when you use the Jambo Command “Add Vertical”. Comment these in to use this feature.

To add Generative Answers to existing verticals, you can use one of the following approaches (see below for detailed steps for each approach):

Replace all the content in each vertical file with the content from the theme file. Then comment in any previously commented in filters, sorting, etc. that you would like to use.
For the vertical page.html.hbs file, use the theme file at themes/answers-hitchhiker-theme/templates/[page-template]/page.html.hbs.
For the vertical config.json file, use the theme file at themes/answers-hitchhiker-theme/templates/[page-template]/page-config.json.
Update each vertical file manually by copying only new content from the theme files.
Recreate each vertical using the Jambo Command “Add Vertical” and then comment in the appropriate lines.

[page-template] refers to the page template used by each vertical. This would be vertical-standard, vertical-grid, vertical-full-page-map, or vertical-map.

Once you add Generative Answers, you can also customize the sourceUrlFields property to include any URL fields you want to link out to in the sources.

Option A: Replace all page content with content from theme files

For each universal or vertical page you would like Generative Answers on, replace all the content in the page.html.hbs file with the theme file at themes/answers-hitchhiker-theme/templates/[page-template]/page.html.hbs:
Open the vertical page.html.hbs file (for universal search, the page name is index, so you would navigate to pages/index.html.hbs).
Take note of what components are currently commented in and being used.
Open the theme page.html.hbs file (navigate to themes/answers-hitchhiker-theme/templates/[page-template]/page-html.hbs).
Copy all the contents in the theme file and use it to replace the contents in your vertical file.
Comment in the three Generative Answers partials (note universal-standard will be replaced with the name of the template used by the vertical):
1. {{> generativedirectanswercards/all }}
2. {{> templates/universal-standard/script/generativedirectanswer }}
3. {{> templates/universal-standard/markup/generativedirectanswer }}
Comment in any previously commented in filters, sorting, or other components you would like to use.
For each universal or vertical page you would like Generative Answers on, replace all the content in the config.json file with the theme file at themes/answers-hitchhiker-theme/templates/[page-template]/page-config.json:
Open the vertical config.json file (for universal search, the page name is index, so you would navigate to config/index.json).
Take note of what components are currently commented in and being used.
Open the theme config.json file (navigate to themes/answers-hitchhiker-theme/templates/[page-template]/page-config.json).
Copy all the contents in the theme file and use it to replace the contents in your vertical file.
Comment in the GenerativeDirectAnswer component and make any changes to the sourceUrlFields array.
Comment in any previously commented in filters, sorting, or other components you would like to use.

Option B: Copy new content from theme files

For each universal or vertical page you would like Generative Answers on, copy new content into the config.json file from the theme file at themes/answers-hitchhiker-theme/templates/[page-template]/page-config.json:
Open the vertical config.json file (for universal search, the page name is index, so you would navigate to config/index.json).
Open the theme config.json file (navigate to themes/answers-hitchhiker-theme/templates/[page-template]/page-config.json).
Copy the new GenerativeDirectAnswer component and paste it into your vertical file in the same location.
Make any changes to the sourceUrlFields array.
For each universal or vertical page you would like Generative Answers on, copy new content into the page.html.hbs file from the theme file at themes/answers-hitchhiker-theme/templates/[page-template]/page.html.hbs:
Open the vertical page.html.hbs file (for universal search, the page name is index, so you would navigate to pages/index.html.hbs).
Open the theme page.html.hbs file (navigate to themes/answers-hitchhiker-theme/templates/[page-template]/page-html.hbs).
Copy the three Generative Answers partials and paste it into your vertical file in the same locations. Make sure to comment them in. Note universal-standard will be replaced with the name of the template used by the vertical.
1. {{> generativedirectanswercards/all }}
2. {{> templates/universal-standard/script/generativedirectanswer }}
3. {{> templates/universal-standard/markup/generativedirectanswer }}

Option C: Recreate the vertical page
For each universal or vertical page you would like Generative Answers on, delete the old vertical and add a new one.

Open the vertical config.json file (for universal search, the page name is index, so you would navigate to config/index.json).
Take note of what components are currently commented in and being used.
Click the menu icon next to the file and select Delete.
Open the vertical page.html.hbs file (for universal search, the page name is index, so you would navigate to pages/index.html.hbs).
Take note of what components are currently commented in and being used.
Click the menu icon next to the file and select Delete.
Go to Tools > Jambo Commands, select Add Vertical, and click Continue.
Fill in the page name, vertical key, card name, and page template using the existing configuration.
Open each new file and comment in any previously commented in filters, sorting, or other components you would like to use.

Custom Generative Answers Card

You also have the option to create a custom Generative Answers card, just as you would with a Direct Answers card. If you want to make any changes to the Generative Answers card, you must create a custom one. To do so:

Click Tools > Jambo Commands, select Add Generative Direct Answer (GDA) Card and click Continue.
Name the card and select generativedirectanswercards/generative-standard as the template. Click Submit.
In the Code Editor files left pane, open generativedirectanswercards/[[card name you just created]]/template.hbs.
Make any edits to the card in this file. Note since the Generative Answer gets pulled in as a partial, you can’t make changes to the answer directly. Here you can change the structure of the card by moving components around or changing the hardcoded copy on the card.
Open the config.json file for each vertical you include Generative Answers on and change the GenerativeDirectAnswer cardType property to match the name of the card you just created.

Theme v1.34.3

September 17, 2024

Cloud Choice Support

Previously, the frontend was able to use any of our consumer serving regions powered by AWS or GCP. We now support limiting queries to only use GCP-based regions. Add the "cloudChoice" property to the global_config.json file. Set it to "multi" to use the all-region default or to "gcp" to use only GCP-based regions.

Theme v1.33

August 14, 2023

The new Hitchhikers Theme 1.33 updates the built-in FAQ accordion card to support the addition of Rich Text v2 fields to Yext Knowledge Graph via the answerV2 field.

FAQ Accordion Card Supports Rich Text v2 Fields

The faq-accordion and multilang-faq-accordion cards were updated to account for the newly supported Rich Text v2 fields. They check to see whether FAQ entities are using the answerV2 or answer field and set the card description accordingly.

Upgrade Implications

If you are using rich text V2 or converted your FAQs to use rich text V2 and you forked either the faq-accordion card or multilang-faq-accordion card, you must refork them or update them based on changes from this PR to get support for rich text V2.

Theme v1.32

July 26, 2023

The new Hitchhikers Theme 1.32 supports the addition of Rich Text v2 and Markdown fields to the Yext Knowledge Graph.

Support for Rich Text v2 and Markdown Fields

This will walk through how to enable your Search experience to render the new Rich Text v2 and Markdown fields in the frontend. Follow the Migrate Legacy Rich Text Fields and Field Types guide for end-to-end instructions.

Knowledge Graph: Add Field

The platform does not allow you to change a field’s Field Type, so even if you currently have a rich text field you’ll need to create a net-new field. Then you’ll need to add content to the newly added field for the appropriate entities.

Backend Config: Edit Properties

Navigate to Search > [[Your Experience]] > Edit as JSON.
Add a top-level config property to convert rich text to HTML.

For Rich Text v2 fields, the richTextV2ToHTML property needs to be set to true.
For Markdown fields, the markdownToHTML property needs to be set to true.

{
  "$schema": "https://schema.yext.com/config/answers/answers-config/v1",
  "$id": "test",
  "name": "test",
  "verticals": {},
  "richTextV2ToHTML": true,
  "markdownToHTML": true
}

If you are already using the display fields property, add the new custom field to the displayFields array.

{
 "verticals": {
   "products": {
     "displayFields": [
       "photoGallery",
       "name",
       "c_testRTDescription",
       "c_testMarkdown"
     ]
   }
 },
 "richTextV2ToHTML": true,
 "markdownToHTML": true
}

Frontend: Render the Field

Hitchhikers Theme

To render the field in the Code Editor, use the html subfield of the field you just added when mapping profile fields to properties in the card component.js file. Both rich text and markdown fields will be converted to HTML.

dataForRender(profile) {
  return {
    title: profile.name,
    details: profile.c_testRTDescription ? profile.c_testRTDescription['html'] : null
  }
}

Search UI React

In order to render the fields in the frontend, take a look at the example cards in the following repo:

For Markdown Fields that haven’t been converted to HTML, you will need to do the additional following steps:
Make sure "markdownToHTML": false, in the backend config
Run this command in your terminal: npm i @uiw/react-md-editor

Check out the Update a Result Card to Support Rich Text help article for step-by-step instructions on display rich text on a result card.

Theme v1.31 and Search UI SDK 1.16

May 10, 2023

The new Hitchhikers Theme 1.31 supports the addition of EU cloud choice.

EU Cloud Choice Support

Assets are now available through our EU CDN at https://assets.eu.sitescdn.net/.

Previously, data could only be hosted in the US. If you are located in the EU and you want your data to be hosted in the EU, update "cloudRegion" to "eu" within the global_config.json file.

Theme v1.30 and Search UI SDK 1.15

November 16, 2022

We are excited to announce our Hitchhikers Theme v1.30 as well as Search UI SDK 1.15!

Auto-Initialization

The main update in this theme is auto-initialization in the code editor in situations where the intitializeManually feature is being used. Some administrators use initializeManually for advanced use cases like: tracking visitor analytics or query sources, or dynamically enabling session tracking based on different cookie consent policies. Previously, you could not use the code editor to preview your experience if you set intitiliazeManually to true.

This new theme automatically initializes itself in dev mode by looking for environment variables that are present in dev mode, making it now possible to preview experiences while using initializeManually.

Upgrade Implications

You will also need to update your ci/serve_setup.sh file. Specifically, you will need to add a line so that it looks like the following:

#!/bin/sh
export NODE_OPTIONS="--max-old-space-size=1024"

#This will use development mode while in the Yext code editor. Set to "false" to test the production build.export IS_DEVELOPMENT_PREVIEW='true'

npx jambo build
grunt webpack

This ensures that the initial Preview of your page has auto-initialization.

Theme v1.29 and Search UI SDK 1.14

May 10, 2022

We are excited to announce our Hitchhikers Theme 1.29 and Search UI SDK 1.14!

This version includes breaking changes - all upgrades to Theme 1.29 or later must follow the upgrade implication instructions below. The breaking changes have been consolidated into the breaking changes sections at the bottom this theme version post.

You can find the full list of features and bug fixes below:

Support for RTF Truncation

You can now use the Show More/Show Less truncation functionality with rich text fields. Previously, truncation was not supported with rich text because we risked cutting off a closing HTML tag, which could break the page.

Upgrade Implications

For the full process on adding rich text and rich text truncation to your card, follow the steps in the Rich Text section of the Common Formatters reference doc. The following highlights the changes needed for rich text truncation if you already have rich text on your card.

In built-in theme cards that use ANSWERS.formatRichText, we have updated the showMoreDetails object to take in a new truncatedDetails property, so you will only get this property by default if you add these cards after upgrading to Theme 1.29 or later. If you want to use RTF truncation on a previously forked card or on a card you added RTF to, use truncatedDetails in place of showMoreLimit for the RTF card showMoreDetails property.

Your card will look something like:

return {
   title: profile.name,// The header text of the card
   url: profile.landingPageUrl,// If the card title is a clickable link, set URL here
   ...
   details: profile.richTextDescription ? ANSWERS.formatRichText(profile.richTextDescription, 'richTextDescription', 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.
   // Note: If you are using rich text for the details, you should not enable this feature.
   showMoreDetails: {
     truncatedDetails: profile.richTextDescription ? ANSWERS.formatRichText(profile.richTextDescription, 'richTextDescription', linkTarget, 38) : null,// Character count limit
     showMoreText: 'Show more',// Label when toggle will show truncated text
     showLessText: 'Show less'// Label when toggle will hide truncated text
   },
   ...
}

The value for truncatedDetails is similar to details, but passes an additional parameter to ANSWERS.formatRichText: the character count that the rich text content will be truncated at, in this case 38. This character count will ignore all non-text characters, such as HTML tags and formatting. Any string value can be passed into truncatedDetails.

By default, an ellipsis is added to the end of the truncated text. This can be customized by adding one more parameter to ANSWERS.formatRichText to specify the suffix.

For example, to remove the ellipsis completely, you could specify a blank string instead:

ANSWERS.formatRichText(
  profile.richTextDescription,
  "richTextDescription",
  linkTarget,
  38,
  ""
);

Finally, showMoreLimit can still be used for truncating non-rich text, but truncatedDetails must be used instead of showMoreLimit for RTF fields.

Customize Autocomplete Prompts

You can now set custom autocomplete prompts client side, in the Theme and Search UI SDK (rather than just the Search backend) to allow you to modify the prompts based on the page where the search results live. Note that these prompts will always appear above any other prompts in the configuration. They will not be bolded as users type.

Upgrade Implications

There are several ways to set custom prompts, either through the theme or the SDK:

SDK search bar configuration: When initializing the library for the search bar, add a string array with the custom prompts in the autocomplete.customPrompts field. It will look something like:

ANSWERS.addComponent("SearchBar", {
 container: ".search_form",
 ...
 autocomplete: {
   customPrompts: [
     'This is a custom prompt',
     'Here is another example'
   ]
 }
 ...
});

SDK autocomplete component: Use the setCustomPrompts function to customize the autocomplete component after ANSWERS is initialized (note that this will override any existing custom prompts set in the init):

ANSWERS.components.getActiveComponent('AutoComplete')..setCustomPrompts(['This is a a custom prompt','Here is another example'
])

Theme componentSettings: In the config.json file for each page you want to customize, specify custom prompts in the autocomplete.customPrompts field:

"componentSettings": {
 "SearchBar": {
   "placeholderText": "Search",
   ...
   "autocomplete": {
     "customPrompts": [
       "This is a custom prompt",
       "Here is another example"
     ]
   }
   ...
 }
}

Theme iFrame: If your search results page is iFramed, set custom prompts with runtimeConfig or through AnswersExperienceFrame.init (note that this will override any existing custom prompts set in theme’s componentSettings):

window.AnswersExperienceFrame.runtimeConfig.set("customPrompts", [
 "custom prompt from iframe",
]);

Numerical Facets

We have made a number of updates to our faceting framework to better support numerical facets. You can now use static number ranges as facets using the Hitchhikers Theme, which is particularly useful for price ranges, multi-pack options, and more.

Upgrade Implications

Check out the Set Up Numerical Facets guide for step-by-step instructions. To use numerical facets, you will have to make changes in both the frontend and backend:

Backend Configuration: Add the new facets attribute to each vertical using one of three options to set number facet ranges. Plus set the field as a facet under searchableFields.
Frontend Theme: Turn on facets how you normally would. If facets are already on for this vertical, no other changes need to be made. Note you must be on Theme 1.29 or higher to use this feature.

Note: Only Search UI React allows users the ability to input a minimum and maximum value in numerical facets.

Backend Configuration

You will need to add the new facets attributes to each vertical object in the JSON editor (this is not yet configurable in the UI). Just as before, you will still need to set the field as a facet under searchableFields. This will look like the below:

{
  "$schema": "https://schema.yext.com/config/answers/answers-config/v1",
  "$id": "ecommerce",
  "name": "Ecommerce",
  "supportedLocales": [ ... ],
  "countryRestrictions": [],
  "verticals": {
    "products": {
      "name": "Products",
      "directAnswers": { ... },
      "entityTypes": [ ... ],
      "facets": {
        "fields": [
          {
            "fieldId": "price",
            "sortCriteria": "ASC",
            "ranges": [ ... ] | { ... }
          }
        ]
      },
      "searchableFields": {
        "price": {
          "facet": true
        },
      ...// other fields
      },
      "sortBys": [ ... ],
      "source": "YEXT"
    }
    ...// other verticals
  },
// truncated
}

The properties in the facets attribute are:

fieldId: The field for which this config applies. Required.
sortCriteria: How to sort the field. Options are ”ASC” or ”DESC”. If not specified, the default is ASC.
ranges: There are three options to configure numerical facet ranges:
- Explicitly set ranges (set with an array)
- Generate either dynamic or static ranges with the backend (set with an object)

Option 1: Explicitly Set Ranges

Explicitly set ranges that will not change when the results set changes. Static ranges with a result count of 0 are not returned. Also note that the display names will not be internationalized.

"facets": {
  "fields": [
    {
      "fieldId": "price",
      "sortCriteria": "ASC",
      "ranges": [
        {
          "start": 0,
          "end": 70,
          "displayName": "Up to $70"
        },
        {
          "start": 70,
          "end": 100,
          "displayName": "$70 - $100"
        },
        {
          "start": 100,
          "displayName": "Over $100"
        }
      ]
    }
  ]
}

ranges takes an array of objects with the following properties:

start: The start of the range (inclusive). If not specified, the range is unbounded.
end: The end of the range (exclusive). If not specified, the range is unbounded.
displayName: The label for this facet option. If not specified, this defaults to
- "[start] - [end]"
- "> [start]" if end is not specified
- "< [end]" if start is not specified

Option 2: Dynamic Range Generated by the Backend

Setting the algorithm property as ”DYNAMIC” will distribute all the entities (not just the ones returned for that search) roughly evenly across the maximum number of buckets specified by bucketCount. If not specified, bucketCount defaults to 4.

"facets": {
  "fields": [
    {
      "fieldId": "price",
      "sortCriteria": "ASC",
      "ranges": {
        "algorithm": "DYNAMIC",
        "bucketCount": 3
      }
    }
  ]
}

The above configuration may give the following buckets (results count in parentheses):

0 - 23 (20)
23 - 60 (20)
60 - 120 (20)

Option 3: Static Range Generated by the Backend

Setting the algorithm property as ”STATIC” will create buckets of length specified by bucketLength (required).

"facets": {
  "fields": [
    {
      "fieldId": "price",
      "sortCriteria": "ASC",
      "ranges": {
         "algorithm": "STATIC",
         "bucketLength": 24
      }
    }
  ]
}

With the same set of data as the dynamic ranges example, the above configuration may give different buckets (results count in parentheses):

0 - 24 (19)
24 - 48 (10)
48 - 72 (12)
72 - 96 (14)
96 - 120 (5)

If a number field is set as a facet in searchableFields or facets, but no facets config object is provided, the field will be set up as a dynamic range with four buckets. This is added on the next save.

Frontend Theme

Turn on facets how you normally would. If facets are already on for this vertical, no other changes need to be made. Note you must be on Theme 1.29 and Search UI SDK 1.14 or higher to use this feature.

For a refresher on how to add facets to your frontend, check out the Facets training unit.

Update universalLimit for Vertical Grid Templates

We’ve updated the universalLimit for vertical grid templates to three to better fit the three-column grid layout.

Upgrade Implications

The new default universal limit of three will only be applied to net-new vertical-grid pages you add after you upgrade your theme. Feel free to customize this default or change the universal limit to this suggested default on existing pages by updating the universalLimit property in the config.json file for each vertical you want to change.

Collapsible Filters Tab Order (WCAG) - Breaking Change

We’ve addressed an issue with the tab ordering for collapsible filters. To ensure the tab order is correct when users tab through the site, we moved the view results button markup further down the page in each vertical page template.

Note: This is a breaking change - all upgrades to Theme 1.29 or later must follow the upgrade implication instructions below.

Upgrade Implications

Every vertical pages.html.hbs file in your experience must be refreshed if you upgrade to theme 1.29 or later. You can do this with one of the following approaches:

Replace all the content in each vertical pages.html.hbs file with the content from the theme file (find this at themes/answers-hitchhiker-theme/templates/[page-template]/page.html.hbs). Then comment in any previously commented in filters, sorting, etc. that you would like to use. (Recommended)
Recreate each vertical page using the Jambo Command “Add Vertical”.
Move the viewresultsbutton markup manually in each vertical pages.html.hbs file.

[page-template] refers to the page template used by each vertical. This would be vertical-standard, vertical-grid, vertical-full-page-map, or vertical-map.

Option #1 (replacing content with content from the theme) is the recommended approach as it is less time consuming than option #2 and less error prone than option #3. However, if you have a highly customized vertical, you may want to make the updates manually with option #3. To do so, follow the breaking changes post below which consolidates both of the breaking changes from this release.

Move aria-expanded onto Search Input (WCAG)

We’ve adjusted the aria-expanded attribute on the search bar, which will now update based on whether or not there are autocomplete results.

Upgrade Implications:

If you wrote a custom template for the search bar component (or autocomplete or filtersearch), you’ll need to update it with the latest changes.

Fix Filter and Footer Collision - Breaking Change

Previously, when filters extended past the height of the results, the bottom of the filters container was cut off and not accessible. We have fixed this issue by updating the page layout. This only applies to the vertical-standard and vertical-grid page layouts.

Note: This is a breaking change - all upgrades to Theme 1.29 or later must follow the upgrade implication instructions below.

Upgrade Implications

Every vertical pages.html.hbs file in your experience that uses either the vertical-standard or vertical-grid template must be refreshed if you upgrade to theme 1.29 or later. You can do this with one of the following approaches:

Replace all the content in each vertical pages.html.hbs file with the content from the theme file (find this at themes/answers-hitchhiker-theme/templates/[page-template]/page.html.hbs). Then comment in any previously commented in filters, sorting, etc. that you would like to use. (Recommended)
Recreate each vertical page using the Jambo Command “Add Vertical”. This approach is recommended.
Update the page layout manually in each vertical pages.html.hbs file. Since this change affects a major portion of the files, only use this approach if you know what you are doing.

[page-template] refers to the page template used by each vertical. This would be vertical-standard or vertical-grid. Note this change does not apply to either map page template.

Search Complete State for API Errors

Previously if the API returns an error, the search is not complete and the page loading indicator keeps spinning. We have updated this so that if the backend returns an error, we now set the search complete state. We have also added a search error state.

Theme v1.29 Breaking Changes

Fix Filter and Footer Collision
Additional WCAG Update: Collapsible Filters Tab Order

Every vertical pages.html.hbs file in your experience must be refreshed if you upgrade to theme 1.29 or later. You can do this with one of the following approaches:

Replace all the content in each vertical pages.html.hbs file with the content from the theme file (find this at themes/answers-hitchhiker-theme/templates/[page-template]/page.html.hbs). Then comment in any previously commented in filters, sorting, etc. that you would like to use. (Recommended)
Recreate each vertical page using the Jambo Command “Add Vertical”.
Update the page layout manually in each vertical pages.html.hbs file. Since this change affects a major portion of the files, only use this approach if you know what you are doing.

[page-template] refers to the page template used by each vertical. This would be vertical-standard, vertical-grid, vertical-full-page-map, or vertical-map. Note the filter and footer collision fix does not apply to either map page template.

To make these updates manually, follow the instructions below:

First, update the page layout for Fix Filter and Footer Collision:
1. Find the changes outlined here by template (vertical-standard, vertical-grid).
2. For each page in your experience, find the changes in the file corresponding to that page’s template. Changes include moving a div up and adding new div containers. Red highlights show where code was moved from (deleted) and green highlights show where code was moved to (added) or added net-new.
3. Make the corresponding change for each page in your experience.
Then, move the markup for Additional WCAG Update: Collapsible Filters Tab Order:
1. Find the changes outlined here by template (vertical-standard, vertical-grid, vertical-full-page-map, and vertical-map).
2. For each page in your experience, find the changes in the file corresponding to that page’s template. The changes in each file should only include moving the viewresultsbutton markup. The red highlight shows where the line was moved from (deleted) and the green highlight shows where the line was moved to (added). For example, the screenshot below shows that in the vertical-standard template, the viewresultsbutton markup line was moved from line 47 to line 54.
3. Make the corresponding change for each page in your experience.

Theme v1.28

February 9, 2022

With the new Hitchhikers Theme 1.28, we’ve added a new multi-language document search card, bug fixes, and more.

You can find the full list of features and bug fixes below:

Multi-Lang Document Search Card

We are introducing a multi-language document search card! Feel free to use this card for any verticals where you’re showing documents within a multi-language site. Note this is only compatible on verticals with document search on at least one field.

Upgrade Implications

After upgrading to Theme 1.28, navigate to the config.json file of your chosen vertical, and update the cardType to multilang-document-standard.

Configure Map Scrolling on Universal

We’ve encountered an undesirable UX on the universal page where a user can sometimes get caught in the map while scrolling down the page. We’ve turned the map scrolling off by default on the Universal Page for Mapbox: scrollZoom in the providerOptions is set to false. If you set providerOptions.scrollZoom to true in your config.json, users will be able to scroll in the map. Remember that anything in providerOptions is just a pass through to the map provider.

Upgrade Implications

If you are using a map on universal search, you should delete and re-add the page. Alternatively, you can copy scrollZoom in the providerOptions into the config.json file for any vertical where you use a map on the universal page.

If you forked templates/universal-standard/script/universalresults.hbs, you will need to refork or update based on changes in this PR.

Update universalSectionTemplate for Vertical Grid Pages

Currently the universalSectionTemplate for the vertical-grid page-config.json template is set to standard. We have updated the default to be grid-three-columns for the universal search layout to match the vertical search layout.

Upgrade Implications

The new default "universalSectionTemplate": "grid-three-columns" will only be applied to net-new vertical-grid pages you add after you upgrade your theme. Feel free to customize this default or change the universalSectionTemplate property to this suggested default on existing pages.

Additionally, if you forked templates/vertical-grid/page-config.json, you will need to refresh the file to get this update for future vertical-grid pages.

Jambo Card Issue with Name Replacement

We have corrected an issue where using the original card name in the name of a forked card resulted in an improperly named class name for the card.

For example, using the Jambo command “Add Card” to add a card named standard-override with the standard card as a template should result in a card with class standard_overrideCardComponent (shown in line 3 of the card component.js file). However certain cards were added with class standard-override_overrideCardComponent which would not bring in the proper structure and styling of the card. This has now been fixed.

Upgrade Implications

If you previously forked a card and included the original card name and a hyphen in the card name, check that the class name in the card component.js file is named properly. If not, re-fork the card after upgrading your theme. Additionally, if you forked files in the commands folder, you will need to update them based on this commit.

Close Autocomplete on Clicks Outside of iFrame

We have corrected an issue where clicking outside of an iFrame does not close the autocomplete component. Typically, if a user clicks into the search bar, the autocomplete shows hardcoded prompts. Clicking outside of the search bar closes the autocomplete. However, we found a bug where clicking outside of the iFrame did not close the autocomplete. This has now been fixed.

Upgrade Implications

If you’ve forked:

static/js/iframe-common.js
layouts/html.hbs

You will need to re-fork these files, or view the PR for the changes made and copy changes to your files.

Events Card Missing RTF Styling

We have corrected an issue where Rich Text Format (RTF) styling was missing from the event-standard card. Note if you want to use rich text formatting on your events card, you’ll need to use the function ANSWERS.formatRichText on the details field.

Upgrade Implications

If you forked static/scss/answers/cards/event-standard.scss, you should refork, or see the PR for changes and copy the changes to your files.

Theme v1.27

January 12, 2022

With the new Hitchhikers Theme 1.27, we’ve added support for consumer auth, UI updates, bug fixes, and more. You can find the full list of features and bug fixes below:

Direct Answers on Vertical Search - Built-In Support

Direct Answers are now available in Vertical Search as part of the Hitchhiker Theme. Direct Answers on vertical search was previously released as a feature you could add custom to your Search experience, so we’re excited to have it built into the UI by default as part of the theme!

A direct answer is a concise result like a phone number, calorie count, or another piece of information that addresses the query’s intent. Direct Answers can also easily be surfaced in Vertical Search for any vertical that has Direct Answers configured.

Upgrade Implications

Net-new verticals you add to your experiences will have the Direct Answer component and partials commented out by default when you use the Jambo Command “Add Vertical”. Comment these in to use this feature.

To add Direct Answers to existing verticals, either:

add the component to the config.json file and add the partials to the page.html.hbs file
re-add the vertical and comment in the component and partials

Option 1: Add the Direct Answers components to an existing page.

Add the DirectAnswer configuration to the config.json file for that page:

"componentSettings": {
  "DirectAnswer": {
    "types": {
      "FEATURED_SNIPPET": {
        "cardType": "documentsearch-standard"
      },
      "FIELD_VALUE": {
        "cardType": "allfields-standard"
      }
    }
  },
// other components here

Add the three Direct Answers partials below to the page.html.hbs file for the vertical you want to use Direct Answers on.

Add the directanswerscards partial {{> directanswercards/all }} below the {{> cards/all }} partial.
Add the direct answer script {{> templates/vertical-standard/script/directanswer }} below the navigation script partial.
Add the direct answer markup {{> templates/vertical-standard/markup/directanswer }} before the spell check markup partial.

Replace vertical-standard with the page template used for this vertical. To see where to place these partials in the file, navigate to the page templates (theme/answers-hitchhiker-theme/templates), find the template you want, and open the page.html.hbs file.

If you are using the vertical-standard page template, the page.html.hbs file will look something like the below, with the new partials bolded.

{{#> layouts/html }}
  {{#> script/core }}
    {{> cards/all }}
    {{> directanswercards/all }}
    {{!-- {{> templates/vertical-standard/collapsible-filters/page-setup }} --}}
    {{> templates/vertical-standard/script/appliedfilters }}
    {{> templates/vertical-standard/script/verticalresultscount }}
    {{> templates/vertical-standard/script/searchbar }}
    {{> templates/vertical-standard/script/spellcheck }}
    {{> templates/vertical-standard/script/navigation }}
    {{> templates/vertical-standard/script/directanswer }}
    {{> templates/vertical-standard/script/verticalresults }}
    {{> templates/vertical-standard/script/pagination }}
    {{> templates/vertical-standard/script/locationbias }}
    …
    <div class="Answers-container Answers-resultsWrapper">
      {{> templates/vertical-standard/markup/directanswer }}
      {{> templates/vertical-standard/markup/spellcheck }}
      <div class="Answers-resultsHeader">
        {{> templates/vertical-standard/markup/verticalresultscount }}
        {{> templates/vertical-standard/markup/appliedfilters }}
     …

Option 2: Re-create the vertical page

Alternatively, you can re-add the vertical you want Direct Answers on using the Jambo Command “Add Vertical”. Navigate to the page.json file and comment in the DirectAnswer component above. Navigate to the page.html.hbs file and comment in the three Direct Answers partials above. vertical-standard will be replaced with the page template used for this vertical.

Additional Support for Consumer Auth:

Consumer Auth in Sandbox is now supported by setting the environment attribute in the global_config.json to “sandbox” and using a jwt.
Functionality to Call AnswersExperience.init(); in on-document-load partial

Photo Formatter Update

We’ve updated the photo formatter to instead take advantage of a dynamic URL (instead of the static thumbnails returned in the API response). The dynamic URL will be the source for the resultant <img>. This dynamic URL will provide a more ideal size than just the static thumbnails, and aligns the theme with other consumer serving products at Yext.

Upgrade Implications

If you forked formatters-internal.js, and modified the image formatter, you should copy in the updated image formatter from the theme’s formatters-internal.js.

Spell Check Moved Above Result Count

We’ve moved the spell check component above the result count on all vertical templates. This places the result count right above the results for a better UI.

Upgrade Implications:

If you want this update, you’ll need to re-add the vertical pages using the Jambo Command “Add Vertical” for each page you want this update for.

Alternatively, you can also move the spellcheck partial in the pages.html.hbs file to match the vertical template. Move it from around line 43 in the Answers-results class to about line 33 after the directanswer partial in the Answers-container class. Check out the page templates in the theme to see the updated order: navigate to the page templates (theme/answers-hitchhiker-theme/templates), find the template you want, and open the page.html.hbs file. For example, if you are using the vertical-standard template, it’ll look something like the below.

Before:

    <div class="Answers-container Answers-resultsWrapper">
      <div class="Answers-resultsHeader">
        {{> templates/vertical-standard/markup/verticalresultscount }}
        {{> templates/vertical-standard/markup/appliedfilters }}
        {{!-- {{> templates/vertical-standard/collapsible-filters/markup/filterlink }} --}}
        {{!-- {{> templates/vertical-standard/collapsible-filters/markup/viewresultsbutton }} --}}
      </div>
<!-- Uncomment the following div if you want to include filters, facets, or sort options  -->
      {{!-- <div class="Answers-filtersWrapper js-answersFiltersWrapper CollapsibleFilters-inactive"> --}}
        {{!-- {{> templates/vertical-standard/markup/sortoptions }} --}}
        {{!-- {{> templates/vertical-standard/markup/filterbox }} --}}
        {{!-- {{> templates/vertical-standard/markup/facets }} --}}
      {{!-- </div> --}}
      <div class="Answers-results js-answersResults">
        {{> templates/vertical-standard/markup/spellcheck }}
        {{> templates/vertical-standard/markup/verticalresults }}
        {{> templates/vertical-standard/markup/pagination }}
        {{!-- {{> templates/vertical-standard/markup/qasubmission }} --}}
      </div>
    </div>

After:

    <div class="Answers-container Answers-resultsWrapper">
      {{> templates/vertical-standard/markup/directanswer }}
      {{> templates/vertical-standard/markup/spellcheck }}
      <div class="Answers-resultsHeader">
        {{> templates/vertical-standard/markup/verticalresultscount }}
        {{> templates/vertical-standard/markup/appliedfilters }}
        {{!-- {{> templates/vertical-standard/collapsible-filters/markup/filterlink }} --}}
        {{!-- {{> templates/vertical-standard/collapsible-filters/markup/viewresultsbutton }} --}}
      </div>
<!-- Uncomment the following div if you want to include filters, facets, or sort options  -->
      {{!-- <div class="Answers-filtersWrapper js-answersFiltersWrapper CollapsibleFilters-inactive"> --}}
        {{!-- {{> templates/vertical-standard/markup/sortoptions }} --}}
        {{!-- {{> templates/vertical-standard/markup/filterbox }} --}}
        {{!-- {{> templates/vertical-standard/markup/facets }} --}}
      {{!-- </div> --}}
      <div class="Answers-results js-answersResults">
        {{> templates/vertical-standard/markup/verticalresults }}
        {{> templates/vertical-standard/markup/pagination }}
        {{!-- {{> templates/vertical-standard/markup/qasubmission }} --}}
      </div>
    </div>

Update Default Universal Limit on Vertical Pages

Based on our review of search quality across Search experiences, we have found a best practice is to limit the results for each vertical on universal search with universalLimit. Having a larger universalLimit pushes relevant second and third verticals too far “below the fold.” This can be a bad user experience if there are relevant results in lower verticals and users may not scroll down far enough to find what they are looking for.

We have updated the default universal limit to four on all vertical page templates. This provides a better UI and easily shows users results across different verticals on universal search without them needing to scroll far.

This change will only affect net-new pages you create. You can still change the universal limit on any or all of your verticals by updating the universalLimit property in the config.json file for each vertical you want to change.

To learn more about the universal limit, check out the Edit Page Settings unit.

Upgrade Implications

The new default universal limit of four will only be applied to net-new pages you add after you upgrade your theme.

Remove Scrollbar from Facets Box

We have corrected an issue where a scroll bar would show for certain experiences when you hover over the facets box, even though all facet options were already showing. We determined this issue occurs when an experience uses a custom font with a text height larger than the line height of the label.

We have added the variable --yxt-filter-options-option-label-line-height to the answers-variables.scss file, which controls the line height of the option label in the filter options component. This is now set explicitly in the theme and can be overridden if you add a custom font and see this issue. We have also made adjustments to the padding and margin of the facets to give more leeway with custom fonts.

Upgrade Implications

If you are upgrading, you will not have this variable by default. To remedy this, copy the --yxt-filter-options-option-label-line-height variable into your answers-variables.scss file, like below.

// component specific variable overrides
--yxt-filters-and-sorts-font-size: var(--yxt-font-size-md);
--yxt-filter-options-option-label-line-height: 20px;

Fix Font Preloads on Multilang Sites

We fixed an issue where fonts were not correctly preloading on multi-lang sites. This will improve page speed and perceived flashes on those pages.

Upgrade Implications

If you forked the layouts/preloads-fonts.hbs, or static/webpack-config.js, you should refresh those files to get this fix.

Escape Angle Brackets in highlightField Formatter

The highlightField formatter is used to highlight relevant inline text when you have document search turned on for a long-form text field, such as help articles and documents. Occasionally, these fields include HTML tags, such as a code snippet you can use in the Yext platform! We found an issue where HTML tags in rich text fields did not display correctly on the card. This has now been corrected.

Upgrade Implications

If you wrote a custom highlightField formatter, you’ll need to refresh it with the one in the theme (see themes/answers-hitchhiker-theme/static/js/formatters-internal.js) and carry over any custom changes.

Theme v1.26 and Search UI SDK 1.12

November 17, 2021

With the new Search Hitchhikers Theme 1.26 and Search UI SDK 1.12, we’ve added new feedback buttons, WCAG support, bug fixes, and more.

You can find the full list of features and bug fixes below:

Feedback Buttons on Theme Cards

Previously, we only had the thumbs up/thumbs down feature on direct answers cards. We are now adding this feature to all entity cards, so that we can get feedback more holistically on Search experiences.

To add the thumbs up/thumbs down button, navigate to the card > component.js file and set the feedback: true in the dataForRender object. You can also set the text that shows when a feedback button is clicked (feedbackTextOnSubmission) and that will be used by screen readers for accessibility (positiveFeedbackSrText and negativeFeedbackSrText). The default will look something like (depending on the card you choose):

dataForRender(profile) {
return {
  title: profile.name,
  url: profile.website || profile.landingPageUrl,
  target: linkTarget,
  details: profile.description,
  showMoreDetails: { ... },
  feedback: false,// Shows thumbs up/down buttons to provide feedback on the result
  cardfeedbackTextOnSubmission: 'Thank you for your feedback!',// Text to display after a thumbs up/down is
  clickedpositiveFeedbackSrText: 'This answered my question',// Screen reader only text for
  thumbs-upnegativeFeedbackSrText: 'This did not answer my question',// Screen reader only text for thumbs-down
  CTA1: { ... },
  CTA2: { ... }
  };
}

Here’s an example of the thumbs up/thumbs down button on an FAQ card:

Note: The frontend feature to put thumbs up/thumbs down on results cards is not experience training. It only provides analytics on how end users view the quality of the answers. The thumbs up/down buttons do not directly change search ranking, retrain the model, or alter featured snippet selection. To change predictions, use Experience Training.

Upgrade Implications

If you forked your cards, you will need to re-fork them to get this functionality.

Also note the functionality is in a shared partial under themes/answers-hitchhiker-theme/cards/common-partials/thumbsfeedback.hbs. If you want to customize functionality for a specific card, re-fork the card and remove the reference to the shared partial in the handlebars file. Then copy the partial and paste it inline before customizing the code.

Send New Attributes with Analytics Events on Thumbs Up/Down

When a user clicks on the new feedback buttons, analytics events will fire with eventType as THUMBS_UP or THUMBS_DOWN. The event will also pass attributes for searcher (universal or vertical search), verticalKey, and entityId.

As an example, on the click of the thumbs up/down on an entity card, the frontend will pass the following:

{
  directAnswer: false
  eventType: "THUMBS_UP",
  experienceKey: "yextanswersconfig",
  experienceVersion: "PRODUCTION",
  queryId: "99def4ff-5e90-4144-ae63-0236212753b0",
  searcher: "UNIVERSAL",//or "VERTICAL"
  verticalKey: "offices",//If this is on universal search, should be the vertical key for the section in the universal results
  entityId: "entity-1"
}

In Report Builder, you can now use the metrics Thumbs Up Events and Thumbs Down Events.

To learn more about analytics events, check out the Search Analytics Event Types reference doc. To see examples of the new THUMBS_UP and THUMBS_DOWN event types used in Report Builder, check out the Common Search Analytics Reports.

SDK Support for Token and the Visitor

We added support for passing a jwt in the authorization header, and passing visitor information to analytics. More info to come on these features with our upcoming winter release, which will introduce support for Authorized Search!

Additional WCAG Support

**Pagination Controls Work with Keyboard Enter:**We have added support so that when users tab through pagination, they can hit ‘enter’ to activate the controls and go to said control’s page.
- Upgrade Implications: If you wrote a custom pagination component, you will need to update it with the latest changes.
Navigation Incorporates aria-current : We have added aria-current="page"to the current tab since the link to the current page is indicated visually.
- **Upgrade Implications:**If you wrote a custom template for the navigation component, you will need to update it with the latest changes.
Updated Hover Color on Search Bar: The hover color of the search bar has been updated so that the clear button and search bar icon have clear focus states. In the answers-variables.scss file, the variable --yxt-searchbar-button-background-color was updated to #e9e9e9.
- Upgrade Implications: If you want this update, you’ll need to set the --yxt-searchbar-button-background-color-hover variable in answers.scss to #e9e9e9 instead of white.
**Improved Screen Reader Support for the Search Bar:**We have added additional WCAG support to the search bar for screen readers:
1. When someone focuses on the search bar, the screen reader will say: “When autocomplete results are available, use up and down arrows to review and enter to select.”
2. Screen readers should also read out the number of autocomplete options available, such as “five autocomplete suggestions”.
- Upgrade Implications: If you wrote a custom template for the search bar component (or autocomplete or filtersearch), you’ll need to update it with the latest changes.
AutoComplete aria-live Label Present on Page Load: We have moved aria-livewrappers to be present on page load for screen readers to announce the number of results even with empty content.
- Upgrade Implications: If you wrote a custom template for the search bar component (or autocomplete or filtersearch), you’ll need to update it with the latest changes.
AutoComplete Incorporates aria-activedescendant : We have added WCAG support so that as the user traverses autocomplete options, the id of the currently highlighted option is referenced by aria-activedescendanton the text field.
- Upgrade Implications: If you wrote a custom template for the search bar component (or autocomplete or filtersearch) , you’ll need to update it with the latest changes.

Bug Fixes

Full Page Map on iFrame Integrations: We have corrected an issue where full page maps fired a second query in iFrame integrations when searchOnMapMovewas enabled.
- Upgrade Implications: If you forked the vertical full page map previously, you will need to re-fork to get this fix.
**Add allow=microphone to iFrame JS:**We have corrected an issue where iFramed search results pages could not access the microphone for voice search.
- Upgrade Implications: if you forked iframe-common.js, you’ll need to re-fork.
Resize Custom Submit Icons: We have corrected an issue where custom submit icons appeared too large on the page. Users can use custom submit icons by setting the property in the SearchBar component of componentSettings, like so:

"SearchBar": {
  "placeholderText": "Search",// The placeholder text in the search bar
  "allowEmptySearch": true,
  "submitIcon": "magnifying_glass"
},

Upgrade Implications: If you added custom styling to the search bar icon or forked the theme’s static/scss/answers/legacy-aeb/lanswers-overrides.scss file, you may not get the fix. You will need to remove the custom styling so that it does not override the default styling.

Update Styling in More Tab: We have corrected an issue where long vertical names could have a line break in the middle of a word. We have also updated the padding and line height of the More tab.
- Upgrade Implications: If you forked the scss/answers/theme.scss file, you may need to re-fork, or add this update, to get this fix.
Null Check for Direct Answers documentsearch-standard Card: We have corrected an issue on the directanswerscards > documentsearch-standard card that included the line “Read more about [link]” even for entities that did not have a link by adding a null check.
- Upgrade Implications: If you forked formatters-internal.js, you should refresh the getUrlWithTextHighlight formatter to the latest version. EIther replace the formatter with the latest version in the theme formatter-internal.js file or re-fork the file and copy over your customizations.
Align Distance on Professional Location Cards: The distance shown on the financial-professional-location and professional-location cards now align right.
- Upgrade Implications: If you previously forked either the financial-professional-location or professional-location card, you’ll need to re-fork to get the fix.

Theme v1.25 and Search UI SDK 1.11

October 13, 2021

With the new Hitchhikers Theme 1.25 and Search UI SDK 1.11, we’ve added support for facet order options and bug fixes. You can find the full list of features and bug fixes below:

Facet Options Order

Previously, the ordering of facet options was controlled by the number of options per facet. However, ordering by count does not always make sense. You may want to:

Show options in order, such as showing days of the week as Monday through Friday
Pin a facet to the top of the list, like a special product or promo
Show options alphabetically

We are adding the ability to show facet options in alphabetical order (or reverse alphabetical order) and in a defined custom order. To set the facet option order, navigate to the vertical config.json file and find the Facets object in ComponentSettings. In the fields configuration, you will set either optionsOrder or optionsOrderList:

optionsOrder: Use this to sort the facet options alphabetically. Specify either “ASC” or “DESC”.

Note: Facets on numbers will be stored as strings. You’ll need a custom sorting function to handle numbers correctly. Reach out or comment below if you’re implementing this - we’d love to hear more about your use case!

"ComponentSettings": {
  "Facets": {
    "expand":false,
    "fields": {
      "insurancesAccepted": {
        "placeholderText": "Search",
        "optionsOrder": "ASC",
      }
    }
  }

optionsOrderList: Use this to set a custom order. Provide the full list of display names in an array. Note this list is case sensitive.

Any options not provided will be displayed at the end of the list, ordered by result count.
In the case that an option is included in the array, but has zero results, the option will not display in the frontend.

"ComponentSettings": {
  "Facets": {
    "expand":false,
    "fields": {
      "c_daysOfTheWeek": {
        "placeholderText": "Search",
        "optionsOrderList": ["Monday", "Tuesday", "Wednesday", "Thursday","Friday", "Saturday", "Sunday"],
      }
    }
  }

Note: Only one of optionsOrder and optionsOrderList should be defined. If both are defined, optionsOrderList will take precedence and you will see a build warning in your console.

Updates to vertical-grid’s page-config.json

We are adding properties for verticalLimit and universalLimit to the page-config.json file for the vertical-grid layout template that will be commented out by default. This will make it easier for Admins to use these properties by commenting them in and also adds consistency between the other page templates. The verticalsToConfig object will look like:

"verticalsToConfig": {
  "<REPLACE ME>": {// The vertical key from your search configuration
    // "label": "", // The name of the vertical in the section header and the navigation bar
    // "verticalLimit": 15, // The result count limit for vertical search
    // "universalLimit": 5, // The result count limit for universal search
    "cardType": "standard",// The name of the card to use - e.g. accordion, location, custom-card
    "icon": "star",// The icon to use on the card for this vertical
    "universalSectionTemplate": "standard"
  }
}

Upgrade Implications

If you previously added a page using the vertical-grid layout, they won’t have the verticalLimit and universalLimit properties by default. If you want to use these properties, we recommend copying them into your verticalsToConfig object from the theme.

Page Icons Commented Out

Page icons will now be commented out by default. These show on universal search for that particular vertical.

Admins can add and customize the page icon by commenting in the icon property in the verticalsToConfig object in the config.json file for each vertical they want to customize.

"verticalsToConfig": {
  "<REPLACE ME>": {// The vertical key from your search configuration
    // "label": "", // The name of the vertical in the section header and the navigation bar
    // "verticalLimit": 15, // The result count limit for vertical search
    // "universalLimit": 5, // The result count limit for universal search
    "cardType": "standard",// The name of the card to use - e.g. accordion, location, custom-card
    // "icon": "star", // The icon to use on the card for this vertical
    "universalSectionTemplate": "standard"
  }
}

Upgrade Implications

New verticals added to your experience will not have icons by default. If you would like to add icons, comment in the icon property.

Handle Edge Case in Direct Answers Analytics

Previously, if a businessId wasn’t supplied to a site, the thumbs up or down quality report for document search broke, since no Analytics events can be fired without a business ID.

To fix this, the document search thumbs up and down buttons will not show unless a business ID is provided. If you’re using Jambo, the business ID will always be provided to your site automatically!

`-yxt-color-text-primary`Styling Regression

We have corrected an issue where the paragraph font color on cards was not pulling from the --yxt-color-text-primary variable.

Upgrade Implications

Check your --yxt-color-text-primary variable to make sure it is still the font color you want to use for the paragraph text on your cards. If changing this variable failed to change the colors on a previous theme, make the update now and check that it pulls through.

Theme v1.24

September 14, 2021

With the Hitchhikers Theme 1.24, we’ve added several new formatters, styling updates, and more. You can find the full list of features and bug fixes below, with additional details below:

Open Status Automation

Previously, if you wanted to update translations for open status messages, you would need to go to table-string-i18n.js file and and open-status-i18n.js. With this update, we’ve moved the open status strings to the PO files, which is the same place as all the other translations (they are no longer special flowers!). To edit open status translations, you can update the translations directly in those PO files. To locate them, shadow the relevant po file, and search for the string, and update it as needed.

Upgrade Implications

If you forked the stringlocalizer.js and formatter-internals.js, you’ll need to re-fork. All translations should be in the respective .po files now instead of in the table-string-i18n.js file and and open-status-i18n.js file, which previously contained static translation string map to each language.

New Formatter for Currency

We’ve added a new formatter for price currency when using the price range field (a builtin field for location entities). This function will convert the $ to the correct currency of your experience. take two arguments, the field value and a locale. The locale should default to the locale of the experience.

New Formatter for Categories

We’ve added a new formatter built-in to make it easier to show Categories on the frontend of your experience.

The builtin.medicalSpecialty field is a special field that exposes the categories for a Healthcare Professional to the Search Algorithm in the backend. You can use this in your backend configuration, but what if you want to be able to show the specialties on your card? If you remember, we can only expose data that’s returned to us in the API response. Looking at the response that returns Healthcare Professionals, you’ll see that the category IDs are returned.

"categoryIds": [
  "1502017",
  "1257"
],

Building Your Category Mappings

You can find the Category ID to Name mappings in your Knowledge Graph > Configuration tab, under Additional Information > Category Lists.

Once you navigate here, you can download an Excel workbook with the ID to Name Mappings.

From this excel, you’ll need to format it into a JSON object so we can reference it in our JS file easily. I recommend a site like CSV to JSON - CSVJSON.

Removed the leading categories and > by find/replacing in Excel for “*> “. This removes everything before the last > character as well as the space after it.
Renamed the column headers to lowercase “id” and “category” for ease of use in my function.
Pasted the content into CSV to JSON - CSVJSON2 to get a JSON array of objects, each containing an id and a category attribute.

Once you have the category mappings, go to Jambo commands > Override Theme. Select static > js > custom-modules.js.

Paste the array in this file, and export it as a variable (we’ll call it “Mappings”). This is what it will look like (but much longer):

export const Mappings = [
  {
    id: "1322910",
    category: "Category 1!",
  },
  {
    id: "1111",
    category: "Category 2",
  },
];

You can now reference this variable using HitchhikerJS.CustomModules.Mappings in any of your cards or elsewhere in the experience!

In the card where you’d like to display the category mappings, use this new variable and the getCategoryNames formatter, like so:

subtitle: profile.categoryIds ? Formatter.joinList(
  Formatter.getCategoryNames(profile.categoryIds, HitchhikerJS.CustomModules.Mappings),
  ","
) : "";

Styling for Video and Prominent Image Card

We added a new variable for fixed height so that all images will be the same height. You can edit this fixed height of 300px in your answers-variables.scss file. We’ve also moved the video to the top of the video card, to ensure that the videos are aligned.

Upgrade Implications

Add the new variable yxt-product-prominentimage-height to your answers-variables file when you upgrade. This controls the height of the image on the product prominent image card.

If you’ve forked the video card, you should refork to get these updates. If you would like your video card to stay the same, before you upgrade:

Fork the card
Fork the card’s scss: static/scss/answers/cards/product-prominentvideo.scss

Text Highlighting for Google Chrome to view details on document-search standard cards

We’ve added a new formatter to document search direct answer card! This new formatter will allow that when you click View Details it will highlight the answer on the page (only available in Google Chrome).

Upgrade Implications

If you forked the document-standard card you’ll need to re-fork to take advantage of this feature. The viewDetailsLink will have new syntax in the components.js file.

Theme v1.23 and Search UI SDK 1.10

July 23, 2021

Introducing Hitchhiker Theme 1.23 and Search UI 1.10! We’re very excited to bring you a series of new features with these releases.

With HH Theme 1.23 we’ve added several features to improve the user experience, manage your analytics, and improve overall page performance.

You can find the full list of features and bug fixes below:

Ability to Toggle Session Tracking

Session tracking can now be toggled on and off through the runtime configuration.

With the increasing importance of internet privacy, we’ve added even more support for controlling the use of session tracking in a Search experience.

The Search UI supports a sessionTrackingEnabled boolean, which can be set in the ANSWERS.init, or set via a function, ANSWERS.setSessionsOptIn(true). It passes this boolean to the API in the form of a sessionTrackingEnabled param. By default, sessionTrackingEnabled is true. If true, Search will try to use session storage and session cookies to store the session ID. If sessionTrackingEnabled is false, Search will not store any session information.

You can set sessionTrackingEnabled during the integration process when initializing the library. sessionTrackingEnabled is a top-level config option in the ANSWERS.init. If not specified, defaults to true.

ANSWERS.init({
  // Required, your Yext Answers API key
  apiKey: '<API_KEY_HERE>',
  // Required, the key used for your Answers experience
  experienceKey: '<EXPERIENCE_KEY_HERE>',
  onReady: function () {},
  // Optional, whether or not to submit user interaction analytics events
  sessionTrackingEnabled: true,
  // Optional*, Yext businessId, *required to send analytics events, should be set if analyticsTrackingEnabled == false
  businessId: 'businessId',
  //etc
});

It is also an option in the theme’s global_config.json:

{
  "sdkVersion": "1.8",
  // "apiKey": "<REPLACE ME>",
  // "experienceVersion": "<REPLACE ME>",
  // "businessId": "<REPLACE ME>","logo": "",
  "favicon": "",
  "googleTagManagerName": "dataLayer",
  "googleTagManagerId": "",
  "googleAnalyticsId": "",
  "conversionTrackingEnabled":true, // Whether or not conversion tracking is enabled for all pages
  "sessionTrackingEnabled":true, // Whether or not session tracking is enabled for all pages
  "analyticsTrackingEnabled":true //Whether or not to submit user interaction analytics events}

Upgrade Implications

In order to adjust sessionTrackingEnabled, make sure to upgrade to theme 1.23!

Ability to Disable User Interactions

With the increasing importance of internet privacy, we’ve added additional support for storing user engagements with Search. You will now find an analyticsEventEnabled boolean option to either enable or disable all user interaction events.

analyticsEventsEnabled is a top-level config option in the ANSWERS.init. If not specified, defaults to true.

ANSWERS.init({
  // Required, your Yext Search API key
  apiKey: '<API_KEY_HERE>',
  // Required, the key used for your Search experience
  experienceKey: '<EXPERIENCE_KEY_HERE>',
  onReady: function () {},
  // Optional, whether or not to submit user interaction analytics events
  analyticsEventsEnabled: true,
  // Optional*, Yext businessId, *required to send analytics events, should be set if analyticsEventsEnabled == false
  businessId: 'businessId',
  sessionTrackingEnabled: true,
  //etc
});

It is also an option in the theme’s global_config.json.

{
  "sdkVersion": "1.8",
  // "apiKey": "<REPLACE ME>",
  // "experienceVersion": "<REPLACE ME>",
  // "businessId": "<REPLACE ME>",
  "logo": "",
  "favicon": "",
  "googleTagManagerName": "dataLayer",
  "googleTagManagerId": "",
  "googleAnalyticsId": "",
  "conversionTrackingEnabled":true, // Whether or not conversion tracking is enabled for all pages
  "analyticsEventsEnabled":true //Whether or not to submit user interaction analytics events}

When set to false, this configuration will prevent any user events from being submitted.

Page Performance improvements

This Summer Release features optimizations to the Search experience. Adding the Yext search bar to your website will have minimal to no effect on your page performance. We’ve also introduced backend improvements to boost Google’s user-centric performance metrics, and included a default loading indicator to reduce perceived latency of an experience. Please note the following updates for upgrade implications:

Replace all IconComponent usages with IconPartial

Upgrade Implications: If you have forked any cards using the IconComponent, these cards will still work. To take advantage of the new IconPartial, re-fork your card.

Debounce the locator based on time: By adding a time based debouncer, we can avoid performing searches in quick succession which slows down the page. This feature will improve the UX when someone is navigating the map.

Upgrade Implications: If you forked any internals of locator components (this means anything in the static/js/theme-map/ folder), you will need to re-shadow these files

Add a loading indicator to the Theme

Upgrade Implications: loadingIndicator should be set to true in the theme by default. This will involve updating the SearchBar component in all of the config.json files. Alternatively, you can add the following to your SearchBar configuration under ComponentSettings:

"SearchBar": {
  "placeholderText": "Search", // The placeholder text in the answers search bar
  "allowEmptySearch": true, // Allows users to submit an empty search in the searchbar
  "loadingIndicator": {
    "display":true
  }
},

Also make sure to add the --yxt-search-loading-opacity: 0.5; to your answers-variables.scss file.

Case Deflection Support

To better measure case deflection rates with Search, we’ve made some updates to automatically pass the query ID to the parent window using Window.postMessage in the JS Snippet Integration. By default, this will be turned on but will only send a query ID. If you want to send additional data, you will need to update the theme to add additional data. This work will allow for you to easily measure the number of times that Search prevented someone from submitting a support ticket.

Upgrade Implications

This change added new files to the theme and changed core.hbs, so if you forked core.hbs you will need to refork after upgrading.

Voice Integration

We’ve taken the Search experience to the next level with our Voice Search.

3.25 billion people are using voice search on programs like Alexa, Siri, and Google assistant. People want the ability to vocalize their intentions instead of having to type out a search. Using Yext Natural Language Processing technology, we can provide Search to real questions asked by real voices.

A microphone icon in the search bar will notify the user that voice search is available and act as the interface to start/stop a voice search. The feature is currently available for Chrome, Edge, Safari, and Samsung internet, as well as supporting most languages.

Upgrade Implications

You must be on Theme 1.23 to take advantage of Voice Search. In config/index.json, the admin can set the new field voiceSearch enabled to true to enable voice search:

{
  "pageTitle": "Search",// !!!REPLACE THIS VALUE!!! The contents of the title tag and meta open graph tag for title
  // "metaDescription": "", // The meta tag for open graph description
  // "canonicalUrl": "", // The link tag for canonical URL as well as the meta tag for open graph url
  // "keywords": "", // The meta tag for keywords
  "componentSettings": {
  /**
    "QASubmission": {
      "entityId": "", // Set the ID of the entity to use for Q&A submissions, must be of entity type "Organization"
      "privacyPolicyUrl": "" // The fully qualified URL to the privacy policy
    },
    **/
    "DirectAnswer": {
      "defaultCard": "allfields-standard"
    },
    "SearchBar": {
      "placeholderText": "Search",// The placeholder text in the answers search bar
      "voiceSearch": {
        "enabled":false// Whether or not voice search is enabled for all pages}
      }
    }
  }

Settings for voice search will appear by default as an object within the SearchBar component for any new pages.

To modify the colors of the loading indicator, target the .yxt-SearchBar-dot[NUMBER] in your answers.scss, like this:

.yxt-SearchBar-dot1 {
  fill: red;
}
.yxt-SearchBar-dot2 {
  fill: yellow;
}
.yxt-SearchBar-dot3 {
  fill: blue;
}
.yxt-SearchBar-dot4 {
  fill: green;
}

Voice search is hidden by default on mobile (users are more likely to use their keyboard’s native dictation button). However, if you’d like to enable it on mobile, add the following to your answers.scss:

@media (max-width: 47.9375rem) {
  .yxt-SearchBar-voiceSearch {
    display: block;
  }
}

Additional Language Support

We can now support several new languages in Search for Basic Text Search, Query Rules, Query Suggestions, and NLP Filtering (Named Entity Recognition). As of the Summer ‘21 Release, we now can support:

Chinese (Traditional)
Chinese (Simplified)
Russian
Polish
Portuguese
Dutch
Arabic
Korean
Swedish
Hindi

We will continue to expand our algorithm’s functionality across other languages and will be eager to share progress along the way!

Full Page Map ProviderOptions for Universal Search

This feature will allow you to pass any options to the map provider (for example, a custom style) in both Vertical and Universal Search. For sites built on the theme, this will apply to Universal Search (which uses the Answer Search UI’s map component). With ProviderOptions, You can specify a JSON object to pass through to the map provider (Google or Mapbox) in your mapConfig. There are a number of options you can specify under providerOptions to passthrough: See Google Options and Mapbox Options. If the options are not in JSON, they won’t be supported in this passthrough.

We cover the most common ones in the maps reference doc.

Here is one example you can leverage within providerOptions for either Mapbox or Google Mapbox has several predefined styles and here is one example “light” styling for Mapbox:

"mapConfig": {
  ...
  "providerOptions": {
      "style": "mapbox://styles/mapbox/light-v9"
    }
  ...
},

While previously this updated Vertical Search, this will now also render on Universal Search.

Note that the Search UI is on version v9 of Mapbox – any Mapbox styles should be referenced with v9, instead of v10. A future version of the Search UI will be updated to include v10 support.

Fixes and Small Features

In addition to a lot of great new features, Hitchhiker Theme 1.23 and Answers UI SDK 1.10 include a series of minor improvements and bug fixes!

Removed fingerprinting of assets to optimize webpack performance.
New User Specified Object for Answers Init - This will allow you to no longer fork core.hbs if you need to add attributes.
Pin color on Hover - Corrected an issue where the color of the map pin on hover was not being respected.

Theme v1.22 and Search UI SDK v1.9

June 21, 2021

With the Hitchhikers Theme v1.22 and Search UI SDK v1.9, we’ve added several features to simplify tasks for administrators, improve page speed, and provide additional built-in cards for popular use cases.

You can find the full list of features and bug fixes below:

Runtime Config with Support for JWT and Link Targets

With the Spring release, we added support for secure Search API calls using JWT (JSON Web Tokens). For this June Monthly release, we’ve added support for a new configuration to better handle JWT in the Hitchhiker Theme. This will also include support for setting target attributes of links with an experience.

For a step by step on how to implement JWT, visit this guide.

Upgrade Implications

If you forked the core.hbs file, you will need to refresh the core.hbs file if you’re using the runtime config.

More Easily Use Search UI Feature Branches

We’re introducing a simpler way to use a dev or feature branch without the need to override the core.hbs file. Previously, you had to override core.hbs in order to use a feature branch of the Search UI. Now, you don’t have to fork anything, and you can just put either a dev branch or a feature branch name in your global_config.json.

To use a dev branch: Simply put the name of the branch in the sdkVersion attribute, i.e., "sdkVersion": "doc-search-without-storage-changes". Check out this example.

To use a feature branch: put the name of the branch in the sdkVersion attribute, but preface it with "feature-", i.e., "sdkVersion": "feature-standalone-search-bar". Check out this example.

For a specific release version, release-[[version number]], i.e., release-v1.9

Upgrade Implications

If you have forked any of the following files, you will need to refork them:

layouts/html.hbs
script/core.hbs

You can see the differences between the two files here.

Built-in Video Card

With the release of Theme 1.22, we are excited to introduce a brand new Video Card! This new card supports embedded videos from both Youtube and Vimeo. Below is a sneak peek of the card in action!

Upgrade Implications

After upgrading to Theme 1.22, navigate to the config.json file of your chosen vertical, and update the "cardType" to product-prominentvideo (or multilang-product-prominentvideo if multi-language site).

By default, this card is set up to support both Youtube and Vimeo links, but the process will look slightly different depending on your chosen format.

YouTube

To embed a Youtube video, it is important to utilize the default Videos field to store the video link as shown below. The new card is set up to convert the URL found in the Videos field into a Youtube Embed URL, allowing it to be successfully embedded in your result card. Vimeo

To embed a Vimeo video, you will create a custom, single-line text field called “Vimeo” to store the URL. This naming convention is important, as the new video card is set up to reference profile.c_vimeo for the URL.

Note: for all Vimeo videos, make sure you are using an Embed URL, which follows a different format from the default URL you see in your browser. For example, you may see a video with the following structure: A Better Way to Search (Extended) on Vimeo. Trying to embed this link will not work. The Embed URL of this same video would be: A Better Way to Search (Extended) from Yext on Vimeo. You can find this embed link by clicking “Share” on any Vimeo video, or you can simply follow the format shown here, substituting the unique ID of the particular video. Your embedded Vimeo links will look something like this:

Upgrade Implications

If you’ve previously created a custom video card in the past, we recommend that you switch to the new built-in Video Card to take advantage of any future updates to the card.

Page Speed Improvements

We have made a number of updates to improve Page Speed. Most notably, we added placeholders for navigation and searchbar components in order to reduce the flashing in page navigation. These improvements also include: optimizing the theme’s CSS with esbuild minifier, removing UtilityLayout.scss in the theme, enhancing the open status formatter, and separating SDK JS bundles.

Important call out

Due to the bundle optimization, your live previews will not work in

Theme 1.36

Autocomplete Limit

Theme 1.35

Generative Answers

Custom Generative Answers Card

Theme v1.34.3

Cloud Choice Support

Theme v1.33

FAQ Accordion Card Supports Rich Text v2 Fields

Theme v1.32

Support for Rich Text v2 and Markdown Fields

Theme v1.31 and Search UI SDK 1.16

EU Cloud Choice Support

Theme v1.30 and Search UI SDK 1.15

Auto-Initialization

Theme v1.29 and Search UI SDK 1.14

Support for RTF Truncation

Customize Autocomplete Prompts

Numerical Facets

Update universalLimit for Vertical Grid Templates

Collapsible Filters Tab Order (WCAG) - Breaking Change

Move aria-expanded onto Search Input (WCAG)

Fix Filter and Footer Collision - Breaking Change

Search Complete State for API Errors

Theme v1.29 Breaking Changes

Theme v1.28

Multi-Lang Document Search Card

Configure Map Scrolling on Universal

Update universalSectionTemplate for Vertical Grid Pages

Jambo Card Issue with Name Replacement

Close Autocomplete on Clicks Outside of iFrame

Events Card Missing RTF Styling

Theme v1.27

Direct Answers on Vertical Search - Built-In Support

Additional Support for Consumer Auth:

Photo Formatter Update

Spell Check Moved Above Result Count

Update Default Universal Limit on Vertical Pages

Remove Scrollbar from Facets Box

Fix Font Preloads on Multilang Sites

Escape Angle Brackets in highlightField Formatter

Theme v1.26 and Search UI SDK 1.12

Feedback Buttons on Theme Cards

Send New Attributes with Analytics Events on Thumbs Up/Down

SDK Support for Token and the Visitor

Additional WCAG Support

Bug Fixes

Theme v1.25 and Search UI SDK 1.11

Facet Options Order

Updates to vertical-grid’s page-config.json

Page Icons Commented Out

Handle Edge Case in Direct Answers Analytics

-yxt-color-text-primaryStyling Regression

Theme v1.24

Open Status Automation

New Formatter for Currency

New Formatter for Categories

Styling for Video and Prominent Image Card

Text Highlighting for Google Chrome to view details on document-search standard cards

Theme v1.23 and Search UI SDK 1.10

Ability to Toggle Session Tracking

Ability to Disable User Interactions

Page Performance improvements

Case Deflection Support

Voice Integration

Additional Language Support

Full Page Map ProviderOptions for Universal Search

Fixes and Small Features

Theme v1.22 and Search UI SDK v1.9

Runtime Config with Support for JWT and Link Targets

More Easily Use Search UI Feature Branches

Built-in Video Card

Page Speed Improvements

`-yxt-color-text-primary`Styling Regression