LoginSignup
43
39

More than 1 year has passed since last update.

@eijiSaito(eiji saito)in株式会社UnReact

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

Last updated at Posted at 2021-01-31

はじめに

今回の記事では、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を返します。

ScreenClip.png

{{ '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

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

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

ScreenClip.png

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

ScreenClip.png

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は元の画像サイズに基づいて他の寸法を計算し、元の画像のアスペクト比を維持したまま、サイズを変更できます。

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

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

{{ product | img_url: 'master' }}

Other image URL prameters

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

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

crop

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

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

  • top
  • center
  • bottom
  • left
  • right
{{ 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
{{ product | img_url: '400x400', scale: 2 }}

format

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

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

  • jpg
  • pjpg（ 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 機能を実現することができます。

43
39
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
43
39