今週の水曜日と来週の水曜日の日にちを表示させたい

[yokiyoki]

今日の西暦、月、日にちを表示するのは {{ "now" | date: "%Y-%m-%d" }}  でできるのですが、

今週の水曜日、また来週の水曜日の日時を表示させる書き方をどなたかご存知ないでしょうか？

[Jizo_Inagaki]

興味があったので試作してみましたが、無理やりな形にしかできませんでした...。
作ってはみたので一応記載したいと思います。

■参考情報

基本的には以下の投稿を基本にしています。
「来週」のように日付をずらすための説明が書かれていますので参照ください。

https://stackoverflow.com/questions/44397072/shopify-liquid-finding-out-date-of-a-specific-day-of-th...

■今週の水曜

以降は作成したサンプルですが、構造だけでなく変数名なども適当なのと、ちゃんとテストできていない点をご了承ください。
もっとシンプルかつ汎用性のある形で作りたかったのですが、うまくまとまりませんでした。

今週の場合、現在の秒数からマイナスとプラスの両方のパターンが発生するため、起点となる曜日を軸に調整する必要がありました。
「今日が金曜なら、今週の水曜は2日前(-2日)」で、「今日が月曜なら、今週の水曜は2日後(+2日)」という形です。

{% capture dayOfTheWeek %}{{ "now" | date: "%a"}}{% endcapture %}
{% case dayOfTheWeek %}
  {% when 'Mon' %}
    {% assign thisWeekDifference = 86400 | times: 2 %}
    <p>今週の水曜日は{{ "now" | date: "%s" | plus: thisWeekDifference | date: "%Y-%m-%d %H:%M / %a" }}</p>
  {% when 'Tue' %}
    {% assign thisWeekDifference = 86400 | times: 1 %}
    <p>今週の水曜日は{{ "now" | date: "%s" | plus: thisWeekDifference | date: "%Y-%m-%d %H:%M / %a" }}</p>
  {% when 'Wed' %}
    {% assign thisWeekDifference = 86400 | times: 0 %}
    <p>今週の水曜日は{{ "now" | date: "%s" | date: "%Y-%m-%d %H:%M / %a" }}</p>
  {% when 'Thu' %}
    {% assign thisWeekDifference = 86400 | times: 1 %}
    <p>今週の水曜日は{{ "now" | date: "%s" | minus: thisWeekDifference | date: "%Y-%m-%d %H:%M / %a" }}</p>
  {% when 'Fri' %}
    {% assign thisWeekDifference = 86400 | times: 2 %}
    <p>今週の水曜日は{{ "now" | date: "%s" | minus: thisWeekDifference | date: "%Y-%m-%d %H:%M / %a" }}</p>
  {% when 'Sat' %}
    {% assign thisWeekDifference = 86400 | times: 3 %}
    <p>今週の水曜日は{{ "now" | date: "%s" | minus: thisWeekDifference | date: "%Y-%m-%d %H:%M / %a" }}</p>
  {% when 'Sun' %}
    {% assign thisWeekDifference = 86400 | times: 4 %}
    <p>今週の水曜日は{{ "now" | date: "%s" | minus: thisWeekDifference | date: "%Y-%m-%d %H:%M / %a" }}</p>
{% endcase %}

■来週の水曜

来週の場合は現在の秒数からプラスするだけなのでもう少しシンプルにできます。

{% capture dayOfTheWeek %}{{ "now" | date: "%a"}}{% endcapture %}
{% case dayOfTheWeek %}
  {% when 'Mon' %}
    {% assign nextWeekDifference = 86400 | times: 9 %}
  {% when 'Tue' %}
    {% assign nextWeekDifference = 86400 | times: 8 %}
  {% when 'Wed' %}
    {% assign nextWeekDifference = 86400 | times: 7 %}
  {% when 'Thu' %}
    {% assign nextWeekDifference = 86400 | times: 6 %}
  {% when 'Fri' %}
    {% assign nextWeekDifference = 86400 | times: 5 %}
  {% when 'Sat' %}
    {% assign nextWeekDifference = 86400 | times: 4 %}
  {% when 'Sun' %}
    {% assign nextWeekDifference = 86400 | times: 3 %}
{% endcase %}
<p>来週の水曜日は{{ "now" | date: "%s" | plus: nextWeekDifference | date: "%Y-%m-%d %H:%M / %a" }}</p>

■コンテンツキャッシュの問題

https://community.shopify.com/c/Shopify-Design/Show-content-based-on-Day-of-Week/m-p/252638/highligh...

上記投稿はこの件に関連するものですが、以下のように書かれています。

It's very important to note that since Shopify caches content it's possible for the date to be out of sync with the current time. So in other words it might be Monday, but the code still thinks it is Sunday. Do not rely on dates in Liquid to be 100% accurate due to this caching.

コンテンツがキャッシュされるため、liquidで日付を用いても100%正確な表示にはならないという指摘です。

■留意事項

サンプルコードの以下の「%H:%M / %a」は時間や曜日がわかりやすいように追加してただけなので、フォーマット指定部分は適宜書き換えてください。

date: "%Y-%m-%d %H:%M / %a"

他の方がもっとちゃんとした例を提示されたり、このサンプルのおかしな部分を訂正したりしていただけるのではと思いますので、このサンプルは使わずに参考程度に見ていただくのが安全かと思います。

[Tomoyuki_K · Accepted solution]

@Jizo_Inagaki のおっしゃるとおり、liquidテンプレートで出力すると、キャッシュが表示（昔の状態で表示）することがあるので、この場合はJavaScriptで表示するのがよさそうです！

今週の水曜日等の日付計算はライブラリにまかせて、フォーマット部分は自分で書くとよさそうです！
サンプルは以下です！

※ 以下は day.js を読み込んだ場合のサンプルです

// 今週の日曜日
const thisSunday = dayjs().startOf('week')
// 今週の水曜日
const thisWednesday = thisSunday.add(3, 'day')
// 来週の水曜日
const nextWednesday = thisWednesday.add(7, 'day')


// 結果の確認
console.log(formatDate(thisWednesday.toDate()))
console.log(formatDate(nextWednesday.toDate()))

function formatDate(date) {
  const option = { year: 'numeric', month: 'numeric', day: 'numeric', weekday: 'long', timezone: 'Asia/Tokyo'}
  const res = new Intl.DateTimeFormat('ja-JP', option).formatToParts(date)
  const year = (res.find(r => r.type === 'year')).value
  const month = (res.find(r => r.type === 'month')).value
  const day = (res.find(r => r.type === 'day')).value
  const weekday = (res.find(r => r.type === 'weekday')).value
  return `${year}-${month}-${day} ${weekday}`	
}

[yokiyoki]

Tomoyuki_Kさま　 day.js での方法、実際にコードをいただきありがとうございます！
サイトで表示させることができました。
特にformatDate()の部分の情報を自分では見つけられなかったのでとても助かりました！

[yokiyoki]

jizoさま　前回に引き続きありがとうございます！
こういう方法があるのですね。思いつきませんでした。
またキャッシュの問題について、今回の部分が配送日に関係するので、正確性の観点からとても重要な情報でした。
詳細まで共有いただき助かります。
プログラムを作る考え方など勉強になり、今後の参考にさせていただきます。