Shopify Predictive Search JS API
Configuration options
Options | Type | Description |
---|
q (required) | String | The search query. |
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) {
});
predictiveSearch.on("error", function(error) {
});
predictiveSearch.query("The Calling");
Success Response
{
"resources": {
"results": {
"products": [
{
"available": BOOLEAN,
"body": STRING w/HTML,
"compare_at_price_max": DECIMAL ("0.00" when the product has no variants with a "compare_at_price"),
"compare_at_price_min": DECIMAL ("0.00" when the product has no variants with a "compare_at_price"),
"handle": STRING,
"id": INTEGER,
"image": STRING e.g, "https://cdn.shopify.com/s/...",
"price": DECIMAL,
"price_max": DECIMAL,
"price_min": DECIMAL,
"tags" : ARRAY OF STRING,
"title": STRING,
"type" : STRING,
"url": STRING e.g, "/products/fast-snowboard?_pos=1&_psq=snowb&_ss=e&_v=1.0",
"variants": [
{
"available": BOOLEAN,
"compare_at_price": DECIMAL (nullable),
"id": INTEGER,
"image": STRING e.g, "https://cdn.shopify.com/s/...",
"price": DECIMAL,
"title": STRING,
"url": STRING e.g, "/products/fast-snowboard?_pos=1&_psq=snowb&_ss=e&_v=1.0"
}
],
"vendor": STRING
}
]
}
}
}
HTTP status 3xx-4xx
Response
predictiveSearch.on("error", function(error) {
console.error(error.status);
console.error(error.name);
console.error(error.message);
console.error(error.retryAfter);
});