Update prices using JS and JSON with a simple HTML form

Question

I'm trying to create a setup where you enter a zip code, submit the form, and then use JavaScript to check if the first 4 characters of the zip code match the zip code in some JSON data, and if so , then change the price on the page. This will be for a Shopify site, so any help on how to implement it there would be great.

Currently when I submit the form the page refreshes but nothing happens.

Here’s what I have so far, still in the early stages:

async function checkZones() {
  // const requestURL = "{{ 'zones.json' | asset_url }}";
  // const request = new Request(requestURL);
  //const response = await fetch(request);
  // const zones = await response.json();
  const zones = [{
      "name": "zone 1",
      "postcodes": [
        "test1",
        "test2",
        "test3",
        "test4",
        "test5",
        "test6",
        "test7",
        "test8",
        "test9",
        "test10"
      ],
      "cost": 10.8
    },
    {
      "name": "zone 2",
      "postcodes": [
        "test12",
        "test13",
        "test14",
        "test15",
        "test16",
        "test17",
        "test18",
        "test19",
        "test18",
        "test19",
        "test20"
      ],
      "cost": 16.8
    }
  ]
  console.log(zones);
  updatePrice()
}

function updatePrice(zone) {
  const postcodeFormInput = document.querySelector('#postcodeForm input[type="text]"');

  const postcodes = zone.postcodes;
  for (const code of postcodes) {
    if (postcodeFormInput.value.contains(code)) {
      const productPrice = document.querySelector('#ProductPrice-product-template').textContent;
      if (code === "test1") {
        const newPrice = productPrice zone.cost;
        document.querySelector('#ProductPrice-product-template').innerHTML = newPrice;
      }
    }
  }
}

<form onsubmit="checkZones()" id="postcodeForm">
  <input type="text">
  <button type="submit">Update Costs</button>
</form><span id="ProductPrice-product-template">0.00</span>

Answer 1

Some questions here

Some of the questions:

1. Use submit event handler and prevent submission
2. You are not passing regions to functions that require them
3. You need to make sure that the amount used in the calculation is a number and not a string (the one obtained from innerText and .value) - I used the unary plus sign to convert it to a number or 0 if undefined) and use the conditional chaining operator ?. to handle missing postal codes
4. You can use find to get the area containing an array of zip codes

const checkZones = () => {
  // 这里是一个更简单的fetch
  //fetch("{{ 'zones.json' | asset_url }}")
  // .then(response => response.json())
  // .then(zones => updatePrice(zones));
  updatePrice(zones)
}
const postcodeFormInput = document.querySelector("#postcodeForm input[type=text]");
const productTemplate = document.getElementById('ProductPrice-product-template');
const updatePrice = (zones) => {

  const postCode = postcodeFormInput.value;
  console.log("Input",postCode)
  const cost = +zones.find(({postcodes}) => postcodes.includes(postCode))?.cost; // 如果未找到则为0
  
  if (!cost) return; // 未找到
  const productPrice = +productTemplate.textContent;
  const newPrice = productPrice + cost;
  productTemplate.innerHTML = newPrice;
};

document.getElementById("postcodeForm").addEventListener("submit", (e) => {
  e.preventDefault(); // 停止提交
  checkZones()
})

<form id="postcodeForm">
  <input type="text">
  <button type="submit">更新成本</button>
</form>
<span id="ProductPrice-product-template">0.00</span>







<script>
// 测试数据，在取消注释fetch时将其删除
const zones = [{ "name": "zone 1", "postcodes": [ "test1", "test2", "test3", "test4", "test5", "test6", "test7", "test8", "test9", "test10" ], "cost": 10.8 }, { "name": "zone 2", "postcodes": [ "test12", "test13", "test14", "test15", "test16", "test17", "test18", "test19", "test18", "test19", "test20" ], "cost": 16.8 } ];
</script>