Wixでjavascript sessionやarrayを使ってみる

コードをもうちょっとだけきれいにしてみた。

先週こちらの記事を書いたんですけど、もうちょっとコードを使いやすくしたので、公開しておきます。
以前は違う販売日を違うページにしていたのですが、今回、WixのSessionという機能（ユーザーがページを開いている間、そのユーザーのデータを保存する機能）を使って、販売日を記録しておき、希望日の在庫だけを見せる、という仕組みです。コードは汚いのですが、忘備録と、誰かの参考になればと思って、上げておきます。

やりたいこと

さて、ポストコード販売ページはこんな感じで、ポストコードを打つことでjavascriptが文字の置き換えやボタンの置き換えを行う、というのがやりたかったことです。

これにポストコードを入れると、

こういうボタンが出てきたり、

ゴメンネっていうコメントが出たりします。デリバリーの日付は複数あるので、この日付をSessionに記録します。そうすると、飛んだ先のページで日付を元にオンラインショップを構成します。また、いいやり方かどうかはわからないんですが、一応前日の5時をすぎるとオーダーできなくなる仕組みも実装しました。ホントはGitで管理すればいいんですけど、多分これGitできない仕様なので。。何か方法をご存知の方はお知らせくださいー

コードの解説。

汚いですが。
まずsessionをインポートします。'wix-storage'にセッションデータが記録されているようです。

import {session} from 'wix-storage';
import wixWindow from 'wix-window';

非常に汚いんですが、こういう方法で今回は配送日を記録します。
データベース接続すると、この辺はきれいになりそうです。
その辺は今回は飛ばしました。

const deliveryDateDay=[20,21,22,23]
const deliveryMonth=[4,4,4,4] //(0 for Jan, 11 for Dec)
const deliveryDate=["20May","21May","22May","23May"];
const listmonths=["Jan","Feb","Mar","Apr","May","June","July","Aug","Oct","Nov","Dec"];
const currentDate=today.getUTCDate()+listmonths[today.getUTCMonth()];
const deliveryPostcodeWed=["TW8","TW9","TW10","TW1","TW2"];
const deliveryPostcodeThu=["SW19","SW18"];
const deliveryPostcodeFri=["W6","W8","W10","W11","W14"];
const deliveryDay=["Wed","Thu","Fri","Sat"];
const deliveryPostcodes=[deliveryPostcodeWed,deliveryPostcodeThu,deliveryPostcodeFri];

JavascriptのDate機能を使って、現在の日付と時間を取り込み、水曜から土曜の各日付に対して、日付をすぎたかどうかを判定する部分です。ちょっとこれは月跨ぐとバグるコードなので、関数をちゃんと作るときに、月跨いでもいいコードに書き換えることにします。

const today = new Date();

//日付を超えたかどうか
var isPassed=[false,false,false,false];

//各日付に対して、月、日と時間が超えてないかどうかを確認します。
for (var i = 0; i < 4; i++){
  console.log(deliveryDateDay[i],today.getUTCDate(),deliveryMonth[i],today.getUTCMonth(),today.getUTCHours());
  if (deliveryDateDay[i]<=today.getUTCDate() && deliveryMonth[i]<=today.getUTCMonth() &&  16<=today.getUTCHours() ){
    isPassed[i]=true;
  }
}

セッションにこの情報を保存します。

//console.log(isPassed);
session.setItem("listDeliveryDate",deliveryDate);
session.setItem("listDeliveryDay",deliveryDay);
session.setItem("listIsPassed",isPassed);

ポストコードの関数などは、前回の記事にあるので省略。
JavascriptのArrayを使って、前回の関数iconButton3_onClickをチョコチョコ書き換えます。

export function iconButton3_onClick(event){
  let value = $w("#input1").value;

//ポストコードがちゃんと入力されれば実行
  if( isValidPostcode(value)) 
  {
    var postcode=formatPostcode(value);
    var areacodeslist=postcode.split(" ");
    var areacodes=areacodeslist[0];
    session.setItem("POSTCODE", postcode);
    session.setItem("AREACODE", areacodes);
    var deliveryList=[(deliveryPostcodeWed.indexOf(areacodes)>-1),(deliveryPostcodeThu.indexOf(areacodes)>-1),(deliveryPostcodeFri.indexOf(areacodes)>-1)]
    var isDeliverable = false;
    //console.log(deliveryList,isDeliverable);

//配達可能な三日間のArrayをforで巡回します。
    for (i = 0; i < 3; i++) {
//配達可能なとき
      if (deliveryList[i] && isDeliverable===false && isPassed[i]===false){
        //$w("#text26").text="Sorry! Preorder is over! Please come back next week!";
        $w("#iconButton1").label = "Order Delivery on "+deliveryDate[i]+" "+deliveryDay[i];
        $w("#iconButton1").link = "/shoppingpage";
        $w("#iconButton1").show();
        session.setItem("Date", deliveryDate[i]);
        session.setItem("Day", deliveryDay[i]);
        $w("#text26").text="Great news! We are delivering to your area, "+deliveryPostcodes[i]+" on "+deliveryDate[i]+".  Please tell your friends :)";
        isDeliverable = true;
      }
//配達できるけど、時間を過ぎてしまったとき
      else if (deliveryList[i] && isDeliverable===false && isPassed[i]===true) {
        $w("#iconButton1").label = "Order Shop Collection";
        $w("#iconButton1").link = "/choosedate";
        $w("#iconButton1").show();
        $w("#text26").text="Sorry! We are delivering to your area, "+deliveryPostcodes[i]+" on "+deliveryDay[i] +" but preorder is over this week. Please wait until next week or you can always use click and collect service from the shop!";
        isDeliverable = true;

      }
//そのポストコードに配達できないとき
      else if (isDeliverable===false){
        $w("#iconButton1").label = "Order Shop Collection";
        $w("#iconButton1").link = "/choosedate";
        $w("#iconButton1").show();
        $w("#text26").text="We are very sorry, but at the moment there are no scheduled deliveries for your area in the next few weeks. You can still collect from the store using our click and collect service. Simply choose your order online, select a pick up date and we’ll see you then :)";  //or else do this other thing
      }
    }
  }
//ポストコードが判定できなかったとき
  else{
    $w("#text26").text="Sorry! We can't recognize your postcode......";  //or else do this other thing
  }
}

こんな感じです。飛んだ先のページでは、こんな感じでデータを取得できます。ただし、sessionの中のarrayはテキストになっているので、arrayに戻したり上げたりすることが必要かもしれません。

import {session} from 'wix-storage';

let postcode=session.getItem("POSTCODE");
let areacode=session.getItem("AREACODE");
let deliveryDate=session.getItem("Date");
let deliveryDay=session.getItem("Day");

またそのうちまとめてコードをあげようと思いますが、今日はこの辺にしておきます。