#はじめに
今回の記事では、ShopifyのURL filterを全てまとめてみました。
こちらを参考にしました。
#URL filter
URLフィルターは、Shopifyの Content Delivery Network（CDN）上のアセットへのリンクを出力します。
また、コレクションやブログをフィルタリングするためのリンクを作成する用途にも使用されます。
一般的に、URL フィルタの出力では、アセットのファイルパスに数字が付加されたクエスチョンマーク(?)が表示されます。
その数字はファイルのバージョン番号です。
例えば、このURLのバージョン番号は 28253 になります。
//cdn.shopify.com/s/files/1/0087/0462/t/394/assets/shop.css?28253
URL フィルタは常にアセットの最新バージョンを読み込みます。
それでは、URL フィルタを見ていきましょう。
##asset_url
Shopify テーマの「assets」フォルダ内にある、ファイルのURLを返します。
{{ 'theme.css' | asset_url }}
//cdn.shopify.com/s/files/1/0087/0462/t/394/assets/theme.css?28253
##asset_img_url
テーマの "assets" フォルダ内の画像のアセット URL を返します。
asset_img_url には、画像サイズのパラメータ（ image size parameter ）を指定します。
{{ '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 を返します。
{{ 'size-chart.pdf' | file_url }}
//cdn.shopify.com/s/files/1/0087/0462/files/size-chart.pdf?28261
ファイルページには、管理画面にある設定のファイルからいけます。
ファイルページには、画像やビデオ、ドキュメントが保存されていています。
##file_img_url
管理画面の Files ページにある画像のアセット URL を返します。
file_img_urlには、画像サイズのパラメータ（ image size parameter ）
を設定できます。
{{ 'logo.png' | file_img_url: '1024x768' }}
//cdn.shopify.com/s/files/1/0246/0527/files/logo_1024x768.png?42
##customer_login_link
顧客ログインページへのリンクを生成します。
{{ 'Log in' | customer_login_link }}
<a href="/account/login" id="customer_login_link">Log in</a>
##global_asset_url
グローバルアセットの URL を返します。
グローバルアセットは、Shopifyのサーバー上のディレクトリに保管されています。
グローバルアセットを使用することで、ページのロード時間を改善することができます。
{{ 'prototype.js' | global_asset_url | script_tag }}
<script src="//cdn.shopify.com/s/global/prototype.js?1" type="text/javascript"></script>
以下のグローバルアセットを利用できます。
{{ '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 }}
{{ 'prototype/1.5/prototype.js' | global_asset_url | script_tag }}
{{ 'prototype/1.6/prototype.js' | global_asset_url | script_tag }}
{{ '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 }}
{{ 'ga.js' | global_asset_url | script_tag }}
{{ 'mootools.js' | global_asset_url | script_tag }}
{{ 'lightbox.css' | global_asset_url | stylesheet_tag }}
{{ 'lightbox.js' | global_asset_url | script_tag }}
{{ 'lightbox/v1/lightbox.css' | global_asset_url | stylesheet_tag }}
{{ 'lightbox/v1/lightbox.js' | global_asset_url | script_tag }}
{{ '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 }}
{{ '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 }}
{{ 'list_collection.css' | global_asset_url | stylesheet_tag }}
{{ 'search.css' | global_asset_url | stylesheet_tag }}
{{ 'textile.css' | global_asset_url | stylesheet_tag }}
{{ '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 があります。
画像サイズのパラメータ（ image size parameter ）を受け取ることで、元の画像サイズを変更することができます。
元の画像サイズよりも小さいサイズを指定した場合、Shopify は画像を縮小して表示します。
画像サイズを指定しない場合、フィルタはsmall (100x100)の画像を返します。
※line itemオブジェクトの場合、img_url は、line item のバリエーション画像の URL を返します。
バリエーションに指定された画像がない場合は、img_url は、その商品の画像の URL を返します。
{{ 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
オブジェクトの image や src 属性にも、 img_url を使用することができます。
{{ 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
img_url は、アイコンファイル (.ico) のサイズやフォーマットを変換できません。
アイコンファイルのサイズやフォーマットを指定したとしても、img_url は、元の状態のファイルを返します。
{{ 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パラメータを指定しない限り、画像の元のアスペクト比（長辺と短辺の比）は維持されます。
{{ product | img_url: '450x450' }}
幅のみ、または、高さのみを指定した場合、Shopifyは元の画像サイズに基づいて他の寸法を計算し、元の画像のアスペクト比を維持したまま、サイズを変更できます。
{{ product | img_url: '125x' }}
{{ product | img_url: 'x500' }}
画像のサイズを変更したくない場合は、masterとすることで、元の画像サイズを取得することができます。
{{ product | img_url: 'master' }}
###Other image URL prameters
画像サイズを変更するパラメータ以外に、crop、scale、formatの3つのパラメータを指定することができます。
それぞれ見ていきましょう。
####crop
画像全体が要求された寸法に収まらない場合に、切り抜く場所を指定できます。
有効な値は以下の通りです。
topcenterbottomleftright
{{ 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（デフォルト） 23
{{ product | img_url: '400x400', scale: 2 }}
####format
表示される画像に使用するファイル形式を指定します。
有効なオプションは以下の通りです。
jpgpjpg（ progressinve JPEG ）
{{ product | img_url: '400x400', format: 'pjpg' }}
Shopifyでは以下のようなフォーマット変換を行うことができます。
- PNG から JPG へ
- PNG から PJPG へ
- JPG から PJPG へ
##link_to
HTML のリンクを生成します。
最初のパラメータはリンクの URL、オプションの2番目のパラメータはリンクのタイトルを指定します。
{{ '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が製造した商品のみが表示されます。
{{ "UnReact" | link_to_vendor }}
<a href="/collections/vendors?q=UnReact" title="UnReact">UnReact</a>
##link_to_type
ある商品タイプに属する商品を表示するコレクションページのaタグを作成します。
{{ "jeans" | link_to_type }}
<a href="/collections/types?q=jeans" title="jeans">jeans</a>
##link_to_tag
指定されたタグを持つすべての商品を表示するページへのaタグを作成します。
コレクションページで、タグによる絞り込みボタンを作るときに使用します。
<!-- 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
リンクにタグを追加できます。
現在絞り込んでいるタグ＋違うタグを追加してコレクションページを表示するボタンを作りたいときに使用します。
<!-- 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
リンク中のタグを削除します。
タグによる絞り込みを解除するボタンを作りたいときに使用します。
<!-- 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 と一緒に使用します。
{% 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">
##shopify_asset_url
Shopifyのサーバー上にあるグローバルアセットのURLを返します。
グローバルにホストされているアセットには、以下のようなものがあります。
- option_selection.js
- api.jquery.js
- shopify_common.js
- customer_area.js
- surrencles.js
- customer.css
{{ '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 ）に使用します。
{{ collection.url | sort_by: 'best-selling' }}
/collections/widgets?sort_by=best-selling
sort_by フィルタを、後で出てくる url_for_type フィルタや url_for_vendor フィルタに追加することができます。
##url_for_type
特定の商品タイプの商品を含むコレクションページにリンクする URL を作成します。
{{ "T-shirt" | url_for_type }}
/collections/types?q=T-shirt
##url_for_vendor
特定の商品ベンダーの商品を含むコレクションページにリンクするURLを作成します。
{{ "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でアクセスすることができます。
<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 機能を実現することができます。