Shopify Liquid でカスタムフィールドを追加してコレクションページに表示する備忘録

大まかな手順は以下の通り。

1. 設定 > カスタムデータ > コレクション > 定義を追加する
2. Liquidテンプレートの編集

1. 設定 > カスタムデータ > コレクション > 定義を追加する

タイトル通り。「単一行テキスト」から「Json」まで多様な形式を選択可能。
ただし、Jsonを選択した場合、パースの処理が結構だるかったです。

今回追加したのはbrand_history_and_features（一行テキスト）とbrand_popular_models（json）。

2. Liquidテンプレートの編集

当該テンプレートを探すのが大変だったので、treeコマンドの結果をchatGPTに投げて聞きましたがうまくいかず。collections.jsonをコピペすると当該のテンプレートを教えてくれました。

collection.metafields.custom.HOGEと記入するとカスタムフィールドからデータが渡ってくるようです。

{% assign brand_history_and_features = collection.metafields.custom.brand_history_and_features %}
{% assign brand_popular_models_raw = collection.metafields.custom.brand_popular_models %}

...

<p>{{ brand_history_and_features }}</p>

...

<div id="brand-popular-models-container"></div>
<script>
    document.addEventListener("DOMContentLoaded", function() {
      try {
        var rawData = '{{ brand_popular_models_raw | replace: "'", "&#39;" | replace: '"' | replace: "\n", "" | replace: "\r", "" }}';
        rawData = rawData.replace(/&quot;/g, '"').replace(/&#39;/g, "'");
        var models = JSON.parse(rawData);
        console.log("Parsed models:", models);

        var collectionTitle = '{{ collection_title | escape }}';

        if (models && models.length > 0) {
          var container = document.createElement('div');
          var htmlContent = '<h2 class="p-brand_popular_models__heading-two">' + collectionTitle + 'の人気モデル紹介</h2>';
          models.forEach(function(model) {
            if (model.title && model.image && model.description) {
              htmlContent += '<section>';
              htmlContent += '<h3>' + model.title + '</h3>';
              htmlContent += '<div>';
              htmlContent += '<img src="' + model.image + '" alt="' + model.title + '">';
              htmlContent += '<p>' + model.description + '</p>';

...

              htmlContent += '</section>';
            }
          });
          container.innerHTML = htmlContent;
          document.getElementById('brand-popular-models-container').appendChild(container);
        } else {
          console.log("No models found or models array is empty.");
        }
      } catch (e) {
        console.error('ブランドの人気モデルのパースに失敗しました。', e);
      }
    });
  </script>

最後に

Jsonのパースは絶対にもっと良い方法があると思う。