Page Layout | Yext Hitchhikers Platform

What You’ll Learn

In this section, you will learn:

How to interpret the Page HBS file
Common updates to the Pages layout

Understanding the [page].html.hbs Files

As you’ve learned through the previous trainings, whenever you fork a new Page, it generates two files: a pageName.json file and a pageName.html.hbs file. The hbs file is what controls the layout of the page, and is where you should look if you want to modify the HTML of the page. The file will look similar to the below:

{{#> layouts/html }}
  <div>
    {{#> script/core }}
      {{> cards/all }}
      {{> templates/vertical-standard/script/searchbar }}
      {{> templates/vertical-standard/script/spellcheck }}
      {{> templates/vertical-standard/script/navigation }}
      {{> templates/vertical-standard/script/verticalresults }}
      {{> templates/vertical-standard/script/pagination }}
      {{> templates/vertical-standard/script/locationbias }}
      {{!-- {{> templates/vertical-standard/script/sortoptions }} --}}
      {{!-- {{> templates/vertical-standard/script/facets }} --}}
      {{!-- {{> templates/vertical-standard/script/filterbox }} --}}
      {{!-- {{> templates/vertical-standard/script/qasubmission }} --}}
    {{/script/core }}
    <div class="Answers AnswersVerticalStandard">
      <div class="Answers-navWrapper">
        <div class="Answers-container">
          {{> templates/vertical-standard/markup/searchbar }}
          {{> templates/vertical-standard/markup/navigation }}
        </div>
      </div>
      <!-- Add "Answers-resultsWrapper--withFilters" to this class list if you want to include filters or facets  -->
      <div class="Answers-container Answers-resultsWrapper">
        {{> templates/vertical-standard/markup/spellcheck }}
        <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>
    </div>
    <footer class="Answers-footer">
      {{> layouts/yext-logo }}
      {{> templates/vertical-standard/markup/locationbias }}
    </footer>
  </div>
{{/layouts/html }}

For a refresher about this file, refer back to the Adding & Updating Pages unit . Here, we learned that the {{/script/core }} partial contains the scripts of the components, while the following portion contains the markup. Because we’re focused on the layout of the page, we’ll be focusing on the markup portion.

You’ve actually already edited the page layouts in your training - every time you modify the hbs file to add a component (like facets) or remove one, you’re updating the page layout.

Note

If you change the page layout, make sure to thoroughly test across different window sizes and browsers to ensure it appears as you desire. Browser & device emulators are often helpful for this (we recommend Browserstack ). You’ll also need to keep in mind your modifications any time you update your theme.

Example: Adding Custom HTML

Let’s say we want to add custom HTML to the page, for example, add a custom banner on my FAQ page that directs emergency questions to a hotline.

You would first decide where you want this to display. In this case, we’d like to show this banner anytime results are displayed, so you’d place it in the Answers-resultsWrapper div.

Here, we’ve added <div class="Answers-alertBanner">For urgent requests, please call our <a href="tel:999-999-9999">emergency hotline</a></div> to add that banner.

<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>

Next, we’ll need to style the newly added HTML. We can 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;
    }
  }
}

By adding the desired text to the markup (bottom portion) of the faq.html.hbs file, and styling this text as a banner in the answers.scss file, we’re able to generate the below banner.

Example: Changing the Order of Components

Another use case would be changing the order of components on your page. For example, if we wanted to add the sort options above the search results, we could move the sort options component line {{> templates/vertical-standard/markup/sortoptions }} underneath the spellcheck component.

<div class="Answers-container Answers-resultsWrapper">
  {{> templates/vertical-standard/markup/spellcheck }}
  {{> templates/vertical-standard/markup/sortoptions }}
  <div class="Answers-filtersAndResults">
    <div class="Answers-filtersWrapper">
      {{!-- {{> 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>

If we add some additional CSS below in answers.scss:

.yxt-SortOptions-options {
  margin: 0;
  display: flex;
}

.yxt-SortOptions-option {
  align-items: center;
  margin: .125rem 0.5rem .125rem 0;
}

We’ll be able to display my sort options above the results in a row.

Sort Options Template change

unit Quiz

+20 points

Daily Quiz Streak: 0

Quiz Accuracy Streak: 0

Question 1 of 3

What portion of the file controls the HTML layout of the body of the page?

The top portion with the component scripts

The bottom portion with the component markdown and HTML

Question 2 of 3

True or False: Adding custom HTML typically only requires changing the page's handlebars file

True: The handlebars file will automatically format any custom HTML

False: Most often, you'll also want to change the styling of that HTML as well, which will require editing the answers.scss file.

Question 3 of 3

True or False: You cannot change the order of Search components on a page.

True: The order that components are added on the page is inflexible.

False: You can control the order in which Search JS components are added to the page in your page's hbs file.

Way to go, you passed! 🏁

You've already completed this quiz, so you can't earn more points.You completed this quiz in 1 attempt and earned 0 points! Feel free to review your answers and move on when you're ready.

1^st attempt

0 incorrect

Feedback

<% elem.innerText %>