ShopifyデータをHTMLベースでJSへ渡す方法 #JavaScript

今回は、どうしても面倒だった、Liquid　data ＞ jsへjsonで渡す＞ jsでHTMLテンプレートにデータを入れて出力の工程で楽出来ないかと思い…試行錯誤した結果、上手くいったので共有したいと思います。

なぜ、この方法を考えたかと言うと、たまにある一覧データでのもっと見るボタン。
Liquidでの実装も可能だが、独自カスタムをした場合、jsを組み込む必要があるため、どうしても一旦は全データをjsへ渡す必要がある。
今までは、Liquidでjsonを作成し、それをjsで加工し、HTMLへ流し込むとやってはいたが…。jsがスパゲッティ化してしまう。
というか、条件に応じてどれだけでも存在するロジックを組み、コードを書くのが面倒くさかった。

理想としては、Liquidで判定＞ Liqiud　dataをHTMLに入れる＞ HTMLごとjsへ＞ jsは必要な分だけ出力。
こいつができたので、以下で説明していきます。

まずはコードの共有

今回は注文履歴一覧での、もっと見る実装だったのでcustomer.ordersで実装しています。

{% paginate customer.orders by 250 %}

  <div id="container"></div>

  {%- comment -%} jsに渡すためのデータを作成 {%- endcomment -%}
  {%- assign order_array = "" -%}

  {% for order in customer.orders by 250 %}
    {% capture html %}
      {%- comment -%} ここにrenderか直書きでカードHTMLを入れ込む {%- endcomment -%}
      {%- render "order-list-card", order: order -%}
    {% endcapture %}

    {% capture one_order %}{"data": {{ html | json }}}{% endcapture %}
    {% assign order_array = order_array | append: "," | append: one_order %}
  {% endfor %}

  {% assign order_array = order_array | remove_first: ","  %}
  {%- comment -%} オーダーJSON作成 {%- endcomment -%}
  {% capture order_list_data %}[{{ order_array }}]{% endcapture %}

{% endpaginate %}

<script type='text/javascript'>
  const ORDER_LIST_DATA = {{ order_list_data }};

  let cards;
  // ORDER_LIST_DATAを加工して必要なぶんだけ取り出した配列に変更してもOK
  cards = ORDER_LIST_DATA.map(item => { return item.data });
  cards = cards.join('');

  document.getElementById('container').insertAdjacentHTML('beforeend', cards);
</script>

説明

{%- render "order-list-card", order: order -%} で読み込んでいるところがHTML本体になるところです。
ここは、renderを使って別ファイルを読み込んでもいいし、HTML直書きでもOKです。

一番大事なところが、{% capture one_order %}{"data": {{ html | json }}}{% endcapture %}で、この時点でHTMLをjsonで入力し、これ以降でLiquidオブジェクトをjson化しないことです。このタイミングでjsonにしてあげないと、jsに上手くオブジェクトとして伝わってくれません。

あとは、Liquidで作成した配列をjsへ渡し、必要な分だけcontainerの中に出力してあげればOKです。

まとめ

特定のデータの全取得からの表示…。今までとても面倒で嫌いでしたが、これで実装・管理しやすくなったと思います。
まだ試していませんが、これなら一度に取得する情報量も、Liquidのページネーションで制限し、もっとみるを押した時点で次のページのデータを取得するとかもいけそう…。
それもどこかで試していこうと思います。
　

あと…
ARCHETYPでは、Shopifyのテーマ開発やアプリ開発をやりたいエンジニアを募集しております！
気になった方はお気軽にエントリーをお待ちしております！
https://www.archetyp.jp/recruit/
（業務委託の方もお待ちしておりますー！）