{% comment %}
このファイルをテンプレートに作成する必要があります。
検索用のテンプレートを作成してJSONに名前を付けます。
最後のファイル名はsearch.json.liquidです
{% endcomment %}

{% layout none %}
{% comment %}
Inspired by: http://ecommerce.shopify.com/c/ecommerce-design/t/diy-implementing-autocomplete-with-search-144104
 {% endcomment %}

{%- comment -%}
 ページネーションの値を変更することでサジェストに表示できるアイテム数を変更できます。
 resultオブジェクトから出力する値を修正すると、表示できる値が変わります。
{%- endcomment -%}
{% paginate search.results by 10 %}
 {% capture output %}
 {% for result in search.results %}
        {% assign resultURL = result.url %}
        {% assign thumbURL = result.images[0] | img_url: 'master' %}

        {"title":"{{ result.title | replace: '\\', '\\\\' | replace: '"', '\\"' | replace:  '/','\\/' }}",
           "url":"{{ result.url   | replace: '\\', '\\\\' | replace: '"', '\\"' | replace:  '/','\\/' }}",
         "thumb":"{{ thumbURL     | replace: '\\', '\\\\' | replace: '"', '\\"' | replace:  '/','\\/' }}",
            "id":{{result.id}} }{% unless forloop.last %},{% endunless %}
    {% endfor %}
{% endcapture %}

{% comment %} Output the json object {% endcomment %}
{"results_total":{{paginate.items}},"results":[{{ output | strip_newlines }}]}

{% endpaginate %}

{% comment %}
このファイルはスニペットとして追加することができ、表示したい場所に追加することができます。
{% endcomment %}

<div id="pageheader">
  <div class="util-area">
      <div class="search-box">
        <form class="search-form" action="/search" method="get" _lpchecked="1">
            <i class="icon-mag"></i>
            <input type="text" name="q" placeholder="Search" autocomplete="off">
            <input type="submit" value="検索する">
        </form>
        <div class="results-box"></div>
      </div>
    </div><!-- /.util-area -->
</div><!-- /#pageheader -->

/*
このスクリプトにはjQueryライブラリが必要です。
ボディタグがTheme.Liquidで終了する直前にこのファイルを追加してください。
*/

$(document).ready(function(){
  /// メイン検索入力
  $('#pageheader .search-box input[type="text"]').bind('focusin focusout', function(e){
      $(this).closest('.search-box').toggleClass('focus', e.type == 'focusin');
  });


  /// ライブ検索
  let searchTimeoutThrottle = 500;
  let searchTimeoutID = -1;
  let currReqObj = null;
  let resultsBox = $('.results-box');

  $('#pageheader .search-box input[type="text"]').bind('keyup change', function(){

    // 検索の文字列が２文字より多くて、前回のワードと違う時
    if($(this).val().length > 2 && $(this).val() != $(this).data('oldval')) {
          //前の値をリセットします
          $(this).data('oldval', $(this).val());

          // 通信中のAjaxリクエストを中断
          if(currReqObj != null) currReqObj.abort();

          // 以前の検索を中断
          clearTimeout(searchTimeoutID);

          let searchForm = $(this).closest('form');

          //検索キーワード
          let term = searchForm.find('input[name="q"]').val();

          //検索ページへのURL
          let linkURL = searchForm.attr('action') + '?type=product&q=' + term;

          searchTimeoutID = setTimeout(function(){
              currReqObj = $.ajax({
                url: searchForm.attr('action'),
                data: {
                  type: 'product',
                  view: 'json',
                  q: term,
                },
                dataType: "json",
                success: function(data){
                  currReqObj = null;
                  if(data.results_total == 0) {
                      // 一致する商品がない時
                      resultsBox.html('<div class="note">'+ '一致する商品はありません。' +'</div>');
                  } else {
                    // 一致する商品がある時
                    resultsBox.empty();
                      $.each(data.results, function(index, item){
                        let $row = $('<a></a>').attr('href', item.url);
                        $row.append('<div class="img"><img src="' + item.thumb + '" /></div>');
                        $row.append('<div class="d-title">'+item.title+'</div>');
                        resultsBox.append($row);
                      });

                      // 全ての結果を見るボタン
                      resultsBox.append('<a href="' + linkURL + '" class="note">対象の商品を見る</a>');
                  }
                }
              });
          }, searchTimeoutThrottle);

      } else if ($(this).val().length <= 2) {
          //キーワードが２以下の時にサジェストの内容を削除する
          resultsBox.empty();
      }
  }).attr('autocomplete', 'off').data('oldval', '').bind('focusin', function(){
      // 再フォーカスされた時にサジェストを表示します
      resultsBox.fadeIn(200);
  }).bind('click', function(e){
      //クリックして、ボディが[イベント]をクリックしないようにします
      e.stopPropagation();
  });

  //サジェスト以外をクリックした時に、サジェストを非表示にする
  $('body').bind('click', function(){
      resultsBox.fadeOut(200);
  });


  //検索するボタンをクリックした時の挙動
  $('.search-form, #search-form').on('submit', function(e){
    e.preventDefault();
    let term = $(this).find('input[name="q"]').val();
    let linkURL = $(this).attr('action') + '?type=product&q=' + term;
    window.location = linkURL;
  });

});