使用JS和JSON以及簡單的HTML表單來更新價格
P粉294954447
P粉294954447 2023-08-18 12:38:26
0
1
394

我正在嘗試創建一個設置,在這個設置中,您可以輸入郵政編碼,提交表單,然後使用JavaScript檢查郵政編碼的前4個字符是否與某些JSON數據中的郵政編碼匹配,如果匹配,則更改頁面上的價格。這將用於Shopify網站,因此如果有關如何在其中實施它的任何幫助,將會很好。

目前,當我提交表單時,頁面會刷新,但沒有任何反應。

以下是我目前所擁有的,還處於早期階段:


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; } } } }
0.00


P粉294954447
P粉294954447

全部回覆 (1)
P粉388945432

這裡有一些問題

其中一些問題:

  1. 使用submit事件處理程序並阻止提交
  2. 您沒有將區域傳遞給需要它們的函數
  3. 您需要確保在計算中使用的金額是數字而不是字串(從innerText和.value獲取的字串)-我使用一元加號將其轉換為數字或0(如果未定義),並使用條件連結運算子?.來處理缺少的郵遞區號
  4. 您可以使用find來取得包含郵遞區號的陣列的區域

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() })
0.00
    最新下載
    更多>
    網站特效
    網站源碼
    網站素材
    前端模板
    關於我們 免責聲明 Sitemap
    PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!