Updated Answers Hitchhikers Theme in Jambo - 7/6

Product/Library Releases & New Features
1

Introducing the latest Answers Hitchhikers Theme (

The Answers Hitchhiker Theme received a number of awesome updates that we’re excited to share. See below for a full summary. In order to get on the latest theme, you’ll need to run Jambo Commands > Upgrade Theme (training module coming soon - reach out for assistance!).

Key features include:

  • Direct Answers allfields-standard card
  • Easier ways to update common parts of the layout, like header and footer
  • Improved styling
  • New pageSettings on config>page.json file
  • Support for defaultInitialSearch

Direct Answers allfields-standard card

The theme now has a new built-in card for Direct Answers. The card defines some default formatting and layout by field type from the Knowledge Graph.

For new repos, this will “just work” for you and you can run Jambo Commands > Add Direct Answer card to fork the card in the theme and customize, if needed.

For existing repos, you’ll need to take a few steps to use this:

  • Update your sdkVersion to v1.4 or greater
  • You can run Jambo Commands > Upgrade Theme, which will add the allfields-standard card to the theme.
  • You’ll need to update your index.json file to include the defaultCard property and make sure to remove the footerText property if you have it as that will now be controlled by your Direct Answer card.
    "componentSettings": {
            "DirectAnswer": {
                 "defaultCard": "allfields-standard"
             }
      }
  • You’ll need to update the index.html.hbs file to include a partial for the Direct Answer cards, like this:
    {{> directanswercards/all }}

(Remember that Direct Answers currently only works for Universal Search)

To learn more about Direct Answers and get the latest information, visit the Formatting Direct Answers unit in the training.

Changing your Layout

In the latest version of the theme, we’ve moved the layout/html.hbs to the theme so that it can be updated with future theme upgrades. We also have placeholder partials for header, footer and headincludes changes as those are the most common things you’ll want to customize on the layout. This will let you do so without having to override the core layout.

You can learn more about updating layouts in the training here.

product-prominentimage Card Styling Updates

We made a number of updates to make this styling optimized for cards that might have varying content so that the page has more standard and sleek styling by default. We’ve also adjusted the styling of CTAs on desktop to look like mobile.

Vertical-Grid Page Template Updates

Besides for some styling optimizations, we also made it possible to control the number of columns in the grid. You can do this by adjusting the following class in the html.hbs file.

<div class="Answers-container Answers-resultsWrapper Hitchhiker-3-columns">

If you change it to “4-columns” it will adjust to being 4 columns instead, and so on. Keep in mind up can currently only set it to 2, 3 or 4 columns.

In previous versions of the theme, the page template set maxNumberOfColumns in the config/ json file. If you want to use the updated layout from the theme, you can copy over the html.hbs template from the theme (theme/answer-hitchhiker-theme/templates/vertical-grid/page.html.hbs) and paste into your existing page html.hbs file. You’ll also want to remove the property maxNumberOfColumns from your config>json file.

Page Settings in config.json file

This is a new object in the config/[pageName].json files called pageSettings. Generally, Page Settings control configuration that is shared or required by multiple components on the page.

At the moment, this only includes the “search” object which allows you to set a default initial search (more on that below). We’ll be adding more features here over time.

You can read more about this in the training here.

Default Initial Search on Vertical Search

We recently added support for default initial search in pageSettings. This feature allows you to have a default search on vertical search only. The most common use case would be to set it as an empty search so "defaultInitialSearch": "". This will automatically return all entities. You can also choose to enter a specific query if needed.

When a user clicks on a vertical when there’s no search, it’ll run this search query by default.

Odds & Ends

  • Updated the links-standard card per feedback from you all in the Community, specifically unescaping details by default (since it’s often returning raw HTML) and adding styling to bold text in strong tags <b>
  • Reduced padding between the navigation component and the search results component on all pages
  • Updated Page templates to include new things like removableFilters, verticalLimit, universalLimit, and defaultInitialSearch by default
2 Likes