Module Assessment | Yext Hitchhikers Platform

You must include a first name and last name in your profile to create challenge environments.

Background

You’re ready to start building out Search for your Spanish-speaking customers. You already have the content uploaded to Content so now you need to:

Create a Spanish Search Configuration
Update the Frontend to include Spanish Pages
Configure your Frontend Pages
Add in any applicable translations

Your Spanish experience is only going to have verticals for Restaurants and FAQs to start as that’s the only content the marketing team has translated. Later, Turtlehead Tacos can add in additional verticals as more translated content becomes available in Content and as you monitor demand for these verticals based on consumer behavior.

Let’s get started!

This challenge assumes that you’ve already completed the Search and Search Advanced tracks and have a strong foundational knowledge of the Search product. Feel free to reference earlier modules as you complete this challenge.

Your Challenge

First, you want to create a separate search configuration for Spanish since this is going to have different verticals than your English experience. Navigate to Search > All Search Experiences then click on the “Add Experience” button in the top right corner.

Need a refresher on the Search Configuration? Visit the Overview of the Search Configuration module .
In the modal, name the experience “Answers Spanish” with an experience key of “answers-spanish”. (Note: make sure the experience key is “answers-spanish” with the dash exactly). Click Continue.
You only want to add Restaurants and FAQs so deselect the rest. Click Continue and skip over modifying the searchable fields and query suggestions – you can modify those from the configuration UI. Finish up by clicking “Create Experience”.
For the FAQs vertical, you want the following, just like your English Search Configuration. You can fill this out using the Search Configuration UI:
- Question as Semantic Search
- Keywords as keyword search
- Entity Type (builtin.entityType) as inferred Filter
Need a refresher on the Verticals? Visit the Vertical-Level Configurations module .
For the Restaurants vertical, you also want the same as your English Search Configuration.
- Name as keyword search
- Location (builtin.location) as Inferred Filter
- Entity Type (builtin.entityType) as Inferred Filter
- c_promotingEvents.name as Inferred Filter
- Restaurant Features as Inferred Filter and Facet
- Restaurant Type as Facet
- mainPhone as Direct Answer
Instead of using the UI, you can also try using the JSON config code editor which would be much faster in this case.
- In a separate tab, navigate to your main English experience and click on the “Edit in JSON” link in the left navigation.
- Scroll to the “Restaurants” object in your Verticals and copy the JSON for the “searchableFields” object.
- Navigate to your new Spanish Experience and click on the “Edit in JSON” link.
- Copy in the searchableFields object inside the “restaurants” vertical
- Copy in the directAnswers object inside the “restaurants” vertical
Update the names of the verticals in the search configuration, which will be used in places like the Navigation and No Results screen in the frontend. You can edit the name in the UI in the “Additional Vertical Settings” or by updating the “name” property in the JSON Config. Name the verticals the following:
- faqs - “Preguntas Frecuentes”
- restaurants - “Restaurantes”
Let’s try a few queries in the “Test Query” module. Try the following and make sure you’re seeing results:
- restaurantes cerca de mi
- Hacen delivery?
You’ll notice that entities are returned! You’re seeing the primary language information displayed – that’s fine, you’ll see the translated results when you build your frontend. This tool is only meant to show you which entities are returned, not display the translated results.

Let’s add some Spanish Query Suggestions as well. You want to add some universal prompts, but also some vertical prompts. Navigate to the JSON Code Editor and insert the following:

    "querySuggestions": {
        "popularQueriesBlacklistedTerms": [],
        "universalPrompts": [
            "Restaurantes cerca de me",
            "Hacen delivery?",
            "Vende tarjetas de regalo?"
        ],
        "verticalPrompts": {
            "faqs": [
            "[[name]]"
            ],
            "restaurants": [
            "Restaurantes cerca de me",
            "Restaurantes en [[address.city]]"
            ]
        }
    },

If it’s there, remove the autocomplete object. It might look like this:

    "autocomplete": {
        "hardcodedPrompts": [
        "FAQs",
        "Restaurants"
        ],
        "disablePopularQueries": false
    },

Let’s build the frontend. Navigate to Pages > Turtlehead Tacos Search > Deploys, go to the Code Editor and click into the master branch. You should expect this to take a couple minutes to load – in the background, it’s starting up a container for your development. Once it loads, click “View Live Preview” to open your preview in a new tab.

Update the locale_config.json file to include the Spanish language. This is always the most important first step. You want to add an object for “es” and fill out the experienceKey to match the experienceKey you added in Step 2.

    "es": {
    // "fallback": [""], // allows you to specify locale fallbacks for this locale
    // "translationFile": "es.po", // the filepath for the translation file
    // "urlOverride": "", // provide an override for the url path for this locale if you want it to be different than specified in the urlFormat object
    "experienceKey": "answers-spanish" //  the unique key of your search configuration for this locale
    }

Add your universal search page. Click on Tools > Jambo Commands > Add Page. Use the universal-standard template and name the page “index.es”. Note: You will want to keep the layouts file (pages/index.es.html.hbs) because you do not want to add the Q&A component to your Spanish Universal Search Page since you don’t have enough resources to respond to these questions.

Need a refresher on the Frontend? Visit the Frontend Overview module , the Results Pages module , and the Results Cards module .
Navigate to the config/index.es.json file and update a few settings:
- Update the pageTitle to “Buscar”
- Update the componentSettings.DirectAnswer.FIELD_VALUE.cardType to be “multilang-allfields-standard” so that you’re using the card with built-in translations
- Update the componentSettings.SearchBar.placeholderText to “Buscar restaurantes y mas”.
Use Live preview to make sure your changes are working. Check out your universal search in the Live Preview by clicking out of the code editor and monitoring the Console for any errors. Once the preview is ready, do a hard refresh on the page. To preview your new “es” page, you’ll need to add the language code path to the URL. If you’re on the universal search, add in “es/index.html” to the url so it would look something like this: [[uniqueHash]]livepreview.sandboxlandingpagespreview.com/es/index.html. (The index.html can only be omitted on the root domain).

Try running a search for “restaurantes” – looks like we need to define that vertical for “es”!
Add the restaurants vertical for “es”. Click on Tools > Jambo Commands > Add Vertical.
- Add the Page Name as “restaurants.es”
- Add the Page Template “vertical-full-page-map”
- Update the verticalKey
- Use the card template “multilang-location-standard”

Once the pages are created, delete the pages/restaurants.es.html.hbs file so that the layout is inherited from the default page. Then update the restaurants.es.json page as follows:

Update the pageTitle to say “Resultados para Restaurantes”
Remove the verticalsToConfig object as you want to inherit this from the English language (you’ll create a new card that can be used for both languages in the next step). Make sure to delete the comma preceding the verticalsToConfig object and that you delete the right number of braces!

Add the Facets object like you did for the restaurants.json file in the Facets unit . The only difference between the config on the English page is the hardcoded translated text for the searchLabelText and placeholderText.

    "Facets": {
        "title": "", // The title to display above the facets
        "expand": false, // Allow the user to expand and collapse the facets
        "showMore": true, // Display a link to see more facet options within a facet
        "searchOnChange": true, // Will automatically run a search as facets are selected or unselected. Set to false to only trigger updates with an Apply button. 
        "showMoreLimit": 3,
        "fields": {
            "c_restaurantFeatures": {
                "searchable": true,
                "searchLabelText": "Buscar para caracteristicas",
                "placeholderText": "Buscar"       
            }
        }
    },

In the Result Cards Overview challenge, you forked the location-standard card and added the c_restaurantFeatures field to services. You’re going to do this again except instead of forking “location-standard”, you’re going to fork the “multilang-location-standard”. Go to Tools > Jambo Commands > Add Card. Use the “multilang-location-standard” and name the card “multilang-restaurant”.

Need a refresher on the Forking Cards and Mapping Fields? Visit the Customize Result Cards unit .
Update the multilang-restaurant card like you did in the Data Mappings challenge:
- Comment in the “services” property
- Map services to the c_restaurantFeatures
Need help? Check out the cards/restaurant/component.js file to see how you did it in the last challenge.
Navigate to the config/restaurants.json and update the cardType to your new “multilang-restaurant” (instead of “restaurant”). Refresh your preview and run a query for “restaurants” in English and “restaurantes” in Spanish to see the difference.
Add your FAQs Vertical. Go to Tools > Jambo Commands > Add Vertical:
- Add the Page Name “faqs.es”
- Add the Page Template “Vertical-Standard”
- Update verticalKey to faqs
- Use the Card Template “multilang-faq-accordion”
Similar to the index page, you don’t want to include the Q&A component in Spanish like you did in English so you’ll want to keep your faqs.es.html.hbs file.
Update the following in the config/faqs.es.json file:
- Update pageTitle to “Resultados para Preguntas Frecuentes”
Let’s override a translation. Make sure you have a file called “es.po” in the top-level “translations” directory. If not, create one.
Update your locale_config.json for the “es” locale. Update the translationFile property to “es.po” (the system will automatically assume that all translation files are in the translations directory).
Let’s update the string on the multilang-restaurant card to say “Features” instead of “Services”. This string is in the template.hbs file for the card. Navigate to the cards/multilang-restaurant/template.hbs file. Search for “{{ translate phrase=‘Services:’ }}“. Update it to say:
```
{{ translate phrase='Features:' }}
```
In your translations/es.po file, add the following:
```
msgid "Features:"
msgstr "Características:"
```
Which will translate the string “Features:” to “Características:” in Spanish.
Commit your code changes and make sure the build runs successfully.

You’re done! Congratulations on building out a Multi-Language Search experience!

Module Assessment

+<% util.points %> points

Weekly Challenge Streak: <% util.streakWeekly %>

You must include a first name and last name in your profile to create challenge environments.

Challenge account expires in <% util.expirationHours > 24 ? Math.round((util.expirationHours * 1.0) / 24) : util.expirationHours %> <% util.expirationHours > 24 ? (Math.round((util.expirationHours * 1.0) / 24) == 1 ? 'day' : 'days') : (util.expirationHours == 1 ? 'hour' : 'hours') %>.

Challenge account has expired. Please create a new account.

Report Card

Add the new Search Configuration for Answers Spanish

Add the Restaurants vertical name and searchable fields to the Spanish configuration

Add the FAQs vertical name and searchable fields to the Spanish configuration

Add Query Suggestions to your Spanish configuration with both Universal and Vertical Prompts

Add the es configuration in the localeConfig with experienceKey and translationFile

Add the Universal Search Page (index.es) and update the configuration

Add the Restaurants Page (restaurants.es) and update the configuration

Add the FAQs Page (faqs.es) and update the verticalKey and cardType

Add a new multilang-restaurant card and update the services property

Update the config/restaurants.json file to use the new multilang-restaurant custom card

Add translation override for Features in the multilang-restaurant card

Common Issues

Getting an error for your locale config?

You might see an error with your locale configuration.

For example, if you’re seeing the following printed in the Console in the code editor:

The locale 'es' is referenced but is not configuredinside locale_config.json

This means that you have created pages for a locale that is not specified in the locale_config.json file. Make sure that your locale code that you specify in the Locale_config.json file matches exactly with the locale code provided in the file name for the page.

For example, if you have this in your locale_config.json

    "en": {
      // "fallback": [""], // allows you to specify locale fallbacks for this locale
      // "translationFile": "<filepath>.po", // the filepath for the translation file
      // "urlOverride": "", // provide an override for the url path for this locale if you want it to be different than specified in the urlFormat object
      "experienceKey": "answers" //  the unique key of your search configuration for this locale
    },
    "es": {
      // "fallback": [""], // allows you to specify locale fallbacks for this locale
      // "translationFile": "<filepath>.po", // the filepath for the translation file
      // "urlOverride": "", // provide an override for the url path for this locale if you want it to be different than specified in the urlFormat object
      "experienceKey": "answers_spanish" //  the unique key of your search configuration for this locale
    },
    "fr_ca": {
      // "fallback": [""], // allows you to specify locale fallbacks for this locale
      // "translationFile": "<filepath>.po", // the filepath for the translation file
      // "urlOverride": "", // provide an override for the url path for this locale if you want it to be different than specified in the urlFormat object
      "experienceKey": "answers_spanish" //  the unique key of your search configuration for this locale
    }

Your page names must be like this:

index.es.json
index.fr_ca.json

And not like this:

index.fr.json
index.french.json
index.spanish.json
index.es_es.json

These should also match the locale code(s) in Content.

Previous Submissions

Attempt #<% submission.attemptNumber %>

<% submission.date %>

Score: <% submission.numericScore %>

Pending

Feedback

<% elem.innerText %>