【Shopify】LiquidのHTML filterを全てまとめてみた話
はじめに
今回の記事では、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
オブジェクトで使用する必要があります。
{% 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日で |
日付の書式は、テーマのローカル設定で定義することも出来ます。
"date_formats": {
"month_day_year": "%B %d, %Y"
}
{{ 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 %}
<!-- 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 機能を実現することができます。
Author And Source
この問題について(【Shopify】LiquidのHTML filterを全てまとめてみた話), 我々は、より多くの情報をここで見つけました https://qiita.com/eijiSaito/items/2a30415457e32f34eb72著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .