Back
Module Assessment | Yext Hitchhikers Platform
Background
Imagine that you have fully QA’d your experience in Staging and are ready to go live with the integration. Turtlehead Tacos has requested the following integration approach:
- Yext will integrate a search bar within Turtlehead Taco’s existing Restaurant Page Builder Pages
Your Challenge
Make sure your Production Configuration Label is set to the most recent Search Configuration version number explicitly and not set on Latest. Remember from your Search Configuration training that you should always designate a specific configuration version label for Production (and can leave Staging on “Latest” like it is by default).
Navigate to Pages > Turtlehead Tacos Search > Deploys, go to the Code Editor, click into the master branch, and navigate to config > index.json file.
Update the Search Bar placeholder text (
componentSettings.SearchBar.placeholderText) to “Search across restaurants, community stories, and more”. Preview your change (you should see the placeholderText update!).Commit your change and this time in addition to the commit message. Click “View Recent Deploys”.
Once the deploy finishes, publish it to production.
- Open your Production URL and confirm your commit appears on the page. The search bar input text should read “Search across restaurants, community stories, and more”. Keep this production URL open as you’ll need it in later steps.
- At this point in your production accounts, you would add a search results page with a domain (something like search.yext.com or yext.com/search), but for the purposes of this challenge, we’ll use the production URL you just opened with a randomly-generated placeholder domain.
You are now ready to set up your search bar integration! Let’s add a search bar to the header of your restaurant pages. Navigate to Pages > Turtlehead Tacos Restaurants and edit the “Turtlehead Tacos Restaurant Pages” template.
Click on the
Navigation Bar with Yext Search Barmodule, click to edit the Search Experience, and selectanswersas your Search Experience.- Remove the Autocomplete Prompt Heading.
- Fill out the Search Results Page URL with the production URL from step 5.
Click the Preview URL link on the Page Builder template. You should see the Yext search bar in the navigation. Click on it to view the universal prompts you set previously and click on a prompt. You should be redirected to the search results page, in this case the production URL with the placeholder domain, with results populated.
The Turtlehead Tacos team decides they want to add the search bar to non-Page Builder templates as well. Let’s show them how easy it is to add the Yext search bar!
- We only want one search bar on a page at a time, so let’s disable the one in the nav bar. Click Edit Experience and change the experience dropdown to “None”.
- Add an HTML module above the Banner Image module.
Open the Adding a Search Bar integration guide’s Step 1: Initialize the Library . Replace the placeholder code in the HTML module code editor with the first code snippet from the guide. You’ll need to replace all the
"REPLACE_ME"variables:apiKey: Find this by navigating to Search > answers > Experience Details.experienceKey: Find this by navigating to Search > answers > Experience Details.businessId: Find this by navigating to Search > answers > Experience Details. You can also pull it from the URL of your account.redirectUrl: Use the same production URL with the placeholder domain from step 5.- Update the
placeholderTextwith your changes to the search experience: “Search across restaurants, community stories, and more”.
Move on to Step 2: Place the Search Bar in the integration guide. Copy the first code snippet and paste it at the end of the HTML module. Click Save.
Try running a search from your restaurant page!
Congratulations! You have “gone live” and integrated Search through the Page Builder templates!
Weekly Challenge Streak: <% util.streakWeekly %>
