【Shopify】LiquidのURL filterを全てまとめてみた話

#はじめに
今回の記事では、ShopifyのURL filterを全てまとめてみました。

[こちら](https://shopify-dev.shopifycloud.com/docs/themes/liquid/reference/filters/url-filters)を参考にしました。

#URL filter
`URLフィルターは、Shopifyの Content Delivery Network（CDN）上のアセットへのリンクを出力します。`

また、コレクションやブログをフィルタリングするためのリンクを作成する用途にも使用されます。

一般的に、URL フィルタの出力では、アセットのファイルパスに数字が付加された`クエスチョンマーク(?)`が表示されます。

その数字は**ファイルのバージョン番号**です。

例えば、このURLのバージョン番号は **28253** になります。

```.liquid
//cdn.shopify.com/s/files/1/0087/0462/t/394/assets/shop.css?28253
```

URL フィルタは常にアセットの最新バージョンを読み込みます。

それでは、URL フィルタを見ていきましょう。


##asset_url
`Shopify テーマの「assets」フォルダ内にある、ファイルのURLを返します。`

![ScreenClip.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665523/d9e86acd-fdc0-e443-dc1c-1cad6c321aec.png)

```.liquid
{{ 'theme.css' | asset_url }}
```
>//cdn.shopify.com/s/files/1/0087/0462/t/394/**assets**/theme.css?28253



##asset_img_url
`テーマの "assets" フォルダ内の画像のアセット URL を返します。`

![ScreenClip.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665523/c2b7da66-f98c-eee2-f7b2-57c6ed579ec7.png)

`asset_img_url` には、画像サイズのパラメータ（ [image size parameter](#size-parameters) ）を指定します。

```.liquid
{{ 'logo.png' | asset_img_url: '300x' }}
```
>//cdn.shopify.com/s/files/1/0000/0001/t/1/assets/logo_300x.png?42



##file_url
`管理画面の Files（ファイル）ページにある、PDFファイル等の URL を返します。`

```.liquid
{{ 'size-chart.pdf' | file_url }}
```
>//cdn.shopify.com/s/files/1/0087/0462/files/size-chart.pdf?28261


ファイルページには、管理画面にある`設定`の`ファイル`からいけます。


![ScreenClip.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665523/90693523-b733-3f7c-355d-ab761dc8f9ba.png)


ファイルページには、画像やビデオ、ドキュメントが保存されていています。

![ScreenClip.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665523/fa516f5e-4578-c349-acc8-ec5bc5c80663.png)





##file_img_url
`管理画面の Files ページにある画像のアセット URL を返します。`

`file_img_url`には、画像サイズのパラメータ（ [image size parameter](#size-parameters) ）
を設定できます。

```.liquid
{{ 'logo.png' | file_img_url: '1024x768' }}
```
>//cdn.shopify.com/s/files/1/0246/0527/files/logo_**1024x768**.png?42



##customer_login_link
`顧客ログインページへのリンクを生成します。
`

```.liquid
{{ 'Log in' | customer_login_link }}
```
>\<a href="/account/login" id="customer_login_link">Log in\</a>


##global_asset_url
`グローバルアセットの URL を返します。`

グローバルアセットは、**Shopifyのサーバー上のディレクトリ**に保管されています。

グローバルアセットを使用することで、**ページのロード時間を改善することができます**。

```.liquid
{{ 'prototype.js' | global_asset_url | script_tag }}
```
>\<script src="//cdn.shopify.com/s/global/prototype.js?1" type="text/javascript">\</script>


以下のグローバルアセットを利用できます。

```.liquid
{{ 'prototype.js' | global_asset_url | script_tag }}
{{ 'controls.js' | global_asset_url | script_tag }}
{{ 'dragdrop.js' | global_asset_url | script_tag }}
{{ 'effects.js' | global_asset_url | script_tag }}
```

```.liquid
{{ 'prototype/1.5/prototype.js' | global_asset_url | script_tag }}
{{ 'prototype/1.6/prototype.js' | global_asset_url | script_tag }}
```


```.liquid
{{ 'scriptaculous/1.8.2/scriptaculous.js' | global_asset_url | script_tag }}
{{ 'scriptaculous/1.8.2/builder.js' | global_asset_url | script_tag }}
{{ 'scriptaculous/1.8.2/controls.js' | global_asset_url | script_tag }}
{{ 'scriptaculous/1.8.2/dragdrop.js' | global_asset_url | script_tag }}
{{ 'scriptaculous/1.8.2/effects.js' | global_asset_url | script_tag }}
{{ 'scriptaculous/1.8.2/slider.js' | global_asset_url | script_tag }}
{{ 'scriptaculous/1.8.2/sound.js' | global_asset_url | script_tag }}
{{ 'scriptaculous/1.8.2/unittest.js' | global_asset_url | script_tag }}
```

```.liquid
{{ 'ga.js' | global_asset_url | script_tag }}
```

```.liquid
{{ 'mootools.js' | global_asset_url | script_tag }}
```

```.liquid
{{ 'lightbox.css' | global_asset_url | stylesheet_tag }}
{{ 'lightbox.js' | global_asset_url | script_tag }}
```

```.liquid
{{ 'lightbox/v1/lightbox.css' | global_asset_url | stylesheet_tag }}
{{ 'lightbox/v1/lightbox.js' | global_asset_url | script_tag }}
```

```.liquid
{{ 'lightbox/v2/lightbox.css' | global_asset_url | stylesheet_tag }}
{{ 'lightbox/v2/lightbox.js' | global_asset_url | script_tag }}
{{ 'lightbox/v2/loading.gif' | global_asset_url }}
{{ 'lightbox/v2/close.gif' | global_asset_url }}
{{ 'lightbox/v2/overlay.png' | global_asset_url }}
{{ 'lightbox/v2/zoom-lg.gif' | global_asset_url }}
```

```.liquid
{{ 'lightbox/v204/lightbox.css' | global_asset_url | stylesheet_tag }}
{{ 'lightbox/v204/lightbox.js' | global_asset_url | script_tag }}
{{ 'lightbox/v204/bullet.gif' | global_asset_url }}
{{ 'lightbox/v204/close.gif' | global_asset_url }}
{{ 'lightbox/v204/closelabel.gif' | global_asset_url }}
{{ 'lightbox/v204/donatebutton.gif' | global_asset_url }}
{{ 'lightbox/v204/downloadicon.gif' | global_asset_url }}
{{ 'lightbox/v204/loading.gif' | global_asset_url }}
{{ 'lightbox/v204/nextlabel.gif' | global_asset_url }}
{{ 'lightbox/v204/prevlabel.gif' | global_asset_url }}
```

```.liquid
{{ 'list_collection.css' | global_asset_url | stylesheet_tag }}
{{ 'search.css' | global_asset_url | stylesheet_tag }}
{{ 'textile.css' | global_asset_url | stylesheet_tag }}
```

```.liquid
{{ 'firebug/firebug.css' | global_asset_url | stylesheet_tag }}
{{ 'firebug/firebug.js' | global_asset_url | script_tag }}
{{ 'firebug/firebugx.js' | global_asset_url | script_tag }}
{{ 'firebug/firebug.html' | global_asset_url }}
{{ 'firebug/errorIcon.png' | global_asset_url }}
{{ 'firebug/infoIcon.png' | global_asset_url }}
{{ 'firebug/warningIcon.png' | global_asset_url }}
```


##img_url
`画像のURLを返します。`

`img_url`は以下のオブジェクトで使用できます。

+ product
+ variant
+ line item
+ collection
+ article
+ image

`line_item`オブジェクトは、ショッピングカート内の一行を表します。

カート内の商品の種類ごとに1つの line item があります。
<br>
画像サイズのパラメータ（ [image size parameter](#size-parameters) ）を受け取ることで、元の画像サイズを変更することができます。

元の画像サイズよりも小さいサイズを指定した場合、Shopify は画像を縮小して表示します。

画像サイズを指定しない場合、フィルタは`small (100x100)`の画像を返します。

※`line item`オブジェクトの場合、``img_url`` は、line item のバリエーション画像の URL を返します。
　バリエーションに指定された画像がない場合は、`img_url` は、その商品の画像の URL を返します。

```.liquid
{{ product | img_url: '100x100' }}
{{ variant | img_url: '720x720' }}
{{ line_item | img_url: '1024x' }}
{{ product | img_url }}
```
>https\://cdn.shopify.com/s/files/1/1183/1048/products/boat-shoes_**100x100**.jpeg?v=1459175177
https\://cdn.shopify.com/s/files/1/1183/1048/products/boat-shoes_**720x720**.jpeg?v=1459175177
https\://cdn.shopify.com/s/files/1/1183/1048/products/boat-shoes_**1024x**.jpeg?v=1459175177
https\://cdn.shopify.com/s/files/1/1183/1048/products/boat-shoes_**small**.jpeg?v=1459175177

<br>オブジェクトの `image` や `src` 属性にも、 `img_url` を使用することができます。

```.liquid
{{ variant.image | img_url: '300x300' }}
{{ variant.image.src | img_url: '240x' }}
```
>https\://cdn.shopify.com/s/files/1/0159/3350/products/red_shirt_100x100.jpg?v=1398706734
https\://cdn.shopify.com/s/files/1/0159/3350/products/red_shirt_240x.jpg?v=1398706734

<br>`img_url` は、**アイコンファイル (.ico) のサイズやフォーマットを変換できません**。

アイコンファイルのサイズやフォーマットを指定したとしても、`img_url` は、**元の状態のファイルを返します**。

```.liquid
{{ settings.favicon | img_url: '300x300' }}
{{ settings.favicon | img_url: '240x', scale: 2, format: 'pjpg' }}
```
>https\://cdn.shopify.com/s/files/1/0159/3350/files/icon.ico?v=1398706734
https\://cdn.shopify.com/s/files/1/0159/3350/files/icon.ico?v=1398706734

次に、`image_url`フィルタで、使用できるパラメータについて解説してきます。


###Size parameters

画像の幅と高さをピクセル単位で指定して、**元の画像サイズよりも小さい画像サイズ**に変更することができます。

画像サイズは、最大 5760 x 5760 （幅 x 高さ）px まで指定できます。

`crop`パラメータを指定しない限り、画像の元のアスペクト比（長辺と短辺の比）は維持されます。

```.liquid
{{ product | img_url: '450x450' }}
```


幅のみ、または、高さのみを指定した場合、Shopifyは元の画像サイズに基づいて他の寸法を計算し、元の画像のアスペクト比を維持したまま、サイズを変更できます。

```Width-only.liquid
{{ product | img_url: '125x' }}
```

```Height-only.liquid
{{ product | img_url: 'x500' }}
```

画像のサイズを変更したくない場合は、`master`とすることで、元の画像サイズを取得することができます。

```.liquid
{{ product | img_url: 'master' }}
```


###Other image URL prameters
画像サイズを変更するパラメータ以外に、`crop`、`scale`、`format`の3つのパラメータを指定することができます。

それぞれ見ていきましょう。

####crop
**画像全体が要求された寸法に収まらない場合に、切り抜く場所を指定できます。**

有効な値は以下の通りです。

+ `top`
+ `center`
+ `bottom`
+ `left`
+ `right`

```.liquid
{{ product | img_url: '400x400', crop: 'bottom' }}
```
`crop`を使用しない場合、Shopifyは指定した寸法に収まる最大の画像を表示します。

例えば、600 x 600 px の画像に対して、400 x 300 px と指定すると、Shopify は、**300 x 300 px**の画像を表示します。
`crop`を指定しておくと、高さ **100 px**分の画像が切り取られて、**400 x 300 px**の画像が表示されます。

####scale
**画像のピクセル密度を指定できます。**

ピクセル密度は、通常1インチあたりのピクセル数で表されます。

有効な値は以下の通りです。

+ `1`（デフォルト）
+ `2`
+ `3`

```.liquid
{{ product | img_url: '400x400', scale: 2 }}
```

####format
**表示される画像に使用するファイル形式を指定します。**

有効なオプションは以下の通りです。

+ `jpg`
+ `pjpg（ progressinve JPEG ）`

```.liquid
{{ product | img_url: '400x400', format: 'pjpg' }}
```
Shopifyでは以下のようなフォーマット変換を行うことができます。

+ **PNG** から **JPG** へ
+ **PNG** から **PJPG** へ
+ **JPG** から **PJPG** へ

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

最初のパラメータはリンクの **URL**、オプションの2番目のパラメータはリンクの**タイトル**を指定します。

```.liquid
{{ 'UnReact' | link_to: 'https://www.unreact.jp','A link to UnReact' }}
```
>\<a href="https\://www\.unreact.jp" title="A link to UnReact">UnReact\</a>


##link_to_vendor
`venderが登録されている商品を表示するページのリンクを持ったaタグを作成します。`

下記の例では、vender（製造元）にUnReactが登録されいてる商品を、一覧表示するページのリンクを持ったaタグが生成されます。

なので、移動した先のページには、UnReactが製造した商品のみが表示されます。

```.liquid
{{ "UnReact" | link_to_vendor }}
```
>\<a href="/collections/vendors?q=UnReact" title=**"UnReact"**>UnReact\</a>


##link_to_type
`ある商品タイプに属する商品を表示するコレクションページのaタグを作成します。`

```.liquid
{{ "jeans" | link_to_type }}
```
>\<a href="/collections/types?q=jeans" title=**"jeans"**>jeans\</a>


##link_to_tag
`指定されたタグを持つすべての商品を表示するページへのaタグを作成します。`

コレクションページで、タグによる絞り込みボタンを作るときに使用します。

```.liquid
<!-- 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>


##link_to_add_tag
`リンクにタグを追加できます。`

現在絞り込んでいるタグ＋違うタグを追加してコレクションページを表示するボタンを作りたいときに使用します。

```.liquid
<!-- collection.tags = ["Mens", "Womens", "Sale"] -->
{% for tag in collection.tags %}
  {{ tag | link_to_add_tag: tag }}
{% endfor %}
```
>**\<!-- If you're on "/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_remove_tag
`リンク中のタグを削除します。`

タグによる絞り込みを解除するボタンを作りたいときに使用します。

```.liquid
<!-- collection.tags = ["Mens", "Womens", "Sale"] -->
{% for tag in collection.tags %}
  {{ tag | link_to_remove_tag: tag }}
{% endfor %}
```
>\<!-- If you're on "**/collections/frontpage/mens**": -->
\<a title="Remove tag Mens" href="**/collections/frontpage**">Mens\</a>


##payment_type_img_url
`支払いタイプのSVG画像のURLを返します。`

変数 `shop.enabled_payment_types` と一緒に使用します。

```.liquid
{% for type in shop.enabled_payment_types %}
  <img src="{{ type | payment_type_img_url }}" />
{% endfor %}
```
>\<!-- If shop accepts American Express, Mastercard and Visa -->
\<img src="//cdn.shopify.com/s/global/payment_types/creditcards_american_express.svg?3cdcd185ab8e442b12edc11c2cd13655f56b0bb1">
\<img src="//cdn.shopify.com/s/global/payment_types/creditcards_master.svg?3cdcd185ab8e442b12edc11c2cd13655f56b0bb1">
\<img src="//cdn.shopify.com/s/global/payment_types/creditcards_visa.svg?3cdcd185ab8e442b12edc11c2cd13655f56b0bb1">
>><img src="//cdn.shopify.com/s/global/payment_types/creditcards_american_express.svg?3cdcd185ab8e442b12edc11c2cd13655f56b0bb1">
<img src="//cdn.shopify.com/s/global/payment_types/creditcards_master.svg?3cdcd185ab8e442b12edc11c2cd13655f56b0bb1">
<img src="//cdn.shopify.com/s/global/payment_types/creditcards_visa.svg?3cdcd185ab8e442b12edc11c2cd13655f56b0bb1">


##shopify_asset_url
`Shopifyのサーバー上にあるグローバルアセットのURLを返します。`

グローバルにホストされているアセットには、以下のようなものがあります。

+ option_selection.js
+ api.jquery.js
+ shopify_common.js
+ customer_area.js
+ surrencles.js
+ customer.css

```.liquid
{{ 'option_selection.js' | shopify_asset_url | script_tag }}
```
>\<script src="//cdn.shopify.com/s/shopify/option_selection.js?20cf2ffc74856c1f49a46f6e0abc4acf6ae5bb34" type="text/javascript">\</script>


##sort_by
`指定された sort_by パラメータでコレクションページへの URL を作成します。`

このフィルタはコレクションの URL （ `collection.url` ）に使用します。

```.liquid
{{ collection.url | sort_by: 'best-selling' }}
```
>/collections/**widgets?sort_by=best-selling**

sort_by フィルタを、後で出てくる `url_for_type` フィルタや `url_for_vendor` フィルタに追加することができます。

##url_for_type
`特定の商品タイプの商品を含むコレクションページにリンクする URL を作成します。`

```.liquid
{{ "T-shirt" | url_for_type }}
```
>/collections/**types?q=T-shirt**


##url_for_vendor
`特定の商品ベンダーの商品を含むコレクションページにリンクするURLを作成します。`

```.liquid
{{ "Shopify" | url_for_vendor }}
```
>/collections/**vendors?q=Shopify**


##within
`商品 URL に /collections/collection-handle を前置して、コレクション対応の商品 URL を作成します。`

`collection-handle`は、現在閲覧中のコレクションの`handle`です。

**handle** は、Liquidオブジェクトの属性にアクセスするために使用されます。

Shopifyのほとんどのオブジェクト（商品、コレクション、ブログ、記事、メニュー）にはハンドルがあります。

例えば、「About Us」というタイトルのページは、そのハンドルabout-usを使ってLiquidでアクセスすることができます。



```.liquid
<a href="{{ product.url | within: collection }}">{{ product.title }}</a>
```
>\<a href="/**collections/frontpage/products/alien-poster**">Alien Poster\</a>

商品がコレクションに登録されている場合、その商品の商品ページは、その商品が属するコレクションのコレクションページにアクセスできます。

例えば、`メンズ`というコレクションの中に`靴`という商品を登録しているとします。

`within`を使うと、`靴`の商品ページから、`メンズ`のコレクションのページにアクセスするボタンなどを作成することができます。

これにより、関連する商品などのコレクション関連のコンテンツを追加することができます。


#終わりに
今回の記事はここまでになります。

お疲れさまでした。

# Shopify アプリのご紹介

Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。

https://coming-soon.reterior.jp/

https://apps.shopify.com/shopify-application-314?locale=ja&surface_detail=%E3%83%AA%E3%83%86%E3%83%AA%E3%82%A2&surface_inter_position=1&surface_intra_position=1&surface_type=search