【Shopify】よく使うdate(日付)フィルター集〜日本語で曜日を出力する〜

Shopifyでよく使用するdateフィルターについてまとめました。
※基本的にはarticleで使用する想定です。

2022/01/01

{{ article.published_at | date: '%Y/%m/%d' }}

{{ product.created_at | date: format: 'basic' }}

※どちらも可能

2022年1月1日

{{ article.published_at | date: '%Y年%_m月%e日' }}

{{ product.created_at | date: format: 'abbreviated_date' }}

※どちらも可能

2022/01/01 - 20:10

{{ article.published_at | date: '%Y/%m/%d - %k:%M' }}

2022年1月1日 午後10時10分10秒

{{ article.published_at | date: '%Y年%_m月%e日 午前%l時%M分%S秒' }}

日本語で曜日を表示

曜日はデフォルトでは日本語で表示することができません。
そこで以下のようにして、表示させます。

2022年1月1日(土)

{%- assign weekday = 'now' | date: '%a' -%}
{%- capture weekday_jp -%}
    {%- if weekday == 'Sun' -%}
        {{- '(日)' -}}
    {%- elsif weekday == 'Mon' -%}
        {{- '(月)' -}}
    {%- elsif weekday == 'Tue' -%}
        {{- '(火)' -}}
    {%- elsif weekday == 'Wed' -%}
        {{- '(水)' -}}
    {%- elsif weekday == 'Thu' -%}
        {{- '(木)' -}}
    {%- elsif weekday == 'Fri' -%}
        {{- '(金)' -}}
    {%- elsif weekday == 'Sat' -%}
        {{- '(土)' -}}
    {%- endif -%}
{%- endcapture -%}
{{ article.published_at | date: '%Y年%_m月%e日' append: weekday_jp }}

まとめ

何かご不明点、おかしな点あればご連絡ください。

これ以外にもShopifyテーマのLiquidでのカスタマイズを今後もnoteに投稿していくので、フォローといいねしていただけるとうれしいです。

また、Shopifyの独自のカスタマイズやテーマ開発などのご依頼ございましたら、TwitterのDMよりお待ちしております。

あわせてお読みください

自己紹介

エンジニア経歴

2019.08〜2020.08　カレント自動車株式会社IT事業部インターン
2020.08〜　フリーランスとして、数社の業務委託とShopifyエンジニア, Webエンジニアとして活動
2021.08〜　僕と私と株式会社 Shopify事業部責任者
2022.01〜　石垣島に僕と私と株式会社グループのEC制作会社設立 （代表）

その他経歴

2021　 電動キックボード日本一周
　　　 雑誌「BICYCLE JAPAN」7月号掲載
　　　 渋谷大型スクリーンCM「SWALLOW」出演

SNS

TikTok
85,000フォロワー(2021.09時点)
主に旅について発信

Instagram
11,000フォロワー(2021.09時点)
主に旅と生活について発信

Twitter
旅とShopifyについて発信

Tweets by taito_smile