FROM CACHE - jp_header
解決済

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

yokiyoki
観光客
5 0 0
今日の西暦、月、日にちを表示するのは {{ "now" | date: "%Y-%m-%d" }}  でできるのですが、
今週の水曜日、また来週の水曜日の日時を表示させる書き方をどなたかご存知ないでしょうか?
1 件の受理された解決策
Tomoyuki_K
Shopify Partner
38 10 30

成功

@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}`	
}

 

元の投稿で解決策を見る

4件の返信4

Jizo_Inagaki
Shopify Partner
990 373 690

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

 

■参考情報

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

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"

 

 

 

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

Jizo_Inagaki | フリーランスのwebデザイナー
- テーマのカスタム承れます。
- 記載した回答で解決できましたらベストソリューションの承認をお願いします。
- DMや指名による対応はご依頼として有料でのみ承ります。
Tomoyuki_K
Shopify Partner
38 10 30

成功

@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
観光客
5 0 0

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

yokiyoki
観光客
5 0 0

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