Personalize yxt-VerticalResultsCount text

Search
1

Hi community

My client would like to adapt the yxt-VerticalResultsCount text from
image
to
image
Showing 1- 10 of 16 results

I went to “templates/vertical-map/script/verticalresultscount”
where I see
image

But from here I am stuck, could you advise how to edit the content?

Thank you.

Lucas B.

2

Hi Lucas,

The file you found is the call to the Answers UI SDK; every component in that SDK have a template. You can accomplish what you need by overriding that template. More information can be found here: Custom Template for Component | Hitchhikers

Here’s the template for the VerticalResultsCount component that is being used now: answers-search-ui/verticalresultscount.hbs at master · yext/answers-search-ui · GitHub

If you wanted to change it, you’d do the following:

  1. In the partials directory, add a new file (I called mine verticalresultscount-override.hbs). this file should contain your updated template:
{{#unless isHidden}}
  <div class="yxt-VerticalResultsCount"
    aria-label="{{translate phrase='[[start]] through [[end]] of [[resultsCount]]' start=pageStart end=pageEnd resultsCount=total }}">
    <div aria-hidden="true"> Mostrando
      {{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
      }} resultados
    </div>
  </div>
{{/unless}}
  1. Shadow the VerticalResultsCount partial (found in themes/answers-hitchhiker-theme/templates/vertical-standard/script/verticalresultscount.hbs), and reference the new template using stringifyPartial .
 ANSWERS.addComponent('VerticalResultsCount', {
  container: '#js-answersVerticalResultsCount',
  template: {{{stringifyPartial (read 'partials/verticalresultscount-override') }}},
  ...{{{ json componentSettings.VerticalResultsCount }}}
});

If you’re on a version of the theme earlier than v1.19, you can instead do

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

Let us know how this works for you!

Thanks,
Rose

3

Hi Rose.

Thank you for the help.

I am overriding the template, however it seems that the code is ignoring the count and is just displaying the static content “Mostrando resulltados”
image

Somehow it is ignoring the section
{{translate
phrase=
‘[[start]]
-
[[end]]
of
[[resultsCount]]’
context=‘Example: 1-10 of 50’
start=pageStart
end=pageEnd
resultsCount=total
}}

I have tried adapting the code but nothing seems to be working.

Could you advise?

Thank you.

Lucas B.

4

Hi Lucas,

There appears to be an issue with the translations and overriding the template, escalating this to our engineering team and will report back. In the interim, you can remove the calls to “translate phrase” and just put the single translation (referencing pageStart, pageEnd and total:

{{#unless isHidden}}
  <div class="yxt-VerticalResultsCount">
    <div aria-hidden="true"> Mostrando {{pageStart}} - {{pageEnd}} de {{total}} resultados
    </div>
  </div>
{{/unless}}