修改计价加法代码后WordPress Contact Form 7优惠券字段失效求助

问题原因 #

• 人数赋值逻辑错误：adult和kid变量在change事件中都被赋值为当前触发事件的元素值，无论修改成人还是儿童人数，两个变量都会被设为同一个值，计算逻辑完全错误
• subtotal类型错误：用subtotal = $("#subtotal").val(xxx)给输入框赋值时，返回结果是jQuery对象而非数值，后续优惠券计算时用该对象乘折扣会得到NaN，自然无法正常计算
• 未处理优惠券不匹配场景：如果用户输错优惠券又删除，总价不会恢复为原价
• 未兼容先填优惠券再选人数的场景：如果用户先输入正确优惠券再选择人数，总价不会自动更新折扣
• WordPress环境下直接用$可能报错：WordPress默认开启jQuery的noConflict模式，直接调用$会提示未定义

修复后的完整代码 #

jQuery(document).ready(function ($) {
  // 传入$作为参数解决WordPress下$不识别问题
  var adult;
  var kid;
  var subtotal;
  var total;
  var couponValid = false; // 标记优惠券是否有效

  // 计算小计的公共方法，避免逻辑重复
  function calcSubtotal() {
    adult = Number($("#adult").val() || 0);
    kid = Number($("#kid").val() || 0);
    subtotal = adult * 35 + kid * 18.4;
    $("#subtotal").val(subtotal.toFixed(2));
    // 优惠券有效时自动更新折扣后总价
    if (couponValid) {
      calcTotal();
    }
  }

  // 计算总价的公共方法
  function calcTotal() {
    // 此处为1折，若需要减10%（9折）可改为 subtotal * 0.9
    total = subtotal * 0.1;
    $("#total").val(total.toFixed(2));
  }

  $("#adult, #kid").on("change", function () {
    calcSubtotal();
  });

  $('input[name="couponcode"]').on("input", function (e) {
    let couponcode = $(this).val().trim();
    if (couponcode === "CCPPF") {
      couponValid = true;
      // 兼容未选人数先填优惠券的场景
      if (typeof subtotal === 'undefined' || isNaN(subtotal)) {
        calcSubtotal();
      }
      calcTotal();
    } else {
      couponValid = false;
      // 优惠券无效时总价恢复为小计
      if (typeof subtotal !== 'undefined' && !isNaN(subtotal)) {
        $("#total").val(subtotal.toFixed(2));
      }
    }
  });
});

修改说明 #

• 修复了成人、儿童人数的赋值逻辑，分别从对应DOM元素取值，同时新增空值兼容
• 调整subtotal存储规则，直接保存数值类型，确保后续折扣计算正常
• 新增优惠券有效状态标记，支持先填优惠券再选人数时自动更新折扣价格
• 新增优惠券不匹配处理逻辑，输错或者删除优惠券时总价自动恢复为原价
• 优惠券事件只保留input事件即可，无需重复绑定keydown、keyup，避免重复触发
• 抽离公共计算方法，后续修改票价、折扣规则时只需调整对应方法即可，维护更方便

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