Mettre à jour les prix en utilisant JS et JSON avec un simple formulaire HTML

Question

J'essaie de créer une configuration dans laquelle vous entrez un code postal, soumettez le formulaire, puis utilisez JavaScript pour vérifier si les 4 premiers caractères du code postal correspondent au code postal dans certaines données JSON, et si c'est le cas , puis modifiez le prix sur la page. Ce sera pour un site Shopify, donc toute aide sur la façon de l'implémenter serait formidable.

Actuellement, lorsque je soumets le formulaire, la page s'actualise mais rien ne se passe.

Voici ce que j'ai jusqu'à présent, encore au début :

fonction async checkZones() {
  // const requestURL = "{{ 'zones.json' | Asset_url }}";
  // const request = new Request(requestURL);
  //const réponse = wait fetch(request);
  // const zones = wait réponse.json();
  zones const = [{
      "nom": "zone 1",
      "codes postaux": [
        "test1",
        "test2",
        "test3",
        "test4",
        "test5",
        "test6",
        "test7",
        "test8",
        "test9",
        "test10"
      ],
      "coût": 10,8
    },
    {
      "nom": "zone 2",
      "codes postaux": [
        "test12",
        "test13",
        "test14",
        "test15",
        "test16",
        "test17",
        "test18",
        "test19",
        "test18",
        "test19",
        "test20"
      ],
      "coût": 16,8
    }
  ]
  console.log(zones);
  updatePrix()
}

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

  const codes postaux = zone.codes postaux ;
  pour (code const des codes postaux) {
    if (postcodeFormInput.value.contains(code)) {
      const productPrice = document.querySelector('#ProductPrice-product-template').textContent;
      si (code === "test1") {
        const newPrice = productPrice + zone.cost ;
        document.querySelector('#ProductPrice-product-template').innerHTML = newPrice;
      }
    }
  }
}</pré>
<pre class="brush:html;toolbar:false;"><form onsubmit="checkZones()" id="postcodeForm">
  <type d'entrée="texte">
  <button type="submit">Coûts de mise à jour</button>
</form><span id="ProductPrice-product-template">0,00</span>

Answer 1

Quelques questions ici

Certaines de ces questions :

1. Utilisez le gestionnaire d'événements de soumission et empêchez la soumission
2. Vous ne transmettez pas de zones aux fonctions qui en ont besoin
3. Vous devez vous assurer que les montants utilisés dans le calcul sont des nombres et non des chaînes (chaînes extraites de innerText et .value) - J'ai utilisé un signe plus dollar +将其转换为数字或0（如果未定义），并使用条件链接运算符?. pour gérer les codes postaux manquants
4. Vous pouvez utiliser Find pour obtenir la zone contenant un tableau de codes postaux

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>