Wixでjavascript入門

# Wixでちょっと凝ったページを作るときのjavascriptメモ
[Wix](https://www.wix.com/)では結構簡単にショッピングページを作ることができるんだけど、ビミョーに融通が聞かない。いつものパン屋さんから、コロナの影響で日付ごとにデリバリーの地域が異なるんだけど、配達対象外の地域を弾くインターフェースを作れないか、相談があって、javascriptでいろんなソースを見ながら書いてみたので、ここにまとめておく。初心者なので、このコードのここがダメっていうのもあれば是非。イギリスのポストコード判定は[こちらのサイト](https://www.qodo.co.uk/blog/javascript-check-if-a-uk-postcode-is-valid/)を丸パクリした。
## 用件
イギリスのポストコードSW7 2AZとか、W3 9AEとかからエリアコード（SW7, W3）を抽出して、配達できるかどうか表示して、配達できるならオンラインショップのページを表示する機能を作ってみた。

```javascript
    // 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のチュートリアルを参考](https://www.youtube.com/watch?v=nBkF-eGI38o)に、今回はリピーターって奴をWixのデータベースに接続して、ショップページ（日付ごとに別のページを用意）のdeliveryDateに応じて、在庫があるかないかを表示する。在庫の個数はproductのJSONからは取得できないようだった。

```javascript
/// コードの実例を含む 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;
}

```

こんな感じで実装した。結果は[こんな感じで](https://ja.happyskylondon.com/delivery)
<img width="696" alt="Screen Shot 2020-05-09 at 18.51.58.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165373/f6cc950d-707c-559e-42f9-e29953ad2300.png">
このページにポストコードを入れると、
<img width="686" alt="Screen Shot 2020-05-09 at 18.52.12.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165373/2b5d3077-b676-848e-e850-1b6054819262.png">
お届けできますよーっていう表示や、
<img width="678" alt="Screen Shot 2020-05-09 at 18.52.25.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165373/a68e27c0-5e10-6394-6bb7-b5030c1e7093.png">
お届けできません。なんていう表示がでます。

[続きはこちら](https://qiita.com/mokiti58/items/5be348bdee9ea05b3741)