基于JS、JSON与HTML表单实现Shopify价格更新的问题求助

问题背景 #

需实现功能：用户输入邮编后提交表单，通过JavaScript判断邮编的前4个字符是否匹配JSON数据中的邮编，匹配则更新页面商品价格。当前提交表单时页面刷新且无任何效果，初始代码如下：

初始代码 #

JavaScript

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

HTML

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

问题分析 #

1. 表单默认提交行为未阻止：点击提交按钮会触发页面刷新，导致JS逻辑执行后页面重置，看不到效果。
2. 函数参数传递错误：checkZones调用updatePrice时未传入zones数据，导致updatePrice中zone为undefined。
3. 选择器语法错误：document.querySelector('#postcodeForm input[type="text]")缺少闭合引号，应为input[type="text"]。
4. 字符串匹配方法错误：contains不是JavaScript字符串的方法，应使用includes；且未处理“取邮编前4位”的需求。
5. 价格计算逻辑错误：页面价格是字符串，直接和数字相加会变成字符串拼接，需要先转为数字；且仅针对test1处理，未覆盖所有匹配情况。

修正后的完整实现 #

1. HTML代码（修改表单提交逻辑） #

<form id="postcodeForm">
  <input type="text" placeholder="输入邮编">
  <button type="submit">更新运费</button>
</form>
<span id="ProductPrice-product-template">0.00</span>

• 移除onsubmit属性，改为通过JS绑定事件，更易控制默认行为。

2. JavaScript代码（修复逻辑+实现需求） #

// 绑定表单提交事件
document.getElementById('postcodeForm').addEventListener('submit', async function(e) {
  // 阻止页面刷新
  e.preventDefault();
  
  // 1. 获取输入的邮编并截取前4位（转为小写统一格式，避免大小写问题）
  const inputPostcode = document.querySelector('#postcodeForm input[type="text"]').value.trim().toLowerCase();
  const postcodePrefix = inputPostcode.slice(0, 4);
  
  // 2. 获取邮编区域数据（Shopify环境下建议从asset加载）
  let zones;
  try {
    // 正式环境替换为从asset加载JSON
    const requestURL = "{{ 'zones.json' | asset_url }}";
    const response = await fetch(requestURL);
    zones = await response.json();
  } catch (err) {
    // 本地测试用模拟数据
    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", "test20"],
        "cost": 16.8
      }
    ];
  }
  
  // 3. 匹配邮编区域并更新价格
  updatePrice(zones, postcodePrefix);
});

function updatePrice(zones, postcodePrefix) {
  const priceElement = document.getElementById('ProductPrice-product-template');
  // 解析当前商品价格为数字（兼容带货币符号的情况）
  const priceText = priceElement.textContent.trim().replace(/[^0-9.]/g, '');
  const basePrice = parseFloat(priceText);
  
  // 遍历区域找匹配的邮编前缀
  const matchedZone = zones.find(zone => zone.postcodes.some(code => code.toLowerCase().includes(postcodePrefix)));
  
  if (matchedZone) {
    // 计算新价格并保留两位小数
    const newPrice = (basePrice + matchedZone.cost).toFixed(2);
    priceElement.textContent = newPrice;
  } else {
    // 无匹配时重置价格并提示用户
    priceElement.textContent = basePrice.toFixed(2);
    alert("该邮编区域暂无对应运费数据");
  }
}

3. Shopify环境配置注意事项 #

• 创建zones.json资产：在Shopify后台的「内容>文件」中上传你的邮编区域JSON文件，确保路径正确。
• 主题模板嵌入：将上述HTML和JS代码嵌入到产品页面模板（如product-template.liquid）中，JS代码建议放在</body>前，或包裹在DOMContentLoaded事件中确保元素加载完成。

内容的提问来源于stack exchange，提问作者CarbonCoder