Customize vertical order when on vertical search

Search Best Practices - Search Front-End
1

Hello, I would like to customize the order of the verticals on an answers site. Currently the verticals are in this order

image
image704×157 3.39 KB

I saw a thread about customizing the order on universal search (through boosting verticals), but am unsure how to do this for an all vertical answers experience. I did find the ‘isFirst’ config option, which conveniently would work for me because making ‘Products’ first would achieve the order I’m after. Unfortunately setting isFirst for products only affects the order when on the products page.

Anyways that’s what I tried so far, does anyone know how I can set the order?

1 Like
2

Rose solved this for me by overriding the navigation components script to always check if a vertical is ‘products’ when adding the isFirst config option I mentioned.

Note: She also recommended against forcing the order, saying that it was better to let answers determine it.

ANSWERS.addComponent("Navigation", Object.assign({}, {
container: "#js-answersNavigation",
verticalPages: [
{{#each verticalConfigs}}
{{#if (any verticalKey (lookup verticalsToConfig 'Universal'))}}
  {
    verticalKey: "{{{verticalKey}}}",
    {{#each ../excludedVerticals}}{{#ifeq this ../verticalKey}}hideInNavigation: true,{{/ifeq}}{{/each}}
    {{#ifeq ../verticalKey verticalKey}}isActive: true,{{/ifeq}}
    {{#ifeq verticalKey 'products'}} isFirst: true, {{/ifeq}} <-- ADD THIS --
    {{#if verticalKey}}
      {{#with (lookup verticalsToConfig verticalKey)}}
        {{!-- {{#if isFirst}}isFirst: {{isFirst}},{{/if}} --}} <-- COMMENT OUT THIS --
        {{#if icon}}icon: "{{{icon}}}",{{/if}}
        label: {{> verticalLabel overridedLabel=label verticalKey=../verticalKey fallback=@key}},
        url: 
          {{#if url}}
            "{{{relativePathHandler url=url relativePath=@root.relativePath}}}",
          {{else if ../url}}
            "{{{relativePathHandler url=../url relativePath=@root.relativePath}}}",
          {{else}}
            "{{{@key}}}.html",
          {{/if}}
      {{/with}}
    {{else}}
      {{#with (lookup verticalsToConfig "Universal")}}
        {{#if isFirst}}isFirst: {{isFirst}},{{/if}}
        {{#if icon}}icon: "{{{icon}}}",{{/if}}
        label: {{#if label}}"{{{label}}}"{{else}}"{{{@key}}}"{{/if}},
        url: 
          {{#if url}}
            "{{{relativePathHandler url=url relativePath=@root.relativePath}}}",
          {{else if ../url}}
            "{{{relativePathHandler url=../url relativePath=@root.relativePath}}}",
          {{else}}
            "{{{@key}}}.html",
          {{/if}}
      {{/with}}
    {{/if}}
  }{{#unless @last}},{{/unless}}
{{/if}}
{{/each}}
],
onCreate: function() {
  this._container.textContent = '';
}
}, {{{ json componentSettings.Navigation }}}));

{{!--
  Prints the vertical label according to specific logic
  Assumes @root has environment variables and global_config
  @param overridedLabel The hardcoded label from configuration in repo, meant to supercede defaults
  @param verticalKey The current vertical key, if it exists
  @param fallback The fallback for the label if all else doesn't exist
--}}
{{#*inline 'verticalLabel'}}
  {{~#if overridedLabel ~}}
    "{{{overridedLabel}}}"
  {{~ else ~}}
    HitchhikerJS.getInjectedProp(
      "{{{@root.global_config.experienceKey}}}",
      ["verticals", "{{{verticalKey}}}", "displayName"])
    {{~#if verticalKey ~}} || "{{{verticalKey}}}" {{~/if ~}}
    {{~#if fallback ~}} || "{{{fallback}}}" {{~/if ~}}
  {{~/if ~}}
{{/inline}}
1 Like
3

Hi Rose,

This is great! I am wondering how we can do this if we do not have an All tabs and we are setting one of our verticals as the index page? In our case we have the ‘Products’ vertical set as index and we would like for it to be first?

4

Hi Sarah,

If you do not have universal, the tabs will not reorder; so you should be good to just set “isFirst” in the verticalsToConfig object for products:

  "verticalsToConfig": {
    "products": { // The vertical key from your search configuration
      // "label": "", // The name of the vertical in the section header and the navigation bar
      // "verticalLimit": 15, // The result count limit for vertical search
      "universalLimit": 9, // The result count limit for universal search
      "cardType": "product", 
      "universalSectionTemplate": "grid-three-columns",
      "isFirst": true
    }
  }

Thanks,
Rose

1 Like