Search X / Getting Started / Configuration Objects

Configuration Objects

We customize Search X by declaring configuration objects on any page that contains the core HTML tags.

Pass additional options to Search X using the window.sx_{{type}} objects. The two available types are 'autocomplete' and 'results'; i.e. window.sx_autocomplete and window.sx_results. Define the objects anywhere on the page, and you can start to refine your custom settings with options field. Below is a quick example. Please see the table further below Configuration Options for specific options and their detailed configurations.

Please note that options provided in window.sx_autocomplete will NOT apply to window.sx_results, and vice versa. Each widget can be configured uniquely wherever it is used. Configuration options are not applied globally. You can define your window.sx_{{type}} objects separately in their own <script> tags if you like. The example below combines everything together into a single <script> tag.

*You may include our core javascript blob and the window.sx_{{type}} objects in separate <script> tags at your discretion. The above example places them all inside the same <script> tag just for full illustration.

~CE

<div id="sx-autocomplete"></div>
<div id="sx-results"></div>

<script>
  window.sx_autocomplete = {
    debug: true,
    options: {
      display: {
        hide_sold_out: true,
        icon_open: true
      },
      sort: 'popular'
    }
  }

  window.sx_results = {
    debug: true,
    options: {
      pf_boost: {
        field: 'product_type',
        value: ['men', 'bags'] // ['men', 'women'] // LOWEST TO HIGHEST, .length <= 2
      },
      cb: {
        data: showCBData,
        render: showCBPrint
      },
      display: {
        layout: 'right',
        show_all_variants: false
      },
      facets: {
        collections: {
          label: 'Categories'
        },
        option_0: {
          label: 'Colors',
          filter_exclude: '\\$|[0-9]'
        },
        option_1: {
          label: 'Sizes',
          filter_include: '(^[xs|s|m|l|xl]$)|extra|small|medium|large|[0-9]'
        },
        option_2: {
          hide: 'true'
        },
        product_type: {
          label: 'Product Type'
        },
        vendor: {
          label: 'Brands'
        },
        tags: {
          filter_exclude: '^[0-9]+'
        }
      },
      scope_labels: {
        articles: 'Posts'
      }
    }
  }
</script>
HTML