今回はLiquidの「URL filter」を改めて整理してみました。
コードや内容は公式のヘルプページを参考にしています。
https://shopify.dev/docs/themes/liquid/reference/filters/url-filters
URL filterって何？
公式のヘルプページによると、ShopifyのCDNにあるアセットファイルを呼び出すための記述で、コレクションやブログのフィルタリングにも使いますよーとのこと。
要は、
{{ 'style.css' | asset_url }}と書いた時に、
//cdn.shopify.com/s/files/1/0043/0324/t/124/assets/style.cssこんな感じで、CDNにあるファイルのURLを返してくれるものです。
テーマのassetsディレクトリに入れたファイルや管理画面の「ファイル」にアップロードしたファイル、商品画像や記事のアイキャッチ画像などを呼び出す時に使用します。
ShopifyのURL filter一覧
asset_url
{{ 'style.css' | asset_url }}先ほど紹介した一番シンプルな例で、テーマのassetsディレクトリに格納されているファイルのURLを返します。
asset_img_url
{{ 'image01.png' | asset_img_url: '300x' }}asset_urlでもasset_img_urlでも画像ファイルは返してくれますが、asset_img_urlにすると、サイズのパラメータが使用できるようになります。
file_url
{{ 'size-chart.pdf' | file_url }}assetsではなく、管理画面の「設定」>「ファイル」にアップロードしたファイルのURLを返します。
file_img_url
{{ 'image01.png' | file_img_url: '1024x768' }}上記のimg版です。サイズのパラメータが使用できるようになります。
customer_login_link
{{ 'ログイン' | customer_login_link }}ログインページのURLを返してくれます。outputは以下の感じ。
<a href="/account/login" id="customer_login_link">ログイン</a>global_asset_url
{{ 'prototype.js' | global_asset_url | script_tag }}Shopifyのサーバー下にあるグローバルアセットのURLを返します。一覧はこちら
img_url
画像ファイルのURLを返します。ただし、こちらはassetsにある画像ではなく、管理画面に登録した商品画像やブログのアイキャッチ画像に使用します。
{{ product | img_url }}一番シンプルに書くとこんな感じですが、サイズを指定しないとsmallサイズ（100×100）で返ってきます。。
サイズ指定はwidthとheightのどちらかでも大丈夫です。どちらかのみの指定の場合も、元のアスペクト比は維持されます。
{{ product | img_url: '125x' }}オリジナルのサイズで返したいならmasterと記述します。
{{ product | img_url: 'master' }}その他、crop（切り抜き）、scale（拡大）、format（png->jpgとか）といったパラメータの指定も可能です。
link_to
{{ 'Shopify' | link_to: 'https://www.shopify.com','Shopify公式サイトへのリンクです' }}link_toはシンプルにaタグを作ってくれる記述になります。一つ目の”がリンクの文字列、次にURLの指定、3つ目はタイトル属性になります。
link_to_vendor
{{ "Shopify" | link_to_vendor }}コレクションページで商品のベンダーへのリンクをaタグで作ってくれます。
link_to_type
{{ "bag" | link_to_type }}上記の商品タイプバージョンです。
link_to_tag
{{ tag | link_to_tag: tag }}上記の商品タグバージョンです。
link_to_add_tag
{{ tag | link_to_add_tag: tag }}基本上記のような動きをしますが、既に選択されたタグも含めてリンクを生成します。
具体的には、上が/collection/mensにリンクするとしたら、こちらは/collections/mens+sales/のような形になります。
link_to_remove_tag
{{ tag | link_to_remove_tag: tag }}payment_type_img_url
{% for type in shop.enabled_payment_types %}
<img src="{{ type | payment_type_img_url }}" />
{% endfor %}ストアで有効にしている決済方法のSVG画像を返してくれます。
shopify_asset_url
{{ 'option_selection.js' | shopify_asset_url | script_tag }}Shopifyのサーバー上にあるアセットファイルのURLを返してくれます。
sort_by
{{ collection.url | sort_by: 'best-selling' }}よくある並び順の入れ替え機能を実装する際に使用します。
url_for_type
{{ "Bag" | url_for_type }}商品タイプのURLを返してくれます。
url_for_vendor
{{ "Shopify" | url_for_vendor }}上記のベンダーバージョンです。
within
<a href="{{ product.url | within: collection }}">{{ product.title }}</a>現在表示しているコレクション内にある商品のURLを返してくれます。
LiquidのURL filteまとめ
半分自分のための整理みたいな記事になってしまいましたが、個人的には改めて全部見直してみると知らなかったものもいくつかあり、勉強になりました。URL filter含め、Shopify公式のヘルプページはかなり内容が充実しているので、テーマを自分で構築する際は目を通しておくと良いと思います。
