shopify　配達日表示javascript

Assets/で新しいファイル delivery-day.js 作成。

-コード要約- •プラグインday.jsを使うので、最初にminファイルを https://unpkg.com/dayjs@1.8.35/dayjs.min.js からコピペ

•ロケーションをシンガポールに設定必要な曜日を変数に当てはめformatDate()関数で表示をサイト用に成形。

•カート(cart drawer),　ホーム、about siteページの３カ所で表示させるので、それぞれのURLパスを location.pathnameでとって、条件に合わせてDOMに文字を表示。これをしないとjsエラーになり表示されない。そのページにないidを取得するコードを置いてはいけない。

•クロスサイトスクリプティング（XSS）のセキュリティ対策に.textContentを使用。

//copy min file https://unpkg.com/dayjs@1.8.35/dayjs.min.js
//長いのでここでは省略　↑ここからコピペが必要　CDNを使ってないのはここに書いても読み込まなかったから。

dayjs.locale('sn');
let thisSun = dayjs().startOf('week')
let lastSun = thisSun.add(-7, 'day')
let nextSun = thisSun.add(7, 'day')
let thisWed = thisSun.add(3, 'day')
let nextWed = thisSun.add(10, 'day')
let thisSunText = formatDate(thisSun.toDate());
let lastSunText = formatDate(lastSun.toDate());
let nextSunText = formatDate(nextSun.toDate());
let thisWedText = formatDate(thisWed.toDate());
let nextWedText = formatDate(nextWed.toDate());

let today =new Date();
//for cart drawer
if(today.getDay() == 0 && today.getHours() < 22 ){
  document.getElementById('js-deliveryDayCartDrawer').textContent = thisWedText ;
} else {
  document.getElementById('js-deliveryDayCartDrawer').textContent = nextWedText ;
}
//for home
let path = location.pathname ;
if(path == '/') {
  if(today.getDay() == 0 && today.getHours() < 22 ){
    document.getElementById('js-deliveryDayHome').textContent = thisWedText ;
  } else {
    document.getElementById('js-deliveryDayHome').textContent = nextWedText ;
  }
//for about site page
}else if(path == '/pages/about-site') {

    document.getElementById('js-thisSun2').textContent = thisSunText;
    document.getElementById('js-nextSun').textContent = nextSunText ;
    document.getElementById('js-nextWed').textContent = nextWedText ;
    if(today.getDay() == 4 || today.getDay() == 5 || today.getDay() == 6){
        document.getElementById('js-currentSchedule').classList.add('remove');
    } else {
        document.getElementById('js-thisSun').textContent = thisSunText ;
        document.getElementById('js-lastSun').textContent = lastSunText ;
        document.getElementById('js-thisWed').textContent = thisWedText ; 
    }
}

function formatDate(date){
  const option ={ year: 'numeric', month:'numeric', day:'numeric', weekday:'short', timezone:'Asia/Singapore'} //weekday:'long' は完全表記、'short'は短縮系
  const res = new Intl.DateTimeFormat('en-GB', 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})`
}

Layout/theme.liquid の<body>の上に {{ 'delivery-day.js' | asset_url | script_tag }} と書いてjsを使えるようにする。カートで使うのでほぼ全ページで必要なためtheme.liquidに追加。

3.各テンプレにgetElementById()メソッド用のIDを記入

•カート Snippets/cart-drawer.liquid <span id='js-deliveryDayCartDrawer'></span>

•ホーム Templates/index.html <span id='js-deliveryDayHome'></span>

•about siteページ shopifyのpageの編集機能の特徴か、テキストの入ってないタグはコードが部分的に削除される現象あり。保存時はコードがある状態で保存され問題ないが、次に編集画面を開いた時にコードが消えていて逆に消えてるかどうかが判断しにくい。何かしら代替テキスト（nextWedなど）を入れておいた方が安全かも。

<span id="js-lastSun"></span>
<span id="js-thisSun"></span>
<span id="js-thisWed">thisWed</span>
<span id="js-thisSun2"></span>
<span id="js-nextSun"></span>
<span id="js-nextWed">nextWed</span>

cyber-s / blog

shopify　配達日表示javascript #866

cyber-s / blog

shopify 配達日表示javascript #866

shopify　配達日表示javascript #866