Overriding Vertical Results Count

Search
1

Hey Team -

Currently working on adding some accessibility asks for a client, and one of them includes adding an aria-label into the vertical results count on vertical searches.

I followed the steps outlined in Answers Advanced 10-4 for overriding a component (I used the Jambo command to override the specific file - verticalresultscount.hbs) However I’m not sure how to get the knowledge of the base js file that it’s utilizing to replicate it, albeit with a few added HTML lines.

Is there a way for me to see / view the reference JS file? Once I have it, do I just need to copy it, host it within the repo, and refernece it with my override HBS file?

Thanks for any help here!

2

Hi Jack,

That HBS file adds the container div for the SDK’s VerticalResultsCount component. The following DOM will be inserted into the div .

There’s a corresponding script partial here. That controls the actual addComponent call that the Theme makes to the SDK.

Let me know if you have any follow-up questions!

Best,
Bowen

3

Hey Bowen!

Thanks for the resource! That was super helpful.

To override the existing .hbs partial - I did the following:

  1. Copied the code you sent into the /partials folder as a new file and made adjustments, I did the following:
{{#unless isHidden}}
  <div class="yxt-VerticalResultsCount" role="status">
    <span class="screen-reader-text">{{translate phrase='[[start]] through [[end]] of [[resultsCount]]' start=pageStart end=pageEnd resultsCount=total }}</span>
    <div aria-hidden="true">
      {{translate
        phrase=
'<span class="yxt-VerticalResultsCount-start">[[start]]</span>
<span class="yxt-VerticalResultsCount-dash">-</span>
<span class="yxt-VerticalResultsCount-end">[[end]]</span>
<span class="yxt-VerticalResultsCount-of">of</span>
<span class="yxt-VerticalResultsCount-total">[[resultsCount]]</span>'
        context='Example: 1-10 of 50'
        start=pageStart
        end=pageEnd
        resultsCount=total
      }}
    </div>
  </div>
{{/unless}}
  1. Forked the script partial for verticalresultscount.hbs and changed it like so:
ANSWERS.addComponent('VerticalResultsCount', {
  container: '#js-answersVerticalResultsCount',
  template: `{{{read 'partials/verticalresultscount-override.hbs'}}}`,
  ...{{{ json componentSettings.VerticalResultsCount }}}
});

However, when I compile everything (everything appears to compile correctly - I didn’t get any errors in the console), the code seems to be just as it was before (e.g. using the default .hbs template). I would assume it’s running into an issue with my customization and defaulting back to the normal one, or not reading it at all - any ideas as to what might be happening?

4

Hello Jack,

I believe the issue is that you are including the file extension when referencing the partial. Does {{{read 'partials/verticalresultscount-override'}}}, work for you?

A few other things to verify is that

  • The partials directory is specified inside the partials property in jambo.json.
  • When overriding the ANSWERS.addComponent() call, make sure that it corresponds to the correct page template. For example, if you are trying to perform this override on a page built with the vertical-standard template, make sure that you override the script partial for templates/vertical-standard/script/verticalresultscount.hbs. If you would like this change to affect multiple pages which were built with different page templates, you will need to perform this override for each page template

Best,
Connor

5

Hi Jack,

Took a look at trying to override your VerticalResultsCount template.
The steps you took in your comment above are a good first step! Apart from smaller things like needing to override the script partial also for the vertical-grid page template, and removing the “.hbs” extension from your read of the override template (i.e. remove the .hbs from below)

  template: `{{{read 'partials/verticalresultscount-override.hbs'}}}`

there were two more unique things going on with your site. I’ll explain below.

First, since your {{translate}} helper call is intended to output HTML, we need to set escapeHTML='false' for the helper. It should look something like the below (other params omitted for brevity).

{{translate
  phrase='<span class="yxt-VerticalResultsCount-start">[[start]]</span>'
  escapeHTML='false
}}

Second, your faqs and links pages actually do not use the VerticalResultsCount component, which was released in SDK v1.6.0, but the more legacy behavior of VerticalResults displaying the results count. In order to update them to use the VerticalResultsCount, I would recommend looking at the current vertical-standard page layout in your theme, and updating your links.html.hbs and faqs.html.hbs to match it. The filepath for the latest vertical-standard page template your theme supports is themes/answers-hitchhiker-theme/templates/vertical-standard/page.html.hbs
You’ll also want to add the hideResultsHeader config option to your VerticalResults component, since we’ll be using VerticalResultsCount instead.

image
image1024×256 24.8 KB

Please let me know if this works for you!

6

@Oliver_Shi @Connor_Anderson
Hi Oliver and Connor!

I’m working with Jack on some accessibility changes. We want to add h2 labels for each vertical header in the “All” tab of Answers. Adding these headers was not as straightforward as adding headers to pages for the other verticals.

We know the vertical headers are contained within the divs classified as either “HitchhikerResultsStandard-titleLabel” or “HitchhikerResultsGridTwoColumns-titleLabel”. However, we can’t find where these divs are within the source code.

Do you have any suggestions as to where in the source code we should be looking?

Thanks!

Enoch

7

It sounds like you need to jambo override the universal section template. The templates are in your themes folder as desribed here: Introducing… Universal Search Section Templates!