Empire Theme by Pixel Union is unable to include SKU in Predictive Search in the Header

Store Design
, ,
1

Has anyone been able to modify the fetch request in the Empire theme to include variants.sku in the resources[options][fields] parameter?

I was able to do this in Dawn via the predictive-search.js file:

fetch(`${routes.predictive_search_url}?q=${encodeURIComponent(searchTerm)}&resources[type]=product&resources[options][unavailable_products]=hide&resources[options][fields]=title,variants.sku,product_type,variants.title§ion_id=predictive-search`,
     { signal: this.abortController.signal }
    )
      .then((response) => {
        if (!response.ok) {
          var error = new Error(response.status);
          this.close();
          throw error;
        }

But apparently the Empire them doesn’t even have the predictive-search.js asset.

Does anyone know how the Empire theme utlilizes the Predictive Search API?
https://shopify.dev/docs/api/ajax/reference/predictive-search

Thanks!

2

Hello @AutoPartsAAA ,

  1. Find the JavaScript File:

    • Open the assets folder and search for JavaScript files like theme.js or search.js.

  2. Locate the Fetch Request:

    • Look for fetch requests related to predictive search. They might use URLs like ${routes.predictive_search_url}.

  3. Modify the Fetch Request:

    • Add variants.sku to the resources[options][fields] parameter. It should look similar to this:
      javascript
fetch(`${routes.predictive_search_url}?q=${encodeURIComponent(searchTerm)}&resources[type]=product&resources[options][unavailable_products]=hide&resources[options][fields]=title,variants.sku,product_type,variants.title§ion_id=predictive-search`,
  { signal: this.abortController.signal }
)
.then((response) => {
  if (!response.ok) {
    var error = new Error(response.status);
    this.close();
    throw error;
  }
  return response.json();
})
.then((data) => {
  // Handle the data
})
.catch((error) => {
  console.error('Error:', error);
});

  • Test Your Changes:

    • Ensure the search functionality works and variants.sku is included in the results.

If the predictive search is hard to find, use your browser’s Developer Tools (F12) to monitor network requests while searching.

Thanks!

3

Thank you, I found the Fetch Request within empire.js and updated it to:

fetch(`${window.Theme.routes.predictive_search_url}?q=${encodeURIComponent(terms)}§ion_id=predictive-search&resources[options][fields]=title,variants.title,variants.sku,product_type`).then(response => {
        if (!response.ok) {
          throw new Error(response.status);
        }