在购物车总金额超过500美元时强制使用相同账单/配送地址的实现教程

<!-- 购物车总金额部分 -->
<section class="cart-section optimizedCheckout-orderSummary-cartSection">
    <div data-test="cart-total">
        <div aria-live="polite" class="cart-priceItem optimizedCheckout-contentPrimary cart-priceItem--total">
            <span class="cart-priceItem-label"><span data-test="cart-price-label">Total (USD)  </span></span>
            <span class="cart-priceItem-value"><span data-test="cart-price-value">$1,915.77</span></span>
        </div>
    </div>
</section>

<!-- 账单地址与配送地址相同复选框部分 -->
<div class="form-field">
    <input id="sameAsBilling" type="checkbox" class="form-checkbox optimizedCheckout-form-checkbox" name="billingSameAsShipping" value="true" checked="">
    <label for="sameAsBilling" class="form-label optimizedCheckout-form-label">My billing address is the same as my shipping address.</label>
</div>

// 获取购物车总金额的元素
const priceElement = document.querySelector('[data-test="cart-price-value"]');

let cartTotalPrice = 0;
if (priceElement) {
    // 提取文本内容，移除货币符号和千位分隔符
    const priceString = priceElement.textContent.replaceAll(",", "").replaceAll("$", "");
    // 转换为数字
    cartTotalPrice = Number(priceString);
}

console.log("购物车总金额:", cartTotalPrice); // 调试输出

// 获取复选框元素
const sameAsBillingCheckbox = document.getElementById("sameAsBilling");

if (cartTotalPrice > 500 && sameAsBillingCheckbox) {
    // 强制勾选复选框
    sameAsBillingCheckbox.checked = true;
    // 禁用复选框，防止用户修改
    sameAsBillingCheckbox.setAttribute("disabled", "true");
    // 如果需要隐藏整个包含复选框的div，可以这样操作
    // sameAsBillingCheckbox.closest('.form-field').style.display = 'none';
}

document.addEventListener('DOMContentLoaded', () => {
    // 1. 获取购物车总金额的元素
    const priceElement = document.querySelector('[data-test="cart-price-value"]');
    let cartTotalPrice = 0;

    if (priceElement) {
        // 提取文本内容，移除货币符号和千位分隔符
        const priceString = priceElement.textContent.replaceAll(",", "").replaceAll("$", "");
        // 转换为数字
        cartTotalPrice = Number(priceString);
    }

    // 2. 获取“账单地址与配送地址相同”复选框元素
    const sameAsBillingCheckbox = document.getElementById("sameAsBilling");

    // 3. 根据金额条件操作复选框
    if (cartTotalPrice > 500 && sameAsBillingCheckbox) {
        // 强制勾选复选框
        sameAsBillingCheckbox.checked = true;
        // 禁用复选框，防止用户修改
        sameAsBillingCheckbox.setAttribute("disabled", "true");

        // 额外考虑：如果需要隐藏整个包含复选框的父级元素，可以使用以下代码
        // const checkboxContainer = sameAsBillingCheckbox.closest('.form-field');
        // if (checkboxContainer) {
        //     checkboxContainer.style.display = 'none';
        // }
    }
});