【Liquid】注文履歴の日付フィルターを作ってみた

13793 ワード
HTML shopify Liquid JavaScript HTML テキストリンク

日付セレクトボックス

前回の記事で投稿したliquidの日付セレクトボックスを使って、絞り込みフィルターとしての活用方法を紹介したいと思います。
今回はShopifyの注文履歴一覧ページを例に実装方法について説明していきます。

<select name="select" id="select-date" onchange="selectValueOption(this);">
  <option value="">---期間を設定してください---</option>
  <option value="{{ 'today' | date: "%s" | minus: day1 | date: "%Y-%m-%d" }}">前日まで</option>
  <option value="{{ 'today' | date: "%s" | minus: day3 | date: "%Y-%m-%d" }}">3日以内</option>
  <option value="{{ 'today' | date: "%s" | minus: day7 | date: "%Y-%m-%d" }}">7日以内</option>
</select>

<ul class="result" id="resultOrders">出力結果:</ul>

注文履歴の取得

日付フィルターとして機能実装するには、まず顧客の注文情報を取得してセレクトボックスの日時と照合する必要があります。
scriptタグ内でliquidの注文オブジェクトを使って注文データを取得します。
Jsonフィルターを使用することで、JSONオブジェクトの配列を生成できるのでとても便利です。

  // 注文履歴データを取得
 {% capture customer_orders %}
 　[
  　{% for order in customer.orders %}
   {
    order:{{ order.name  | json }},
    date:{{ order.created_at | date: '%Y-%m-%d' | json }},
    {%- for line_item in order.line_items -%}
    product:{{ line_item.title | json }},
  　　{% endfor %}
   },
  {% endfor %}
 　]
　{% endcapture %}
  
 // jsonオブジェクトの配列
 const arrayJson = {{ customer_orders }};

選択日時と注文日の照合

セレクトボックスにonChangeのイベントハンドラーを設置し、オプション選択ごとのvalue（日付）を取得します。
選択した日付から今日までの期間内に、注文履歴に日付が含まれている場合のみ出力をします。

  // ----- オプション選択 -----
  function selectValueOption(obj) {
    let index = obj.selectedIndex; 
    let value = obj.options[index].value; // 値
    let text  = obj.options[index].text;  // 表示テキスト
   
    // 値とテキストをコンソールに出力
    console.log('value = ' + value + ', ' + 'text = ' + text);

    // セレクトボックスから選択した日付
    let selectDateJst = new Date(value); 
    let selectDateSeconds = Date.parse(selectDateJst);//ミリ秒
    let selectDate = selectDateSeconds-=3600000*9; //00:00に変換
    
    // 現在の日時 (ミリ秒)
    let today = Date.parse(new Date());
    
    // 選択した〇〇日以内に注文履歴（arrayJson）が含まれているか判定
    // =>　期間内に存在する履歴のみresult_arrayの配列に格納する
    result_array = [];
    for (let i = 0; i < arrayJson.length; i++) {
      let a = arrayJson[i].date;
      let b = Date.parse(a);
      if (b >= selectDate && b < today) {
        result_array.push(arrayJson[i]);
      }
    }
    console.log(result_array);

    //出力結果に出す
    let orderResult = document.getElementById('resultCustomerOrders');
    for(let i = 0; i < result_array.length; i++){
    orderResult.insertAdjacentHTML('beforeend', `<li>注文番号:${result_array[i].order},注文日:${result_array[i].date},商品名:${result_array[i].product}</li>`);
  }
}

出力結果イメージ

以下の注文履歴一覧があるとします。

注文ID 注文日 商品名
#01 2022-3-20 A1, A2
#02 2022-3-17 B1
#03 2022-3-13 C1, C2, C3

上記のliquidで実装したロジックと同様に、純粋なJavascriptだけで絞り込みを再現してみました。
今日の日付を2022-03-20とした場合、以下の期間内に当てはまる注文日のデータだけを出力します。

セレクトボックスの日付：
・1日前：2022-03-19
・3日前：2022-03-17
・7日前：2022-03-13

See the Pen Untitled by ainyan (@ainyan) on CodePen.

実際にJSだけで実装しようとするといちいち日付を作り出すところから始めなければなりませんが、テンプレート言語liquidと組み合わることで、配列作成やデータ取得など効率化しやすいと思いました。

コードの書き方についてはまだまだ課題はあると思いますが、これからも最適解を求めて前進していきたいと思います！