【Shopify.dev和訳】Ajax API/Reference/Predictive search

GET /search/suggest.json?q={query}&resources[type]=product

{
  "q": "bag",
  "resources": {
    "type": "product",
    "options": {
      "unavailable_products": "hide",
      "fields": "title,product_type,variants.title"
    }
  }
}

fetch("/search/suggest.json?q=bag&resources[type]=product&resources[options][unavailable_products]=hide&resources[options][fields]=title,product_type,variants.title")
  .then((response) => response.json())
  .then((suggestions) => {
    const productSuggestions = suggestions.resources.results.products;

    if (productSuggestions.length > 0) {
      const firstProductSuggestion = productSuggestions[0];

      alert(`The title of the first product suggestion is: ${
        firstProductSuggestion.title}`
      );
    }
  }
);

{
  "resources": {
    "results": {
      "products": ARRAY OF MATCHING product_object,
      "collections": ARRAY OF MATCHING collection_object,
      "pages": ARRAY OF MATCHING page_object,
      "articles": ARRAY OF MATCHING article_object
    }
  }
}

{
  "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",
    "featured_image": { // (If a variant doesn't have an associated featured_image, then all of the properties of featured_image are set to null.)
      "alt": STRING,
      "aspect_ratio": DECIMAL,
      "height": INTEGER,
      "url": STRING e.g, "https://cdn.shopify.com/s/...",
      "width": INTEGER
    }
  }],
  "vendor": STRING,
  "featured_image": { // (If a product doesn't have an associated featured_image, then all of the properties of featured_image are set to null.)
    "alt": STRING,
    "aspect_ratio": DECIMAL,
    "height": INTEGER,
    "url": STRING e.g, "https://cdn.shopify.com/s/...",
    "width": INTEGER
  }
}

{
  "status": "422",
  "message": "Invalid parameter error",
  "description": "Invalid option for `unavailable_products` parameter"
}

{
  "status": "417",
  "message": "Expectation Failed",
  "description": "Unsupported shop primary locale"
}

{
  "status": "429",
  "message": "Too many requests",
  "description": "Throttled"
}

Retry-After: 1

GET /search/suggest?q={query}&resources[type]=product&section_id={section_id}

{
  "q": "bag",
  "resources": {
    "type": "product",
    "options": {
      "unavailable_products": "hide",
      "fields": "title, product_type, variants.title"
    }
  },
  "section_id": "predictive-search"
}

const predictiveSearchSection = document.querySelector('.predictive-search-results');
var requestResponse;

fetch("/search/suggest?q=bag&resources[type]=product&resources[options][unavailable_products]=hide&resources[options][fields]=title,product_type,variants.title&section_id=predictive-search")
  .then((response) => {
    requestResponse = response;
    return response.text();
   })
  .then((text) => {
    if (!requestResponse.ok) {
      throw new Error(`${requestResponse.status}: ${text}`);
    }

    const resultsMarkup = new DOMParser()
      .parseFromString(text, 'text/html')
      .querySelector('#shopify-section-predictive-search').innerHTML;

    predictiveSearchSection.innerHTML = resultsMarkup;
  })
  .catch((error) => {
    console.error(error);
  });

{%- if predictive_search.performed -%}
  <div id="predictive-search-results">
    {%- if predictive_search.resources.products.size > 0 -%}
      <h3>Products</h3>
      <ul>
        {%- for product in predictive_search.resources.products -%}
          <li><a href="{{ product.url }}">{{ product.title }}</a></li>
        {%- endfor -%}
      </ul>
    {%- endif -%}
  </div>
{%- endif -%}

Copy
<div id="shopify-section-predictive-search">
  <div id="predictive-search-results">
    <h3>Products</h3>
    <ul>
      <li><a href="/products/running-shoes">Running Shoes</a></li>
      <li><a href="/products/tennis-shoes">Tennis Shoes</a></li>
    </ul>
  </div>
</div>

{
  "body": STRING w/HTML,
  "handle": STRING,
  "id": INTEGER,
  "featured_image": { // (If a collection doesn't have an associated featured_image, then all of the properties of featured_image are set to null.)
    "alt": STRING,
    "width": INTEGER,
    "height": INTEGER,
    "aspect_ratio": DECIMAL,
    "url": STRING e.g, "https://cdn.shopify.com/s/..."
  },
  "published_at": STRING DATE,
  "title": STRING,
  "url": STRING e.g, "/collections/snowboards?_pos=1&_psq=sno&_ss=e&_v=1.0"
}

{
  "author": STRING,
  "body": STRING w/HTML,
  "handle":STRING,
  "id": INTEGER,
  "published_at": STRING DATE,
  "title": STRING,
  "url": STRING e.g, "/pages/my-page?_pos=1&_psq=my&_ss=e&_v=1.0"
}

{
  "author": STRING,
  "body": STRING w/HTML,
  "handle": STRING,
  "id": INTEGER,
  "image": STRING e.g, "https://cdn.shopify.com/s/...",
  "published_at": STRING DATE,
  "summary_html": STRING w/HTML,
  "tags": ARRAY OF STRING,
  "title": STRING,
  "url": STRING e.g, "/blogs/news/my-article?_pos=1&_psq=my&_ss=e&_v=1.0"
}