Custom Results Page Code Examples | Yext Hitchhikers Platform

If you want to show a banner any time results are displayed, add the following to the handlebars file of the vertical of your choosing (e.g. faqs.html.hbs) within the Answers-resultsWrapper div:

<div class="Answers-alertBanner">For urgent requests, please call our <a href="tel:999-999-9999">emergency hotline</a></div>

It should look something like this:

<div class="Answers-container Answers-resultsWrapper">
  {{> templates/vertical-standard/markup/spellcheck }}
  <div class="Answers-alertBanner">For urgent requests, please call our <a href="tel:999-999-9999">emergency hotline</a></div>
  <div class="Answers-filtersAndResults">
    {{!-- <div class="Answers-filtersWrapper"> --}}
      {{!-- {{> templates/vertical-standard/markup/sortoptions }} --}}
      {{!-- {{> templates/vertical-standard/markup/filterbox }} --}}
      {{!-- {{> templates/vertical-standard/markup/facets }} --}}
    {{!-- </div> --}}
    {{> templates/vertical-standard/markup/verticalresults }}
  </div>
  {{> templates/vertical-standard/markup/pagination }}
  {{!-- {{> templates/vertical-standard/markup/qasubmission }} --}}
</div>

We can also add the below CSS for the .Answers-alertBanner class in our answers.scss file.

.Answers-alertBanner {
  width: 100%;
  text-align: center;
  background: var(--yxt-color-brand-primary);
  padding: 1rem;
  margin-bottom: 1rem;
  color: white;
  font-weight: bold;

  a {
    text-decoration: underline;

    &:hover {
      text-decoration: none;
    }
  }
}

Changing Chevron Image on Universal View All to an SVG

You’ll want to use the file path of the image you saved in the assets/images folder. In this example we will use "static/assets/images/double-echelon.svg" .

Depending on what theme you are on, the structure of your files may be different. With theme 1.28, the view more partial in the universalsectiontemplates looks like this:

Rather than calling the icon name directly here, the template calls an icon partial instead. This is to help consolidate and make sure all places that use this icon are now referencing the same icon. Once you override this theme file, you can replace the icon div with this div :

<div data-component="IconComponent"
      data-opts='{"iconUrl": "static/assets/images/double-echelon.svg"}'
      data-prop="icon">

It should look something like this in the Code Editor:

Note that you will need to override all universalsectiontemplates you’re using, such as standard and grid-three-columns.

Back

< Custom Facets and Sorting Code Examples

Custom Result Card Code Examples >

<% elem.innerText %>

Custom Results Page Code Examples | Yext Hitchhikers Platform

Alert Banner

Changing Chevron Image on Universal View All to an SVG