Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

@shopify/theme-predictive-search

4.0.0 • Public • Published

Shopify Predictive Search JS API

Configuration options

Options Type Description
resources (required) Object Requests resources results for the given query, based on the type and limit fields.
type (required) Array Specifies the type of results requested. Valid values: product, page, article.
limit (optional) Integer Limits the number of results returned. Default: 10. Min: 1. Max: 10.
options (optional) Object Specifies options for the requested resources based on the unavailable_products and fields settings.
unavailable_products (optional) String Specifies whether to display results for unavailable products. The three possible options are show, hide, and last. Set to last to display unavailable products below other matching results. Set to hide to filter out unavailable products from the search results. Default: last.
fields (optional) Array Specifies the list of fields to search on. Valid fields are: author, body, product_type, tag, title, variants.barcode, variants.sku, variants.title, and vendor. The default fields searched on are: title, product_type, variants.title, and vendor. For the best search experience, we recommend searching on the default field set or as few fields as possible.

See the help docs for Predictive Search for more information.


Getting started

import PredictiveSearch from "@shopify/theme-predictive-search";
 
var predictiveSearch = new PredictiveSearch({
  resources: {
    type: [PredictiveSearch.TYPES.PRODUCT],
    limit: 4,
    options: {
      unavailable_products: "last",
      fields: [
        PredictiveSearch.FIELDS.TITLE,
        PredictiveSearch.FIELDS.PRODUCT_TYPE,
        PredictiveSearch.FIELDS.VARIANTS_TITLE
      ]
    }
  }
});
 
predictiveSearch.on("success", function(json) {
  // See "Success Response" section of this document
});
 
predictiveSearch.on("error", function(error) {
  // See "HTTP status `3xx-4xx` Response" section of this document
});
 
predictiveSearch.query("Yeti SB165");

Success Response

// JSON Output
{
  "resources": {
    "results": {
      "products": [
        {
          "available": true,
          "body": "<p>The best bike ever made</p>",
          "compare_at_price_max": "5199.99",
          "compare_at_price_min": "4899.99",
          "handle": "yeti-sb165",
          "id": 111,
          "image": "https://cdn.shopify.com/s/...",
          "price": "4999.99",
          "price_max": "5199.99",
          "price_min": "4899.99",
          "tags": ["best", "bike", "ever", "made"],
          "title": "Yeti SB165",
          "type": "best-bike",
          "url": "/products/sb165",
          "variants": [
            {
              "available": true,
              "compare_at_price": "9999.99",
              "id": 222,
              "image": "https://cdn.shopify.com/s/...",
              "price": "9999.99",
              "title": "Yeti SB165 X01 build",
              "url": "/products/sb165/x01"
            }
          ],
          "vendor": "Yeti Cyclesr"
        }
      ]
    }
  }
}

HTTP status 3xx-4xx Response

predictiveSearch.on("error", function(error) {
  console.error(error.status); // Ex. output: 429
  console.error(error.name); // Ex. output: Throttled
  console.error(error.message); // Ex. output: Too Many Requests
 
  // When the request response HTTP status is 429
  console.error(error.retryAfter); // Ex. output: 100
});

Install

npm i @shopify/theme-predictive-search

DownloadsWeekly Downloads

146

Version

4.0.0

License

MIT

Unpacked Size

67.4 kB

Total Files

24

Last publish

Collaborators

  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar