Shopifyのlinkオブジェクトのhandleに関して

調査したものの関連するドキュメントが見つけられていないのですが、色々試したのでメモとして残します。

前提

• 管理画面の「オンラインストア > メニュー」のメニュー作成画面で、ストア内のコレクションページを選んでナビを作成
• linkオブジェクトから取れる値を利用して、リンクの上に画像を出力
• 表示する画像は「コレクションの画像」に設定した画像を利用

上記の動作をするコードを考える場合、linkオブジェクトからリンク先のhandleを取得する必要があります。

その際のhandleの取得方法が複数あり、それぞれ値が違う可能性があるため注意が必要でした。

handleの取得

{% for link in linklists.my-menu.links %}
  <a href="{{ link.url }}">
    {%- if link.type == 'collection_link' -%}
      {{ collections['ここにhandleを設定する'].image }}
    {%- endif -%}
    {{ link.title | escape }}
 　</a>
{% endif %}

上記のような簡単な構造を前提とします。この場合、my-menuというハンドル名をもつメニューが対象となります。

前提を踏まえ、以下がhandleの値をとるために検討したコードです。

{% comment %}link.handleを使う方法{% endcomment %}
{{ link.handle }}

{% comment %}URLからハンドルを取得して使う方法{% endcomment %}
{% assign linkHandle = link.url | split: "/" | last %}
{{ linkHandle }}

それぞれの詳細は以下の通り。

{{ link.handle }}を使った場合

• コレクションページが公開時のままならば、意図通りにhandleが取れ、かつ、この値で画像が表示される
• コレクションページのhandleを変更した場合、link.urlの値は連動して変更されるが、link.handleの値は変更されず、この値を用いても画像は表示できない
• link.handleはそもそもドキュメント内に記述がない模様(探しても見つからず)

つまり、コレクションページのURLの変更に対応できないので、link.handleの値は安定して使えません。

link.urlの値はもちろん連動しているので、handleを変更してもリンク切れの問題は起こらない

URLからハンドルを取得して使った場合

• link.urlの末尾がhandleなので、splitフィルターとlastフィルターで末尾の値を取得して用いる
• handleとURLの末尾は常に一致するはずなので、安定してhandleの値が取れる

URLから取得する必要がある点には疑問が残りますが、調べた範囲では確実にhandleの値がとれ、画像も表示できました。

linkオブジェクトを用いて画像を表示させるサンプルコード

今回はhandleに関する記事なので趣旨からずれますが、一応画像を表示する場合のサンプルコードを記載します。

{% for link in linklists.my-menu.links %}
  <a href="{{ link.url }}">
    {%- if link.object.featured_image != blank -%}
      {{ link.object.featured_image | image_url: '200x' | img_tag: link.title }}
    {%- elsif link.object.image != blank  -%}
      {{ link.object.image | image_url: '200x' | img_tag: link.title }}
    {%- endif -%}
    {{ link.title | escape }}
 　</a><br><br>
{% endfor %}

上記で、横幅200pxでaltにlink.titleが入ったimgタグが出力されます。

link.objectは便利なので、以下ドキュメントの参照をお勧めします。

• The link object

補足

{{ link.url | handle }}

例えば上記のようなコードも作れますが、これは以下の意味になります。

• handleフィルターを使って、urlをhandle形式で出力する

handleフィルターに関しては以下に説明があります。

• String filters
• Object handles

結び

当初はページのhandleを書き換える(=URLを変更する)という操作を意識しておらず、また意識したところでlink.handleの値がURL変更に連動しないとは考えていませんでした。

この件はフォーラムでやりとりした際に判明したのでどうかにか気付けたというところです。

Shopifyはhandleが一意の要素として重要だと認識していたので、このhandleの値を取れるタグが用意されていないというのは違和感がありますが、どこかに説明があると思うものの見つけられていません。