The frontend of Search controls what the user sees when they ask a question, including how the results page is structured, what each results card looks like, and other optional components like facets. The Search Frontend Theme is the low-code option that allows you to quickly build a frontend using JSON, HTML, CSS, and JavaScript. It must be connected to a Search backend to populate search results.

Components of the Frontend

There are three components of the Search Frontend Theme: the Search UI SDK, the Theme, and Jambo.

The Search UI SDK JavaScript Library

The Search UI SDK is the JavaScript library of components that define the frontend Search experience, such as the Search Bar, Universal Search Results, and Direct Answers.

The Theme

The Theme is a bundled package of files and code templates that sets up the basic structure and functionality for an entire Search experience.

To access the Theme, you must use a solution template called the "Search Jambo Template." The Search Jambo Template contains the Answers Hitchhiker Theme - all the files and code structure for results pages and result cards. The Theme files translate the configuration files in your code repository to use the Search UI SDK components, so you don't have to manually add or create components from scratch. From there, you can add customizations like changing branding or adding custom cards.

The Theme serves two main functions:

1. A translation layer between the configuration files in your code repository and the Search UI SDK.
2. A set of templates for things like Pages and Cards to make it easier for you to develop and customize your experience.

Jambo

Jambo is a static site generator that takes all the files in your repository - including theme files, templates, and customizations - and creates the static HTML pages that an end user actually sees. Jambo also provides commands that enable you to easily interact with the theme, such as by adding verticals, adding cards, and overriding the theme. Because the theme itself is complex and fragile, Jambo handles direct manipulation by creating copies of the theme template files for you.

Think of the Theme as an architect and Jambo as the contractor. The architect specifies the overall design with blueprints; the contractor takes materials and blueprints and produces the finished product. The Theme leverages Jambo's templating power to convert intuitive markup and configuration files into raw HTML files that make all the needed calls to the Search UI SDK.

The Jambo Build Process

If you're building a Search experience with the Theme and Jambo, you'll go through these steps:

1. Create a repository that houses your code.
2. Update files in that repository.
3. Preview those changes locally.
4. Commit your changes.
5. The system attempts to "build."
6. The system "deploys" or "publishes."

Jambo and Jamstack

At its core, Jambo is a static site generator (SSG) that relies on the JAM architecture (Jamstack). Written in JavaScript, Jambo operates on a set of JSON files and Handlebars templates to produce static HTML files that can be served from a CDN.

Why Jamstack?

1. Better performance. Pages are generated at deploy-time and delivered over a CDN - the most recent version of every page is accessible from multiple points of presence across the globe.
2. Lower cost of scaling. A Jamstack web app uses fewer resources since servers and databases are not necessarily needed. CDNs help with scalability by serving deployments from anywhere.
3. Better security. With Jamstack, you're using static files - read-only and not susceptible to the same types of attacks as traditional server-side applications.
4. Better developer experience. There is no tight coupling between the application backend and frontend, giving developers more targeted development and debugging.

Jambo Commands

To do things like add pages or override the theme, you will use "Jambo Commands." You can access them by clicking on Tools > Jambo Commands in the Code Editor.

Theme Repo Structure

A Search Jambo Template repository is structured like this:

cards
  -> card-name
    -> component.js
    -> template.hbs
ci
  -> build.sh
  -> serve.sh
config
  -> global_config.json
  -> locale_config.json
  -> some_page.json
layouts
  -> footer.hbs
  -> header.hbs
pages
  -> some_page.html.hbs
static
  -> assets
  -> js
  -> scss
themes
  -> answers-hitchhiker-theme
partials
  -> some_template.hbs
translations
  -> languageCode.po

The folders you'll interact with most are cards, config, pages, and static.

Themes

The Theme exists as part of the repository. When you create a search site using the Search Jambo Template, you will automatically have the Frontend Theme. You can browse through and familiarize yourself with the Theme as you become more familiar with Search. The Theme changes over time - you'll learn how to update it so you have the latest version.

Cards, Config, and Pages

You'll spend most of your time customizing Cards, Config, and Pages:

• A Page and Config are put together to make a static HTML page using Jambo Commands. When you add a "restaurants" vertical in your search experience, you add a "page" - Jambo automatically adds both the html.hbs and config.json file you need.
• Cards control the way that results look on universal or vertical Search pages. You can specify data mappings, CTAs, and layout per card.

Static Assets

In the static directory, you can:

• Update SCSS
• Add image assets
• Add fonts
• View JavaScript formatters

Overriding Parts of the Theme

You shouldn't change any of the theme files directly - if you do, there'd be no way to update your theme in the future without breaking things. Instead, Jambo provides a method for overriding (also called "shadowing") any file in the theme through Jambo Commands.

When you use Jambo Commands to do things like add a card or override the layout, you are forking the theme - taking the file that exists in the theme, making a copy of it, and making it your own. Jambo then knows to use your overridden files instead of the matching file in the Themes folder.

Examples of when you'd override:

• Change data mappings in a card (e.g., use delivery hours instead of business hours, or update the CTA label from "Call" to "Reach Out"). Use Add a New Card with the existing card as a template, then add your customizations.
• Add hardcoded default config for the Search Bar across all pages generated with the Vertical template. Override the SearchBar script partial.

Create a Pages Site with Jambo

Search frontends are housed in the Pages architecture. When you're ready to build a search experience, you'll create a Git repository in GitHub by creating a site in Pages and adding a repository with the Search Jambo Template, which generates a GitHub repository with all the pre-built files you need.

1. Click Pages in the navigation bar and click All Sites.
2. Click Add New Site in the top right corner.

3. In the Add a New Site modal, choose Pages or Classic Pages Site (Legacy). Yext recommends the standard Pages path.

   Pages:

   1. Choose where to store your repository. When building with Jambo and the Theme, select the option for Yext to manage the GitHub repo.

      

   2. Click Next.
   3. Fill in the name of your site.
   4. Select Create New Repository.
   5. Name your repo. This will be the name of the GitHub repo associated with the site.
   6. Keep Search Jambo Template selected.

   7. Click Create Site. Once the build completes successfully, you'll have your first deploy with links for preview, staging, and production.

      

   Classic Pages (Legacy):

   1. At the bottom of the Add New Site modal, click the add a Classic site link.
   2. Enter the name of your site.

   3. Click Continue. You will be directed to the Site screen.

      

   4. Click Create Repository at the bottom of the screen.
   5. Enter the name of your repo.
   6. Keep Search Jambo Template selected.
   7. Click Continue.
4. Now you are ready to open the Code Editor and start building your experience.