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

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

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



#Additional filter

一般的なフィルタは、書式設定、変換、CSSクラスの適用など、さまざまな目的に対応しています。



##date
`タイムスタンプを別の日付形式に変換します。`

```.liquid
{{ article.published_at | date: "%a, %b %d, %y" }}
```
>Tue, Apr 22, 14

パラメータとして`format`を渡すこともできます。



###format
`date`フィルタに`format`パラメータを渡すことで、固有のフォーマットで日付を表示することができます。

```.liquid
{{ order.created_at | date: format: 'abbreviated_date' }}
```
>Dec 31, 2018

いくつかの異なるフォーマットオプションがあり、独自のフォーマットを定義することも可能です。

フォーマットの一覧は、[【Shopify】LiquidのHTML filterを全てまとめてみた話](https://qiita.com/eijiSaito/items/2a30415457e32f34eb72#format) の方に記載しております。



##default
`変数のデフォルト値を設定することができます。`

文字列、配列、およびハッシュで使用できます。

デフォルト値は、変数の値が `nil`、`false`、または空の文字列`""`になった場合に返されます。空白を含む文字列では、デフォルト値は返されません。

```.liquid
Dear {{ customer.name | default: "customer" }}
```
>\<!-- If customer.name is nil -->
Dear customer

>\<!-- If customer.name is "" -->
Dear customer

>\<!-- If customer.name is "　　" -->
Dear

 `allow_false` パラメータを使用することで、変数にデフォルト値の代わりに `false` を返すことができます。

`allow_false`パラメータの値は、`true`を設定します。

```.liquid
{{ settings.flag | default: true, allow_false: true }}
```
><!-- If settings.flag is false -->
false



##default_errors
`form.errors 変数のデフォルト値に設定されているエラーメッセージを出力します。`

出力されるメッセージは、 `form.errors` によって返される文字列に依存します。

```.liquid
{% if form.errors %}
      {{ form.errors | default_errors }}
{% endif %}
```
><!-- if form.errors returned "email" -->
Please enter a valid email address.



##default_pagination
`複数のページに分割された各ページ（ pagenate ）のリンクを作成します。`

**pagenation**とは、Google検索結果などの表示数が多い場合に、分割された各Webページのリンクを並べたものです。

![ScreenClip.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665523/afcf832d-80e0-cc02-4a16-4425d60954b9.png)

`default_pagination`フィルターは、`paginate`変数と一緒に使用します。

```.liquid
{{ paginate | default_pagination }}
```
>\<span class="page current">1\</span>
\<span class="page">\<a href="/collections/all?page=2" title="">2\</a>\</span>
\<span class="page">\<a href="/collections/all?page=3" title="">3\</a>\</span>
\<span class="deco">…\</span>
\<span class="page">\<a href="/collections/all?page=17" title="">10\</a>\</span>
\<span class="next">\<a href="/collections/all?page=2" title="">Next »\</a>\</span>

デフォルトのpagenationでは、次のページと前のページに移動するリンクに `Next >>` と `<< Previous` というラベルを使用します。

`default_pagination`フィルタに、`next`と、`previous`のパラメータに表示したい単語を渡すことで、それぞれのラベルを上書きすることができます。

```.liquid
{{ paginate | default_pagination: next: 'Older', previous: 'Newer' }}
```

>
\<span class="page current">1\</span>
\<span class="page">\<a href="/collections/all?page=2" title="">2\</a>\</span>
\<span class="page">\<a href="/collections/all?page=3" title="">3\</a>\</span>
\<span class="next">\<a href="/collections/all?page=2" title="">Older\</a>\</span>



##format_address
`アドレスの要素をロケール（ 設定 ）に応じた順に表示します。`

登録された住所の部分のみを出力し、登録してない部分は出力されません。

`format_address`フィルタは、ストアアカウントを持っている顧客の住所ページや、ストアの住所を出力したいときに使用します。

```.liquid
{{ address | format_address }}
```
>\<p>
　Elizabeth Gonzalez\<br>
　1507 Wayside Lane\<br>
　San Francisco\<br>
　CA\<br>
　94103\<br>
　United States
\</p>

```.liquid
{{ address | format_address }}
```
>\<p>
　Feng Sun\<br>
　No. 2094, 1006, Hui Dong Xin Cun\<br>
　Nanhui District\<br>
　201300, Shanghai\<br>
　China
\</p>

##highlight
`送信されたsearch.termsと検索範囲内の単語が一致する時、検索範囲内の一致した文字列をHTMLの<strong>タグでラップし、クラスに highlight を与えます。`

`search.terms`は、**検索欄に入力された文字列を返す search オブジェクトの属性の一つ**です。


```.liquid
{{ item.content | highlight: search.terms }}
```
>\<!-- If the search term was "Yellow" -->
\<strong class="highlight">Yellow\</strong> shirts are the best!





##highlight_active_tag
`コレクションをあるタグで絞り込みをしている場合、絞り込みをしているタグに active クラスを持った<span>タグでラップします。`

```.liquid
<!-- collection.tags = ["Cotton", "Crew Neck", "Jersey"] -->
{% for tag in collection.tags %}
    {{ tag | highlight_active_tag | link_to_tag: tag }}
{% endfor %}
```

>\<a title="Show products matching tag Cotton" href="/collections/all/cotton">**\<span class="active">** Cotton **\</span>**\</a>
\<a title="Show products matching tag Crew Neck" href="/collections/all/crew-neck">Crew Neck\</a>
\<a title="Show products matching tag Jersey" href="/collections/all/jersey">Jersey\</a>


##json
`文字列を、JSON形式に変換します。`

`json`フィルタが引用符を追加してくれるので、**Liquidの出力を引用符で囲む必要はありません**。

また、必要に応じて出力内で引用符をなくしてくれます。

```.js
var content = {{ pages.page-handle.content | json }};
```
>var content = "\u003Cp\u003E\u003Cstrong\u003EYou made it! Congratulations on starting your own e-commerce store!\u003C/strong\u003E\u003C/p\u003E\n\u003Cp\u003EThis is your shop\u0026#8217;s \u003Cstrong\u003Efrontpage\u003C/strong\u003E, and it\u0026#8217;s the first thing your customers will see when they arrive. You\u0026#8217;ll be able to organize and style this page however you like.\u003C/p\u003E\n\u003Cp\u003E\u003Cstrong\u003ETo get started adding products to your shop, head over to the \u003Ca href=\"/admin\"\u003EAdmin Area\u003C/a\u003E.\u003C/strong\u003E\u003C/p\u003E\n\u003Cp\u003EEnjoy the software,  \u003Cbr /\u003E\nYour Shopify Team.\u003C/p\u003E";

`json`フィルタは、Liquidオブジェクトを、**JavaScriptで読めるようにするため**にも使用されます。

```.js
var json_product = {{ collections.featured.products.first | json }};
var json_cart = {{ cart | json }};
```

###商品の在庫とJSONフィルタについて
2017年12月5日以降に作成されたShopifyのストアでは、JSONフィルタは`inventory_quantity`と`inventory_policy`の値を出力できません。

これは、ボットやクローラーが、**アクセスを許可されていないストアの在庫量を取得するのを防ぐ**ためです。

JSONフィルタの代わりに、`variant.inventory_quantity`や`variant.inventory_poricy`を使用することで在庫の情報にアクセスすることができます。


##weight_with_unit
`商品の重量に単位を付けます。`

```.liquid
{{ product.variants.first.weight | weight_with_unit }}
```
>24.0 kg

重量単位は、Shopifyストアの一般設定で設定することができます。
![ScreenClip.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665523/8bc55057-d74c-66b9-13ac-a7659a268251.png)

フィルタに異なる単位を渡すことで上書きすることができます。

それぞれの商品に独自の単位を設定したいときに使います。


```.liquid
{{ variant.weight | weight_with_unit: variant.weight_unit }}
```
>52.9 lb


##placeholder_svg_tag
`placeholder 名を取得し、placeholder SVG イラスト（ <svg>タグ ）を出力します。`

```.liquid
{{ 'collection-1' | placeholder_svg_tag }}
```
>\<svg xmlns="http\://www\.w3.org/2000/svg" viewBox="0 0 525.5 525.5">...omitted for brevity...\</svg>

###Custom class attribute

クラスパラメータを渡すことで、SVGタグにclass属性を与えることができます。

```.liquid
{{ 'collection-1' | placeholder_svg_tag: 'custom' }}
```
>\<svg **class="custom"** xmlns="http\://www\.w3.org/2000/svg" viewBox="0 0 525.5 525.5">...omitted for brevity...\</svg>

placeholder名と画像は以下の表にまとめました。

| Placeholder name | Preview |
|:--               |:--      |
| collection-1  | <img src="https://cdn.shopify.com/shopifycloud/shopify_dev/assets/themes/placeholders/collection-1-5f43e429920b69ef45d3a1951be5a833c693707f6f48ce0c579630e49d38aace.svg" width="525" height="525">  |
| collection-2  | <img src="https://cdn.shopify.com/shopifycloud/shopify_dev/assets/themes/placeholders/collection-2-d231777573272505272babec0e5477850c5717390f009fb56019a8f90590cafd.svg" width="525" height="525">  |
| collection-3  | <img src="https://cdn.shopify.com/shopifycloud/shopify_dev/assets/themes/placeholders/collection-3-868481a006eab48fa728eddc2ae8f5b5833a41293b1d385f6a4ca7a04b4c7f62.svg" width="525" height="525">  |
| collection-4  |  <img src="https://cdn.shopify.com/shopifycloud/shopify_dev/assets/themes/placeholders/collection-4-6590c546e8235c53683a36d626e400a1e69323a7a1f38f0c50f1c8a1d8d26e86.svg" width="525" height="525"> |
| collection-5  | <img src="https://cdn.shopify.com/shopifycloud/shopify_dev/assets/themes/placeholders/collection-5-ac465d5ff3f190a413882b6c2e0b56ef650f14011e1a2c8e568c2d091c80a044.svg" width="525" height="525">  |
| collection-6  | <img src="https://cdn.shopify.com/shopifycloud/shopify_dev/assets/themes/placeholders/collection-6-0e93cb17d4c5871bcbe537b95b180c4cd6df29e13e4f56d81f7546eb2ba70758.svg" width="525" height="525">  |
| image         | <img src="https://cdn.shopify.com/shopifycloud/shopify_dev/assets/themes/placeholders/image-5af95a247b2a93def40b1208d09ac9607805c0da0fb2fdf972ffeda938a310bd.svg" width="525" height="525">  |
| lifestyle-1   |  <img src="https://cdn.shopify.com/shopifycloud/shopify_dev/assets/themes/placeholders/lifestyle-1-c2c4831947fd434d8e020ca2cb77d3a9c76e3242ba7fa369f289d97c9168bab5.svg" width="1052" height="400"> |
| lifestyle-2   |<img src="https://cdn.shopify.com/shopifycloud/shopify_dev/assets/themes/placeholders/lifestyle-2-38f614bc3d4f678f75b0984e5465ef24f5f041d276ae673d238b8dc3168ee68c.svg" width="1052" height="400">   |
| product-1     |  <img src="https://cdn.shopify.com/shopifycloud/shopify_dev/assets/themes/placeholders/product-1-e5ccc159ef45e0fabd6326f70c83b8426a2e02f790da83c6ce3da979d060e62b.svg" width="525" height="525"> |
| product-2     | <img src="https://cdn.shopify.com/shopifycloud/shopify_dev/assets/themes/placeholders/product-2-0c5a29572a8c2284cb18164c96d264aa172549bf1f55748b5f1e2e41d24e3261.svg" width="525" height="525">  |
| product-3     |  <img src="https://cdn.shopify.com/shopifycloud/shopify_dev/assets/themes/placeholders/product-3-f23dd6ce0e7b02cbbd9b604a8a1a565e63352d67c1ecd210f3b1f0da0ec269f0.svg" width="525" height="525"> |
| product-4     | <img src="https://cdn.shopify.com/shopifycloud/shopify_dev/assets/themes/placeholders/product-4-abe5903c14e44278d016dc35472de97717137b458507840b3f82df3711c3431d.svg" width="525" height="525">  |
| product-5     | <img src="https://cdn.shopify.com/shopifycloud/shopify_dev/assets/themes/placeholders/product-5-fba6646226b8cf1bfd50ad17f062485cc9ac3c74d15985f3426db6a49d2094b7.svg" width="525" height="525">  |
| product-6     |  <img src="https://cdn.shopify.com/shopifycloud/shopify_dev/assets/themes/placeholders/product-6-866fc29f1b2a039bbcc45f0e4f5f746807ffe3407011f2306de40668cb0e2fa9.svg" width="525" height="525"> |


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

お疲れさまでした。

# 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