はじめに
今回の記事では、ShopifyのDeprecated filterを全てまとめてみました。
こちらを参考にしました。
Deprecated filter
Deprecated filterとは、公式が推奨していないフィルタです。
非推奨のフィルタなので普段使うことはないですが、テーマ内で使われいるときに書き直せるよう頭の片隅に入れておくと良いと思います。
Color filters、URL fileters、Date formatsの３つで非推奨のフィルタがあり、それぞれのフィルタに代替案が用意されています。
それでは、非推奨のフィルタとその代替案を見ていきましょう！
Color filters
Colorフィルタでは、hex_to_filterが非推奨となっています。
hex_to_rgba
16進数表記のCSS色の文字列を、RGBA表記に変換します。
デフォルトでは、不透明度は1で、0から1の間で指定できます。
入力値の16進数の値は、短縮しても処理されます（ 例. #812 ）。
.site-footer h1 {
color: {{ settings.color_name }};
}
.site-footer p {
color: {{ settings.color_name | hex_to_rgba: 0.5 }};
}
.site-footer h1 {
color: #812dd3;
}.site-footer p {
color: rgba(129, 45, 211, 0.5);
}
代替案：color_to_rgb、color_modify
代替案として、color_to_rgbと、color_modifyが挙げられます。
color_to_rgbは、alpha 要素（透過度）があるCSS色の文字列の場合、rgba()形式に変換し、与えられていないCSS色の場合は、rgb()形式を返すフィルタです。
{{ '#7ab55c' | color_to_rgb }}
{{ 'hsla(100, 38%, 54%, 0.5)' | color_to_rgb }}
rgb(122, 181, 92)
rgba(122, 181, 92, 0.5)
16進数表記だけでなく、すべてのCSS色表記を、rgb()または、rgba()形式に出来るので、hex_to_rgbaの上位互換と言えますね。
次に、color_modifyです。
color_modifyは、入力値のCSS色の指定した要素の値を変更するフィルタです。
alpha要素を変更した場合、入力色が16進数表記であってもrgba()形式で返されます。
{{ '#7ab55c' | color_modify: 'red', 255 }}
{{ '#7ab55c' | color_modify: 'alpha', 0.85 }}
#ffb55c
rgba(122, 181, 92, 0.85)
alpha要素だけでなく、rgb要素の値も変更できるので、hex_to_rgbaの上位互換と言えますね。
URL filters
URLフィルタでは、collection_img_url、product_img_url、Named size parametersの３つが非推奨となっています。
collection_img_url
コレクション画像のURLを返します。
{{ collection.image | collection_img_url: 'medium' }}
//cdn.shopify.com/s/files/1/0087/0462/collections/collection-image_medium.png?v=1337103726
代替案：img_url
代替案として、img_urlが挙げられます。
img_urlは、コレクション画像だけでなく、product、variant、line item、article、image オブジェクトに対して使えるので、collection_img_urlを使う理由が見当たらないですね。
product_img_url
商品画像のURLを生成します。
{{ product.featured_image | product_img_url: "medium" }}
//cdn.shopify.com/s/files/1/0087/0462/products/shirt14_medium.jpeg?v=1309278311
代替案：img_url
代替案として、img_urlが挙げられます。
非推奨の理由は、collection_img_urlと同様です。
Named size parameters
特定の画像サイズに名前がついており、パラメータの値として使用できます。
古いテーマの中には、数値の画像サイズを使用する代わりに、img_url のパラメータとして名前付きサイズを使用しているものがあります。
以下の表に、Named size parameters 一覧を示しています。
| Name | Maximum image size |
|---|---|
| pico | 16 x 16 pixels |
| icon | 32 x 32 pixels |
| thumb | 50 x 50 pixels |
| small | 100 x 100 pixels |
| compact | 160 x 160 pixels |
| medium | 240 x 240 pixels |
| large | 480 x 480 pixels |
| grande | 600 x 600 pixels |
| original | 1024 x 1024 pixels |
代替案：numeric size parameters
代替案として、numeric size parametersが挙げられます。
numeric size parametersは、画像の幅と高さのパラメータの値を数値で書く方法です。
{{ product | img_url: '450x450' }}
画像の幅や高さを正確に指定でき、最大で 5760 x 5760 px まで指定できる点が、Named size image parameterより良いとされる理由です
Date formats
Date formatsは、time_tagやdateなど、特定のフィルタで使用されます。
非推奨となったパラメータは、以下の2つです。
shortlong
{{ article.published_at | time_tag: format: 'short' }}
<time datetime="2016-02-24T14:47:51Z">February 24, 2016</time>
代替案：date format options
代替案として、date format optionsが挙げられます。
date format optionsの一覧は、【Shopify】LiquidのHTML filterを全てまとめてみた話 を御覧ください。
終わりに
今回の記事はここまでになります。
お疲れさまでした。
Shopify アプリのご紹介
Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。