Tags

Configuration for each of the components. All of the top-level components’ properties are configurable from within this section.

breadcrumbs

All of these are optional.

Corrected

The corrected string will appear after the word that wasn’t found, and before the autocorrect. For example, with the above code you’d see olya was not found, we corrected to olay.

The above changes the behavior of the breadcrumbs if you are using the out of the box gb-breadcrumbs.

Sample configuration:

tags: {
  breadcrumbs: {
    showLabels: true;
    labels: {
      results: "Here are all of the results we found:",
      noResults: "We found nothing, unfortunately.",
      corrected: " was not found, we corrected to",
    }
  }
}

collections

A string-to-string map of collection name to display-friendly collection name.

For example:

tags: {
  collections: {
    mainCollection: "Products",
    faq: "FAQs",
    articles: "Articles"
  }
}

In this example, we define the labels for these collections. mainCollection and faqsAndArticles also have to be defined under the collections configuration at the parent level. Here is an example to match the snippet above from the top level configuration.

collection: {
  options: ['faq', 'articles', 'mainProducts'],
  default: 'mainProducts',
}

infinite-scroll

loadMore

• true: displays a load more button
• false: fetch on scroll

loaderLabel

A label used for the gb-infinite-loader tag, displayed when component is fetching.

windowScroll

With windowScroll set to false, the scroll listener is attached to the gb-infinite-list tag. In some cases, clients may want the scroll listener on the window, so that the component is not inside of a scrollable container, but instead listens to scrolls on the entire window. This can be done by setting windowScroll to true.

For example:

tags: {
  infiniteScroll: {
    loadMore: true
  }
}

sort

Under the Sort section you can outline the labels to use for the search sort configuration. For example, if your sort configuration under Search looks like this:

search: {
  sort: {
   options: [
    { field: '_relevance', descending: true },
    ...(loggedin ? [
       { field: 'product_price', descending: false }
       { field: 'product_price', descending: true },
     ] : []),
    { field: 'item.rating', descending: true },
    { field: 'title', descending: false },
    { field: 'title', descending: true },
  ]
 }
}

Then the tags section would label these as such:

tags : {
 sort: {
   labels: [
     'Most Relevant',
     ...(loggedin ? [
       'Price (Low to High)',
       'Price (High to Low)',
     ] : []),
     'Top Rated (High to Low)',
     'Alphabetical',
     'Reverse Alphabetical'
   ]
 }
}