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

packages/theme-predictive-search-component/src/theme-predictive-search-component.js

@@ -1,6 +1,7 @@
 import PredictiveSearch from "@shopify/theme-predictive-search";
 
 var DEFAULT_PREDICTIVE_SEARCH_API_CONFIG = {
+  search_path: PredictiveSearch.SEARCH_PATH,
   resources: {
     type: [PredictiveSearch.TYPES.PRODUCT],
     options: {

packages/theme-predictive-search/README.md

@@ -8,6 +8,11 @@
     <th>Type</th>
     <th>Description</th>
   </tr>
+  <tr>
+    <td><code>search_path</code> (optional)</td>
+    <td>String</td>
+    <td>Search path to prepend the predictive search route in different locales (e.g. <code>/fr/search</code>). Default to <code>/search</code></td>
+  </tr>
   <tr>
     <td><code>resources</code> (required)</td>
     <td>Object</td>
@@ -16,7 +21,7 @@
   <tr>
     <td><code>type</code> (required)</td>
     <td>Array</td>
-    <td>Specifies the type of results requested. Valid values: <code>product</code>, <code>page</code>, <code>article</code>.</td>
+    <td>Specifies the type of results requested. Valid values: <code>product</code>, <code>page</code>, <code>article</code>, <code>collection</code>.</td>
   </tr>
   <tr>
     <td><code>limit</code> (optional)</td>
@@ -50,6 +55,7 @@ See the [help docs for Predictive Search](https://help.shopify.com/en/themes/dev
 import PredictiveSearch from "@shopify/theme-predictive-search";
 
 var predictiveSearch = new PredictiveSearch({
+  search_path: PredictiveSearch.SEARCH_PATH,
   resources: {
     type: [PredictiveSearch.TYPES.PRODUCT],
     limit: 4,

packages/theme-predictive-search/__tests__/request.test.js

@@ -21,7 +21,26 @@ describe("request()", () => {
           .body(JSON.stringify({ foo: "bar" }))
       );
 
-      request("config=foo", "foo-200", spyOnSucess);
+      request("/search", "config=foo", "foo-200", spyOnSucess);
+
+      jest.runAllTimers();
+
+      expect(spyOnSucess).toHaveBeenNthCalledWith(1, {
+        query: "foo-200",
+        foo: "bar"
+      });
+    });
+
+    it("valid with locale search route", () => {
+      const spyOnSucess = jest.fn();
+      xhrMock.get(/^(\/[a-z-]*)?\/search\/suggest\.json/g, (req, res) =>
+        res
+          .status(200)
+          .header("Content-Type", "application/json; charset=utf-8")
+          .body(JSON.stringify({ foo: "bar" }))
+      );
+
+      request('/pt-pt/search', "config=foo", "foo-200", spyOnSucess);
 
       jest.runAllTimers();
 
@@ -40,7 +59,7 @@ describe("request()", () => {
           .body(JSON.stringify({ foo: "bar" }))
       );
 
-      request("config=foo", "foo-200", spyOnSucess);
+      request("/search", "config=foo", "foo-200", spyOnSucess);
 
       jest.runAllTimers();
 
@@ -58,7 +77,7 @@ describe("request()", () => {
           .body("boom")
       );
 
-      request("config=foo", "foo-200-invalid", null, error => {
+      request("/search", "config=foo", "foo-200-invalid", null, error => {
         expect(error).toBeInstanceOf(Error);
         expect(error.status).toBe(200);
         expect(error.message).toBe(
@@ -78,7 +97,7 @@ describe("request()", () => {
           .body("boom")
       );
 
-      request("config=foo", "foo-200-invalid", null, error => {
+      request("/search", "config=foo", "foo-200-invalid", null, error => {
         expect(error).toBeInstanceOf(Error);
         expect(error.status).toBe(200);
         expect(error.message).toBe(
@@ -95,7 +114,7 @@ describe("request()", () => {
         res.status(200).body("boom")
       );
 
-      request("config=foo", "foo-200-invalid", null, error => {
+      request("/search", "config=foo", "foo-200-invalid", null, error => {
         expect(error).toBeInstanceOf(Error);
         expect(error.status).toBe(200);
         expect(error.name).toBe("Content-Type error");
@@ -118,7 +137,7 @@ describe("request()", () => {
           .body("boom")
       );
 
-      request("config=foo", "foo-404", null, error => {
+      request("/search", "config=foo", "foo-404", null, error => {
         expect(error).toBeInstanceOf(Error);
         expect(error.status).toBe(404);
         expect(error.name).toBe("Not found");
@@ -144,7 +163,7 @@ describe("request()", () => {
             )
         );
 
-        request("config=foo", "foo-422", null, error => {
+        request("/search", "config=foo", "foo-422", null, error => {
           expect(error).toBeInstanceOf(Error);
           expect(error.status).toBe(422);
           expect(error.name).toBe("Invalid parameter error");
@@ -164,7 +183,7 @@ describe("request()", () => {
             .body("Invalid parameter error")
         );
 
-        request("config=foo", "foo-422-invalid", null, error => {
+        request("/search", "config=foo", "foo-422-invalid", null, error => {
           expect(error).toBeInstanceOf(Error);
           expect(error.status).toBe(422);
           expect(error.name).toBe("JSON parse error");
@@ -191,7 +210,7 @@ describe("request()", () => {
             )
         );
 
-        request("config=foo", "foo-429", null, error => {
+        request("/search", "config=foo", "foo-429", null, error => {
           expect(error).toBeInstanceOf(Error);
           expect(error.status).toBe(429);
           expect(error.name).toBe("Throttled");
@@ -212,7 +231,7 @@ describe("request()", () => {
             .body("Throttled")
         );
 
-        request("config=foo", "foo-429-invalid", null, error => {
+        request("/search", "config=foo", "foo-429-invalid", null, error => {
           expect(error).toBeInstanceOf(Error);
           expect(error.status).toBe(429);
           expect(error.name).toBe("JSON parse error");
@@ -238,7 +257,7 @@ describe("request()", () => {
             )
         );
 
-        request("config=foo", "foo-417", null, error => {
+        request("/search", "config=foo", "foo-417", null, error => {
           expect(error).toBeInstanceOf(Error);
           expect(error.status).toBe(417);
           expect(error.name).toBe("Expectation Failed");
@@ -255,7 +274,7 @@ describe("request()", () => {
     it("head request", done => {
       xhrMock.get(/^\/search\/suggest\.json/g, (req, res) => res.status(500));
 
-      request("config=foo", "foo-500", null, error => {
+      request("/search", "config=foo", "foo-500", null, error => {
         expect(error).toBeInstanceOf(Error);
         expect(error.status).toBe(500);
         expect(error.name).toBe("Server error");

packages/theme-predictive-search/__tests__/theme-predictive-search.test.js

@@ -4,6 +4,7 @@ import searchAsYouTypeTheCallingFixture from "../__fixtures__/search_as_you_type
 
 /* eslint-disable camelcase */
 const defaultConfig = {
+  search_path: PredictiveSearch.SEARCH_PATH,
   resources: {
     type: [PredictiveSearch.TYPES.PRODUCT],
     options: {

packages/theme-predictive-search/src/request.js

@@ -9,8 +9,9 @@ import {
   GenericError
 } from "./utilities/CustomError";
 
-export default function request(configParams, query, onSuccess, onError) {
+export default function request(searchPath, configParams, query, onSuccess, onError) {
   var xhr = new XMLHttpRequest();
+  var route = searchPath + '/suggest.json';
 
   xhr.onreadystatechange = function () {
     if (xhr.readyState === XMLHttpRequest.DONE) {
@@ -123,7 +124,7 @@ export default function request(configParams, query, onSuccess, onError) {
 
   xhr.open(
     "get",
-    "/search/suggest.json?q=" + encodeURIComponent(query) + "&" + configParams
+    route + "?q=" + encodeURIComponent(query) + "&" + configParams
   );
 
   xhr.setRequestHeader("Content-Type", "application/json");

packages/theme-predictive-search/src/theme-predictive-search.js

@@ -10,18 +10,30 @@ export default function PredictiveSearch(config) {
     throw new TypeError("No config object was specified");
   }
 
+  var configParameters = config;
+
   this._retryAfter = null;
   this._currentQuery = null;
 
   this.dispatcher = new Dispatcher();
   this.cache = new Cache({ bucketSize: 40 });
-  this.configParams = objectToQueryParams(config);
+
+  this.searchPath = configParameters.search_path || "/search";
+
+  if(configParameters.search_path) {
+    delete configParameters['search_path'];
+  }
+
+  this.configParams = objectToQueryParams(configParameters);
 }
 
+PredictiveSearch.SEARCH_PATH = "/search";
+
 PredictiveSearch.TYPES = {
   PRODUCT: "product",
   PAGE: "page",
-  ARTICLE: "article"
+  ARTICLE: "article",
+  COLLECTION: "collection"
 };
 
 PredictiveSearch.FIELDS = {
@@ -62,6 +74,7 @@ PredictiveSearch.prototype.query = function query(query) {
   }
 
   requestDebounced(
+    this.searchPath,
     this.configParams,
     query,
     function(result) {