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

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

[こちら](https://shopify.dev/docs/themes/liquid/reference/filters/html-filters)を参考にしました。
#HTML filter
HTMLフィルタは、Liquidのプロパティやストアのassets（画像や動画などが保存されたファイル）に基づいてHTML要素（HTMLタグ等）を作成するフィルタです。

HTML filtersを見てみましょう。
##img_tag
`imgタグを作成します。`

```.liquid
{{ 'smirking_gnome.gif' | asset_url | img_tag }}
```

>\<img src="smirking_gnome.gifのURL">

img_tagフィルタは、altタグ、クラス名、sizeの3つのパラメータを受け取ることができます。
**1つ目のパラメータは、altテキスト、2つ目はタグに適用するCSSクラスかクラス名、3つ目は画像サイズです。**

```.liquid
{{ 'smirking_gnome.gif' | asset_url | img_tag: 'Smirking Gnome', 'cssclass1 cssclass2' }}
```

>\<img src="//cdn.shopify.com/s/files/1/0147/8382/t/15/assets/smirking_gnome.gif?v=1384022871" alt="Smirking Gnome" class="cssclass1 cssclass2" />



sizeパラメータは、URLフィルタである`img_url`フィルタで使用されているものと同じです。

`img_url`フィルタは画像のURLを返し、画像サイズのパラメータを受け取ることが出来るURLフィルタです。

```.liquid
{{ product | img_url: '100x100' }}
```

>https\://cdn.shopify.com/s/files/1/1183/1048/products/boat-shoes_100x100.jpeg?v=1459175177

また、`img_tag`フィルタは、`img_url`フィルタと併用することが出来ません。

両方のフィルタを使用した場合、`img_url`フィルタは、`img_tag`フィルタのsizeパラメータを上書きします。


`img_tag`フィルタは、以下のオブジェクトにも使用することが出来ます。
各オブジェクトに登録した画像の`imgタグ`を出力します。

+ product
+ variant
+ line item
+ collection
+ image

```.liquid
{{ product | img_tag }}
{{ variant | img_tag: 'alternate text' }}
{{ line_item | img_tag: 'alternate text', 'css-class' }}
{{ image | img_tag: 'alternate text', 'css-class', 'small' }}
{{ collection | img_tag: 'alternate text', 'css-class', 'large' }}
```

>\<img src="//cdn.shopify.com/s/files/1/0159/3350/products/red_shirt_small.jpg?v=1398706734" alt="Red Shirt Small" />
\<img src="//cdn.shopify.com/s/files/1/0159/3350/products/red_shirt_small.jpg?v=1398706734" alt="alternate text" />
\<img src="//cdn.shopify.com/s/files/1/0159/3350/products/red_shirt_small.jpg?v=1398706734" alt="alternate text" class="css-class" />
\<img src="//cdn.shopify.com/s/files/1/0159/3350/products/red_shirt_small.jpg?v=1398706734" alt="alternate text" class="css-class" />
\<img src="//cdn.shopify.com/s/files/1/0159/3350/products/shirts_collection_large.jpg?v=1338563745" alt="alternate text" class="css-class" />

##currency_selector
`顧客がサイト上で使用できる通貨を選択するためのドロップダウンリストを生成します。`

![ScreenClip.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665523/c6839eb2-2e6c-4a5e-d3b3-397e9d9ab7ec.png)

`currency_selerctor`フィルタは、[currency form](https://shopify-dev.shopifycloud.com/docs/themes/liquid/reference/tags/theme-tags#currency) 内の`form`オブジェクトで使用する必要があります。

```example.liquid
{% form 'currency' %}
   {{ form | currency_selector: class: 'my_special_class', id: 'Submit'  }}
{% endform %}
```

##payment_button
`商品のdynamic chekout button（今すぐ購入ボタン）を作成します。`

![ScreenClip.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665523/27b1db94-e754-6bd1-1038-d1bb6de1753c.png)


このフィルタは、[product form](https://shopify-dev.shopifycloud.com/docs/themes/liquid/reference/tags/theme-tags#product) 内の`form`オブジェクトで使用する必要があります。

`product form`は、パラメータに product オブジェクトを指定することで、カートに商品を追加するためのフォームを作成します。

```.liquid
{{ form | payment_button }}
```

>\<div data-shopify="payment-button" class="shopify-payment-button">
    ...
\</div>

##script_tag
`scriptタグを生成します。`

```.liquid
{{ 'shop.js' | asset_url | script_tag }}
```

>\<script src="//cdn.shopify.com/s/files/1/0087/0462/t/394/assets/shop.js?28178" type="text/javascript">\</script>

##stylesheet_tag
`stylesheetタグを生成します。`

```.liquid
{{ 'shop.css' | asset_url | stylesheet_tag }}
```

>\<link href="//cdn.shopify.com/s/files/1/0087/0462/t/394/assets/shop.css?28178" rel="stylesheet" type="text/css" media="all" />


##time_tag
`timeタグを生成します。`
下記の例では、タイムスタンプを`timeタグ`に変換しています。

```.liquid
{{ article.published_at | time_tag }}
```

>\<time datetime="2018-12-31T18:00:00Z">Monday, December 31, 2018 at 1:00 pm -0500\</time>


`time_tag`フィルタは、Rudyの`strftime`メソッドと同じパラメータを受け取ることが出来ます。

`%a`（省略した曜日を表す etc. "Sun"）や`%b`（省略した月を表す etc. "Jan"）などの短絡形式のリストは、[Rudyのドキュメント](https://ruby-doc.org/core-3.0.0/Time.html#method-i-strftime)や、[strfti.me](http://www.strfti.me/)のサイトに記載されています。

```.liquid
{{ article.published_at | time_tag: '%a, %b %d, %Y' }}
```

>\<time datetime="2018-12-31T18:00:00Z">Mon, Dec 31, 2018\</time>


<br>次に、`time_tag`フィルタのパラメータである、`format`と`datetime`について解説していきます。

###format
`time_tag`フィルタに`format`パラメータを渡すことで、ストアフロントの言語の日付フォーマットを出力することができます。
利用可能なフォーマットは以下の通りです。

+ abbreviated_date
+ basic
+ date
+ date_at_time
+ default
+ on_date

```.liquid
{{ article.published_at | time_tag: format: 'date' }}
```

>\<time datetime="2018-12-31T18:00:00Z">December 31, 2018\</time>

さまざまな言語で表示される`format`オプションのプレビューを以下の表にまとめています。

| format | English | French | Japanese |
|:-:|:-:|:-:|:-:|
| abbreviated_date | Dec 31, 2018  | 31 déc 2018 |  2018年12月31日 |
| basic | 12/31/2018  | 31/12/2018 |  2018/12/31 |
|  date |  December 31, 2018 | 31 décembre 2018	  |  2018年12月31日 |
| date_at_time  | December 31, 2018 at 1:00 pm |  31 décembre 2018 à 13:00 | 2018年12月31日 13:00 |
| default  |  Monday, December 31, 2018 at 1:00 pm -0500 |  lundi 31 décembre 2018 à 13:00 -0500 |  2018年12月31日(月曜日) 13:00 -0500 |
| on_date  | on Dec 31, 2018 | le 31 déc 2018  | 2018年12月31日で|

日付の書式は、テーマのローカル設定で定義することも出来ます。

```theme/locales/en.json
"date_formats": {
  "month_day_year": "%B %d, %Y"
}
```
```etc.liquid
{{ article.published_at | time_tag: format: 'month_day_year' }}
```

>\<time datetime="2016-02-24T14:47:51Z">February 24, 2016\</time>


###datetime
`datetime`パラメータに、[strftime shorthand formats](https://ruby-doc.org/core-3.0.0/Time.html#method-i-strftime)に記載されている短絡フォーマットを指定することで、出力される`<time>`タグの`datetime`属性にカスタムフォーマットを使用する事ができます。

```.liquid
{{ article.published_at | time_tag: '%a, %b %d, %Y', datetime: '%Y-%m-%d' }}
```

>\<time datetime="2016-02-24">Wed, 24 Feb, 2016\</time>

##payment_type_svg_tag
`支払いタイプの画像の<svg>タグを返します。`

![ScreenClip.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665523/918f2d77-fb45-0d84-f762-49e7d5702e7a.png)

`payment_type_svg_tag`は、`shop.enabled_payment_types`変数と一緒に用い、`class`パラメータを与えることで、**\<svg>タグにクラス属性を適用する事ができます**。

`enabled_payment_types`とはshopオブジェクトのメソッドの一つで、ショップで利用可能なクレジットカード、暗証番号、支払い方法の配列を返します。

```.liquid
{% for type in shop.enabled_payment_types %}
  {{ type | payment_type_svg_tag, class: 'custom-class' }}
{% endfor %}
```

>\<!-- If the shop accepts Mastercard and Discover -->
\<svg class="custom-class" xmlns="http\://www\.w3.org/2000/svg">
  \<circle fill="#EB001B" cx="15" cy="12" r="7">\</circle>
  \<circle fill="#F79E1B" cx="23" cy="12" r="7">\</circle>
  ...
\</svg>

>\<svg class="custom-class" xmlns="http\://www\.w3.org/2000/svg">
  \<path fill="#494949" d="M9 11h20v2H9z">\</path>
  ...
\</svg>


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

お疲れさまでした。

# 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