シンプルな HTML フォームで JS および JSON を使用して価格を更新します

Question

郵便番号を入力し、フォームを送信し、JavaScript を使用して郵便番号の最初の 4 文字が JSON データの郵便番号と一致するかどうかを確認する設定を作成しようとしています。一致する場合は、をクリックし、ページ上で価格を変更します。これは Shopify サイト用なので、そこに実装する方法についての助けがあれば幸いです。

現在、フォームを送信するとページが更新されますが、何も起こりません。

これはまだ初期段階ですが、これまでに得たものです:

非同期関数 checkZones() {
  // const requestURL = "{{ 'zones.json' |asset_url }}";
  // const request = new Request(requestURL);
  //const 応答 = fetch(リクエスト) を待ちます;
  // const ゾーン = 応答を待ちます.json();
  定数ゾーン = [{
      "名前": "ゾーン 1",
      「郵便番号」: [
        "テスト1"、
        "テスト2"、
        "テスト3"、
        "テスト4"、
        "テスト5"、
        "テスト6"、
        "テスト7"、
        "テスト8"、
        "テスト9"、
        「テスト10」
      ]、
      「コスト」：10.8
    }、
    {
      "名前": "ゾーン 2",
      「郵便番号」: [
        "テスト12"、
        "テスト13"、
        "テスト14"、
        "テスト15"、
        "テスト16"、
        "テスト17"、
        "テスト18"、
        "テスト19"、
        "テスト18"、
        "テスト19"、
        「テスト20」
      ]、
      「コスト」：16.8
    }
  】
  console.log(ゾーン);
  updatePrice()
}

関数 updatePrice(ゾーン) {
  const postcodeFormInput = document.querySelector('#postcodeForm input[type="text]"');

  const 郵便番号 = ゾーン.郵便番号;
  for (郵便番号の定数コード) {
    if (postcodeFormInput.value.contains(code)) {
      const productPrice = document.querySelector('#ProductPrice-製品テンプレート').textContent;
      if (コード === "test1") {
        const newPrice = 製品価格ゾーン.コスト;
        document.querySelector('#ProductPrice-製品テンプレート').innerHTML = newPrice;
      }
    }
  }
}

<form onsubmit="checkZones()" id="postcodeForm">
  <入力タイプ="テキスト">
  <button type="submit">コストを更新</button>
</form><span id="ProductPrice-product-template">0.00</span>

Answer 1

ここにいくつかの質問があります

質問の一部:

1. 送信イベント ハンドラーを使用して送信を防止する
2. リージョンを必要とする関数にリージョンを渡していません
3. 計算に使用される金額が文字列 (innerText と .value から取得されたもの) ではなく数値であることを確認する必要があります。単項プラス記号 を使用して、それを文字列に変換しました。番号、または未定義の場合は 0) を使用し、条件付き連鎖演算子 ?. を使用して欠落している郵便番号
を処理します。
4. find を使用すると、郵便番号の配列が含まれるエリアを取得できます

リーリー リーリー