Shopifyで商品詳細ページに顧客が購入した商品の情報を表示させる

簡易ですが試作したのでメモとして。先入観から初期に間違った作り方をしたせいで時間を食いましたが、基本的にはヘルプの情報を組み合わせるだけでした。

ただし改良前の試作なので、ここからさらに詰めないと実際には使えないと思われます。

実現したいこと

• Shopifyのストア
• 商品詳細ページに顧客が購入した商品の画像やメタフィールドの値を出力する(購入履歴の表示)

部分的な購入履歴表示機能の簡易なものです。アプリで実現できると思ったのですが、軽く調べたところ見つからず。ないはずはないと思うのでアプリがあるならそちらを使用したほうが良いでしょう。

サンプルコード

{% for order in customer.orders limit:3 %}
  {% if order.line_items %}
    <p>購入した商品</p>
    <ul>
      {% for item in order.line_items  limit:3 %}
        <li>
          {{ item.image | image_url: '100x100' | img_tag }}<br>
          {{item.product.title}}<br>
          {% unless item.product.has_only_default_variant %}
            <ul>
              {% for option in item.options_with_values %}
                <li>{{ option.name }}: {{ option.value }} / {{item.variant.metafields.hoge.fuga}} </li>
              {% endfor %}
            </ul>
          {% endunless %}<br>
        </li>
      {% endfor %}
    </ul>
  {% endif %}
{% endfor %}

上記は以下のような意図になります。

• 最新から3つ分の注文が表示対象
• 各注文の内の3つまでの商品が対象(選択基準未検証)
• 購入した商品の「商品画像」「商品名」を表示
• オプションが設定されていれば「オプション名」「オプションの値」「メタフィールド」も表示
  ※「サイズ:M/七分丈」のような状態を想定

複数のオプションが設定されている場合には表示を検討する必要があります。何らかの要素を手がかりにハードコーディングか、セクションを利用して表示するオプションを決めるか、全て表示させるか。

オプション未設定の場合も検討が必要です。ただしこの場合、サイズ情報などは恐らくメタフィールドに全て突っ込むしかないかなという気はしますので、その時点でストアごとに色々作る必要があるでしょう。

参考情報

• The customer object
• The order object
• The line_item object
• The variant object

上記は参考URLですが、今回は上から順に取得して用います。具体的には以下のような流れになります。

1. 「customer object」で顧客情報を取得
2. 顧客情報から「order object」で注文情報を取得
3. 注文情報から「line_item object」で購入商品情報を取得
4. 購入商品情報から「variant object」でバリエーションのメタフィールドの値を取得

結び

比較的簡単に情報が取れましたが、商品の情報の持ち方次第では作り方を変更する必要があります。そのため汎用的なコードとしては使えず未完成な状態です。

各オブジェクトのヘルプをみれば多様な情報にアクセスできることがわかりますので、表示情報自体もそれぞれに合わせて作り替えることになります。

多少無理やりではありますが、一旦配列として追加してから取り出すようなことをすれば、比較的柔軟な出力と表示が可能です。PHPやJSならもう少し楽なのですが、Liquidは配列が弱い(というかそこは意図的に範囲外?)印象なのでそう簡単にもいかず。

本来ならアプリの領分かなとも思いますので、Liquidでどうにかするのを諦めた方がよいのかもしれません。