Add search path and collection type to theme-predictive-search

[tauthomas01]

Purpose

The goal of this PR is to add an optional parameter when querying the predictive search suggestion. Currently, it is always default to /search/suggest.json. This would open allow international stores to use in their native languages. Example: /ja/search/suggest.json

I'm also adding "collection" type to be supported.

Approach

• Add optional search_path to the original config parameter when we instantiate new PredictiveSearchComponent.
• Add searchPath to the request function. At first, I wanted to put it at the end of the list of parameters, but it looked strange after the onError function callback. The best solution would be converting into ES6 and use default values

If nothing is put in the search_path options, it would default to /search

• Add PredictiveSearch.TYPES.COLLECTION: "collection" to support collection type

Testing

1. Run yarn link from this branch for both theme-predictive-search-component and theme-predictive-search folders.
2. From the theme repo, open the branch and run yarn link "@shopify/theme-predictive-search-component" and yarn link "@shopify/theme-predictive-search"
3. In your theme, create a new instance of predictive search with the new search_path parameter. Example:

  const searchDataConfig = {
      search_path: "/ja/search",
      resources: {
        type: [PredictiveSearch.TYPES.PRODUCT, 'collection'],
        limit: 4,
        options: {
          unavailable_products: PredictiveSearch.UNAVAILABLE_PRODUCTS.LAST,
          fields: [
            PredictiveSearch.FIELDS.TITLE,
            PredictiveSearch.FIELDS.VENDOR,
            PredictiveSearch.FIELDS.PRODUCT_TYPE,
            PredictiveSearch.FIELDS.VARIANTS_TITLE,
          ],
        },
      },
    };

    this.predictiveSearchComponent = new PredictiveSearchComponent({
      selectors: {
        input: selectors.input,
        reset: selectors.clear,
        result: selectors.mount,
      },
      // ...
      PredictiveSearchAPIConfig: searchDataConfig,
    });

[NoZiL]

this is related to #139

[martinamarien]

Looks good Thomas. Works as expected - I tested with different languages 👍
I think there's a bit of code duplication, and I'm wondering if it would be better to only pass in the search route as a param, instead of the full predictive search url. Let me know if you want to chat about it.

[martinamarien]

This is sort of a duplication of what's happening in request.js on line 14:

var route = searchUrl ? searchUrl : '/search/suggest.json';

I'm wondering if we should be passing in the full url - including /suggest.js or just the routes.search_url provided by shopify to the theme. As a theme dev, it's very easy to access that, and we could add suggest.js here or in request. What do you think?

Maybe something like:
Request.js

var route = searchUrl + '/suggest.json';

theme-predictive-search.js

  this.searchUrl = configParameters.search_url || '/search';
  if (configParameters.search_url) delete configParameters['search_url'];
 
  ...
}

PredictiveSearch.SEARCH_URL = "/search";

[tauthomas01]

Great suggestion! What I did is renaming search_url to search_path as we're now partially adding a "path" to the predictive search route instead of the full url /search/suggest.json

[martinamarien]

Looks good to me Thomas.
I 🎩 by passing in the French and English routes, as well as passing in no search path at all (defaults to /search). And tested with the new COLLECTION type.