Drop-in fallback template for Shopify Predictive Search API

search.json.liquid

{%- layout none -%}
{%- paginate search.results by 6 -%}
  {%- capture products_output -%}
  {%- for result in search.results -%}
    {%- if result.object_type == 'product' -%}
      ,{"title":{{ result.title | json }},"url":{{ result.url  | json }}
      {%- if result.images and result.images.size > 0 -%}
        ,"image":{{ result.images[0] | img_url: 'master' | json }}
      {%- endif -%}
      ,"vendor":{{ result.vendor | json }},"price_max":{{ result.price_max }},"price_min":{{ result.price_min }},"compare_at_price_min":{{ result.compare_at_price_min }}}
    {%- endif -%}
  {%- endfor -%}
  {%- endcapture -%}

  {%- capture pages_output -%}
  {%- for result in search.results -%}
    {%- if result.object_type == 'page' -%}
      ,{"title":{{ result.title | json }},"url":{{ result.url  | json }}}
    {%- endif -%}
  {%- endfor -%}
  {%- endcapture -%}

  {%- capture articles_output -%}
  {%- for result in search.results -%}
    {%- if result.object_type == 'article' -%}
      ,{"title":{{ result.title | json }},"url":{{ result.url  | json }}
      {%- if result.image -%}
        ,"image":{{ result.image | img_url: 'master' | json }}
      {%- endif -%}
      }
    {%- endif -%}
  {%- endfor -%}
  {%- endcapture -%}

{%- comment -%} Output the json object {%- endcomment -%}
{"resources":{"results":{"products":[{{ products_output | remove_first: ',' }}],"pages":[{{ pages_output | remove_first: ',' }}],"articles":[{{ articles_output | remove_first: ',' }}]}}}
{%- endpaginate -%}

theme.js

try {
  theme.Shopify.features = JSON.parse(document.documentElement.querySelector('#shopify-features').textContent);
} catch (e) {
  theme.Shopify.features = {};
}

...

if(theme.Shopify.features.predictiveSearch) {
  // use the API
  ajaxUrl = '/search/suggest.json';
  ajaxData = {
    "q": $searchForm.find('input[name="q"]').val(),
    "resources": {
      "type": $searchForm.find('input[name="type"]').val(),
      "limit": 6,
      "options": {
        "unavailable_products": 'last'
      }
    }
  };
} else {
  // use the theme template fallback
  ajaxUrl = $searchForm.attr('action') + '?' + $searchForm.serialize() + '&view=json';
  ajaxData = null;
}

// fetch result
currRequest = $.ajax({
  url: ajaxUrl,
  data: ajaxData,
  dataType: "json",
  success: function(response){
    ...