はじめに

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

こちらを参考にしました。

HTML filter

HTMLフィルタは、Liquidのプロパティやストアのassets（画像や動画などが保存されたファイル）に基づいてHTML要素（HTMLタグ等）を作成するフィルタです。

HTML filtersを見てみましょう。

img_tag

imgタグを作成します。

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

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

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

{{ '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フィルタです。

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

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

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

currency_selerctorフィルタは、currency form 内のformオブジェクトで使用する必要があります。

example.liquid

{% form 'currency' %}
   {{ form | currency_selector: class: 'my_special_class', id: 'Submit'  }}
{% endform %}

payment_button

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

このフィルタは、product form 内のformオブジェクトで使用する必要があります。

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

{{ form | payment_button }}

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

script_tag

scriptタグを生成します。

{{ '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タグを生成します。

{{ '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タグに変換しています。

{{ 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のドキュメントや、strfti.meのサイトに記載されています。

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

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

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

format

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

abbreviated_date
basic
date
date_at_time
default
on_date

{{ 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に記載されている短絡フォーマットを指定することで、出力される<time>タグのdatetime属性にカスタムフォーマットを使用する事ができます。

{{ 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>タグを返します。

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

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

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

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

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