loading

Page Layout| 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.

light bulb
Tip
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. Custom 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 Daily Quiz Streak: 0
Quiz Accuracy Streak Quiz Accuracy Streak: 0
    Error Success Question 1 of 3

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

    Error Success Question 2 of 3

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

    Error Success Question 3 of 3

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

    Climbing that leaderboard! 📈

    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.
1st attempt
0 incorrect
Splash Loading