Wixでjavascript入門

Wixでちょっと凝ったページを作るときのjavascriptメモ

Wixでは結構簡単にショッピングページを作ることができるんだけど、ビミョーに融通が聞かない。いつものパン屋さんから、コロナの影響で日付ごとにデリバリーの地域が異なるんだけど、配達対象外の地域を弾くインターフェースを作れないか、相談があって、javascriptでいろんなソースを見ながら書いてみたので、ここにまとめておく。初心者なので、このコードのここがダメっていうのもあれば是非。イギリスのポストコード判定はこちらのサイトを丸パクリした。

用件

イギリスのポストコードSW7 2AZとか、W3 9AEとかからエリアコード（SW7, W3）を抽出して、配達できるかどうか表示して、配達できるならオンラインショップのページを表示する機能を作ってみた。

    // For full API documentation, including code examples, visit http://wix.to/94BuAAs
import wixWindow from 'wix-window';

//ポストコードを判定する関数
function isValidPostcode(p) {
//イギリスのポストコードのregex 
    var postcodeRegEx = /[A-Z]{1,2}[0-9]{1,2} ?[0-9][A-Z]{2}/i; 
    return postcodeRegEx.test(p); 
}

//ポストコードをちゃんとフォーマットする関数。大文字にする機能はつけた。
function formatPostcode(p) { 

    if (isValidPostcode(p)) { 
        p=p.toUpperCase(p)
        var postcodeRegEx = /(^[A-Z]{1,2}[0-9]{1,2})([0-9][A-Z]{2}$)/i; 
        return p.replace(postcodeRegEx,"$1 $2");  
    } else {
        return p;
    }
}

//WixのonReady関数
$w.onReady(function () {
//最初は全部隠しておく
    $w("#iconButton1").hide();
    $w("#iconButton2").hide();
    $w("#iconButton4").hide();
//ボタンをクリックしたら、関数を呼ぶ
    $w('#button1').onClick( (event) => {
        iconButton3_onClick(event);
} );
});

//ボタンをクリックしたときの挙動
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];
//エリアコードごとにボタンを出したり、テキストを表示したりする。
    if( (areacodes === "TW8") || (areacodes === "TW9") || (areacodes === "TW1") || (areacodes === "TW2")) {
      $w("#iconButton1").show();  //do this thing
      $w("#iconButton2").hide();
      $w("#iconButton4").hide();
      $w("#text27").text="Your areacode is "+areacodes;
      $w("#text26").text="We deliver to your address on 13 May (Wed)";
    }
    else if( (areacodes === "SW19") || (areacodes === "SW18") ) {
      $w("#iconButton1").hide();  //do this thing
      $w("#iconButton2").show();
      $w("#iconButton4").hide();
      $w("#text27").text="Your areacode is "+areacodes;
      $w("#text26").text="We deliver to your address on 14 May (Thu)";
    }
    else if( (areacodes === "W6") || (areacodes === "W8") || (areacodes === "W10") || (areacodes === "W11") || (areacodes === "W14") ) {
      $w("#iconButton1").hide();  //do this thing
      $w("#iconButton2").hide();
      $w("#iconButton4").show();
      $w("#text27").text="Your areacode is "+areacodes;
      $w("#text26").text="We deliver to your address on 15 May (Fri)";
    }
    else {
      $w("#iconButton1").hide();  //do this thing
      $w("#iconButton2").hide();
      $w("#iconButton4").hide();
      $w("#text27").text="Your areacode is "+areacodes;
      $w("#text26").text="We're sorry but we currently don't deliver to your address. However, we can still offer you Saturday collection service!";  //or else do this other thing
    }
  }
}

用件２

もうちょっとめんどくさいのが、Wixのお店機能で、こっちはもっと融通が聞かない。このyoutubeのチュートリアルを参考に、今回はリピーターって奴をWixのデータベースに接続して、ショップページ（日付ごとに別のページを用意）のdeliveryDateに応じて、在庫があるかないかを表示する。在庫の個数はproductのJSONからは取得できないようだった。

/// コードの実例を含む API レポートを参照するには https://wix.to/94BuAAs を開いてください。
import wixWindow from 'wix-window';

//デリバリーの日付。商品のオプションに同じものがある。
const deliveryDate='5/13';
//リピーターの定義
export function repeater_itemReady($item, itemData, index) {
//itemDataからproductオブジェクトを生成
    let product = createProductObject(itemData);
//日付のJSONから、在庫があるかどうかを確認
    let choices = product.productOptions.Delivery.choices;
    let choiceIndex = 0;
    for (var i = 0; i < choices.length; i++) {
        if (choices[i].value == deliveryDate){
            //console.log(choices[i].value);
            choiceIndex = i;
        }
    }

    let choiceInStock = product.productOptions.Delivery.choices[choiceIndex].inStock;

//productから、リピータの各アイテムに情報を投げる
    $item('#productName').text=product.name;
    $item('#productPrice').text=product.price;
    $item('#productImage').src=product.mainImage.src;
    if (choiceInStock) {
        $item('#productLeft').text='In Stock'
    } else {
        $item('#productLeft').text='Out of Stock. Sorry.'
    }
//カートに入れるをクリックすると、日付のオプションがついた商品がカートに入る。
    $item('#cartButton').onClick(() => {
        console.log(product.productId, product.dateSelected);
        $w('#shoppingCartIcon1').addToCart(product.productId, 1, {choices:{Delivery: product.dateSelected}})
        .then(()=>{
            console.log('added!');
            })
        .catch(console.error);
    })}


function createProductObject(productRecord)
{
    let product = {
        dateSelected: deliveryDate,
        productId: productRecord._id,
        mainImage: productRecord.mediaItems[0],
        price: productRecord.formattedPrice,
        name: productRecord.name,
        productOptions: productRecord.productOptions
    }
    return product;
}

こんな感じで実装した。結果はこんな感じで

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

お届けできますよーっていう表示や、

お届けできません。なんていう表示がでます。

続きはこちら