【Shopify】URL filtersの種類と使い方を解説②

皆さんは、Shopifyのテーマ開発の時にURL filtersをうまく使いこなせていますか？

今回は、前回の『URL filtersの種類と使い方を解説①』に続き、URL filtersの種類と使い方を解説していきたいと思います。

ぜひ本記事を参考にURL filtersをマスターして、テーマ開発の幅を広げていきましょう！

トマトソース

リンクを自動で生成してくれるので、非常に開発も楽になりますよ。

URL filtersとは？

前回のおさらいになりますが、URL filtersとはShopify CDNのアセットへのリンクを出力するフィルターのことです。

URL filtersは、コレクションやブログなどのリンクのフィルタリングに使用されます。

トマトソース

URL filtersを使えばいちいちファイルパスやURLを入力しなくて済むので非常に開発効率が上がりますよ！

なので、数は多いもののぜひともマスターしておきたいフィルターの一つです。

URL filtersの種類

Shopifyの公式リファレンスに記載されてあるURL fitlersは全部で19種類あります。

Shopifyで利用可能なURL filters全19種類は以下の通りです。

今回はURL filtersの上記19種類の中から前回解説した「xxx_url」という形以外のの11種類（9〜19）を解説していきます。

前回の解説をまだ見ていない方は、以下のリンクからご覧ください。

関連記事 URL filtersの種類と使い方を解説①

URL filtersの使い方

ここからは以下の11種類のURL filtersの使い方について解説していきます。

①customer_login_link

customer_login_linkは、ユーザーのログインページへのURLを生成します。

トマトソース

これを書くだけでログインページへのリンクが出来上がるので非常に便利ですよ！

customer_login_linkの記述例と出力結果は以下の通りです。

{{ 'ログイン' | customer_login_link }}

//出力：
<a href="/account/login" id="customer_login_link">ログイン</a>

「’ ‘」内に書いた文字がログインページへのリンクの文字として表示されます。

②link_to

link_toはHTMLのリンクを生成します。

link_toの記述例と出力結果は以下の通りです。

{{ 'Shopify' | link_to: 'https://www.shopify.com','Shopifyへのリンク' }}

//出力：
<a href="https://www.shopify.com" title="A link to Shopify">Shopify</a>

link_toには2つの引数が渡せます。1つ目はURLで、2つ目がリンクタイトルです。
ただ、2つ目の引数はオプションなのであってもなくてもOKです。

③link_to_vendor

link_to_vendorは、販売元が一致する商品リストを表示するコレクションページへのHTMLリンクを生成します。

link_to_vendorの記述例と出力結果は以下の通りです。

{{ "Shopify" | link_to_vendor }}
//出力：
<a href="/collections/vendors?q=Shopify" title="Shopify">Shopify</a>

上記の例だと、Shopifyという販売元を設定している商品が抽出されるページへのリンクとなります。

link_to_vendorを使うにはコレクションの設定画面の「条件」の箇所で、販売元の設定をしておく必要があります。

トマトソース

ちなみに、このリンクで飛んだ先のページのレイアウトは、コレクションページに適応しているものが使われます。

④link_to_type

link_to_typeは、商品タイプが一致する商品リストのコレクションページへのHTMLリンクを生成します。

file_img_urlの記述例と出力結果は以下の通りです。

{{ "t-shirts" | link_to_type }}
//出力：
<a href="/collections/types?q=jeans" title="t-shirts">t-shirts</a>

上記の例だと、「t-shirts」という商品タイプが付与されている商品のコレクションページへのリンクが生成されます。

⑤link_to_tag

link_to_tagは、指定したタグを含むコレクション内の商品リストページへのリンクを生成します。

link_to_tagの記述例と出力結果は以下の通りです。

<!-- collection.tagsに["Mens", "Womens", "Sale"]が入っている場合 -->
{% for tag in collection.tags %}
  {{ tag | link_to_tag: tag }}
{% endfor %}
//出力：
<a title="Show products matching tag Mens" href="/collections/frontpage/mens">Mens</a>
<a title="Show products matching tag Womens" href="/collections/frontpage/womens">Womens</a>
<a title="Show products matching tag Sale" href="/collections/frontpage/sale">Sale</a>

上記の例であれば、それぞれmensタグ、womensタグ、saleタグがついている商品のコレクションページへのリンクが生成されています。

このURLフィルターの注意点としては、collectionオブジェクトへのアクセスがコレクションページ内に限られているので、上記のような記述はコレクションページ内でのみ使用できます。

もし、トップページなどでlink_to_tagを使ってコレクションのタグのリンクを表示させたい場合は、以下のように記述してください。

{% for tag in collections['コレクション名'].tags %}
  {{ tag | link_to_tag: tag }}
{% endfor %}

トマトソース

正直あんなm利用とはないような気がしますが、ご参考までに。

⑥link_to_add_tag

link_to_add_tagは、指定したタグと他に選択されているタグを持つコレクションの商品へのリンクが生成します。

img_urlの記述例と出力結果は以下の通りです。

<!-- collection.tagsに["Mens", "Womens", "Sale"]が入っている場合 -->
{% for tag in collection.tags %}
  {{ tag | link_to_add_tag: tag }}
{% endfor %}
//出力：

<!-- "/collections/frontpage/mens"にいる場合 -->
<a title="Show products matching tag Mens" href="/collections/frontpage/mens">Mens</a>
<a title="Show products matching tag Womens" href="/collections/frontpage/womens+mens">Womens</a>
<a title="Show products matching tag Sale" href="/collections/frontpage/sale+mens">Sale</a>

このlink_to_add_tagは先程のlink_to_tagと類似していますが、微妙に異なります。

上記の例からも分かるように、Mensタグのコレクションページにいる場合は、リンクが「womens+mens」となったり、「sale+mens」となったりタグが追加されるようになります。

トマトソース

Mensコレクションの中からさらにTシャツやシューズなどのタグを追加していくときなんかに便利ですね。

⑦link_to_remove_tag

link_to_remove_tagは、指定したタグとそれまでに選択したタグを含むコレクション内の商品リストへのリンクを生成します。

link_to_remove_tagの記述例と出力結果は以下の通りです。

<!-- collection.tagsに["Mens", "Womens", "Sale"]が入っている -->
{% for tag in collection.tags %}
  {{ tag | link_to_remove_tag: tag }}
{% endfor %}

//出力：
<!-- "/collections/frontpage/mens"にいる場合 -->
<a title="Remove tag Mens" href="/collections/frontpage">Mens</a>

⑧sort_by

sort_byは、sort_byパラメータを持ったコレクションページへのURLを生成します。

sort_byの記述例と出力結果は以下の通りです。

{{ collection.url | sort_by: 'best-selling' }}

//出力：
/collections/widgets?sort_by=best-selling

上記の例では、「ベストセラー」の順で商品が並んだコレクションページへのURLが生成されています。

collection.sort_byの種類

ちなみに、デフォルトで使用できる並び替えの種類は以下の8つです。

トマトソース

Shopifyでは手動で並び替えの設定ができるので、その方法についてはまた後日解説します。

⑨url_for_type

url_for_typeは、指定した商品タイプを持つ商品を表示するコレクションページへのリンクを生成します。

url_for_typeの記述例と出力結果は以下の通りです。

{{ "T-shirt" | url_for_type }}

//出力：
/collections/types?q=T-shirt

上記の例であれば、T-shirtタイプの商品のコレクションページへのリンクが作られます。

トマトソース

タイプごとの商品一覧ページなどを作りたいときに便利ですね。

10 url_for_vendor

url_for_vendorは、指定した販売元を持つ商品を表示するコレクションページへのリンクを生成します。

url_for_vendorの記述例と出力結果は以下の通りです。

{{ "Shopify" | url_for_vendor }}

//出力：
/collections/vendors?q=Shopify

上記の例であれば、販売元がShopifyと設定している商品のコレクションページへのリンクが作られます。

link_to_vendorとurl_for_vendorの違いは、HTMLリンク（<a href=””></a>）を生成するか否かにあります。
url_for_vendorはHTMLリンクを生成せず、URLリンクの生成のみとなります。

11 within

withinは、現在みているコレクションのハンドル名を付与した商品ページのURLを生成します。

具体的には、/collections/collection-handle が商品URLの前に追加されます。

withinの記述例と出力結果は以下の通りです。

<a href="{{ product.url | within: collection }}">{{ product.title }}</a>

//出力：
<a href="/collections/frontpage/products/shoes-A">Shoes A</a>

上記の例であれば、「/collections/frontpage（ハンドル名）」を持ったShoes Aという商品ページへのリンクが作られます。

このように「/collections/ハンドル名」を持った商品ページでは、それが属するcollectionにアクセスができ、関連商品などコレクション関連コンテンツなどを作れます。

トマトソース

また次回、関連商品ページやおすすめ商品セクションの作り方を解説していきます。

URL filtersの種類と使い方を解説②：まとめ

今回は前回に引き続きURL filtersを解説してきました。

URL filtersは数が多く、どれを使えば良いか分からなくなることがよくありますよね。

でも、使いこなせるとかなり開発が楽になりますし、幅も広がります。

zぜひ本記事を活用して、URL fitltersを理解し、また分からなくなった際には本記事を参考に最適なURL filtersを見つけてください。

関連記事 URL filtersの種類と使い方を解説①

関連記事 画像がうまく表示されない時の対処法｜画像URLフィルターについて解説

関連記事 ストア通貨の設定とMoney filtersの使い方を解説