Woocommerce条件触发加购弹窗：替换alert为自定义HTML内容咨询

问题核心原因 #

你现有代码运行无响应主要有两个核心问题：

1. WordPress核心默认没有内置Bootstrap的CSS和JS文件，你调用$('#myModal').modal('show')时，浏览器识别不到modal()方法，直接抛出JS错误，阻断了Woocommerce加购后的后续执行逻辑，就会出现一直加载、无弹窗的情况。
2. 你自定义弹窗里的<?php $message ?>没有加echo输出语句，不会渲染你想要的自定义内容，且如果$message变量未提前定义的话还会抛出PHP警告。

解决方案1：保留Bootstrap Modal的修复版 #

如果你的主题已经引入了Bootstrap资源，可以直接用这个修复版本，注意不要重复引入Bootstrap避免和主题冲突：

add_action('wp_footer','custom_jquery_add_to_cart_script');
function custom_jquery_add_to_cart_script(){
    // 仅商品详情页加载
    if ( is_product() ):
        // 这里定义你要输出的自定义弹窗内容，支持HTML
        $message = "您已选择定金支付方式，后续尾款支付将在商品到货后通知您";
?>
<!-- 如果你的主题没有加载Bootstrap，放开下面两行注释即可，已经加载的话不用加 -->
<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css"> -->
<!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/js/bootstrap.min.js"></script> -->
<script type="text/javascript">
    (function($){
        // 绑定Woocommerce加购成功事件
        $(document.body).on("added_to_cart", function (event, fragments, cart_hash, $button) {
            var myRadio = $("input[name=payment_type]");
            var checkedValue = myRadio.filter(":checked").val();
            if(checkedValue == "deposit"){
                $('#myModal').modal('show');
            }
        });
    })(jQuery);
</script>
<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">定金支付提示</h4>
            </div>
            <div class="modal-body">
                <div class="fetched-data"><?php echo wp_kses_post($message); ?></div> 
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">我知道了</button>
            </div>
        </div>
    </div>
</div>
<?php
    endif;
}

解决方案2：无第三方依赖的自定义弹窗（更推荐，不会和主题冲突） #

不需要依赖Bootstrap，自带样式和交互逻辑，适配所有WordPress主题：

add_action('wp_footer','custom_jquery_add_to_cart_script');
function custom_jquery_add_to_cart_script(){
    if ( is_product() ):
        // 自定义弹窗内容，支持HTML标签
        $custom_content = "您选择了定金支付，订单仅支付定金即可锁定库存，尾款将在发货前通知您支付";
?>
<style>
/* 自定义弹窗样式 */
.custom-addcart-modal {
    display: none;
    position: fixed;
    z-index: 99999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4);
}
.custom-modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 500px;
    border-radius: 8px;
}
.custom-close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}
.custom-close:hover,
.custom-close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}
</style>
<script type="text/javascript">
    (function($){
        $(document.body).on("added_to_cart", function (event, fragments, cart_hash, $button) {
            var myRadio = $("input[name=payment_type]");
            var checkedValue = myRadio.filter(":checked").val();
            if(checkedValue == "deposit"){
                $('#customAddcartModal').show();
            }
        });
        // 关闭弹窗逻辑
        $(document).on('click', '.custom-close, .custom-modal-close-btn', function(){
            $('#customAddcartModal').hide();
        });
        // 点击弹窗外部也关闭
        $(window).on('click', function(event){
            if (event.target == document.getElementById('customAddcartModal')) {
                $('#customAddcartModal').hide();
            }
        });
    })(jQuery);
</script>
<!-- 自定义弹窗结构 -->
<div id="customAddcartModal" class="custom-addcart-modal">
    <div class="custom-modal-content">
        <span class="custom-close">&times;</span>
        <h3>支付提示</h3>
        <div class="custom-modal-body">
            <?php echo wp_kses_post($custom_content); ?>
        </div>
        <div style="text-align: right; margin-top: 20px;">
            <button class="custom-modal-close-btn" style="padding: 8px 15px; background: #f0f0f0; border: none; border-radius: 4px; cursor: pointer;">关闭</button>
        </div>
    </div>
</div>
<?php
    endif;
}

以上代码直接放到你当前使用主题的functions.php文件末尾即可，若担心修改主题文件出错，可以用WordPress的代码片段类插件插入代码。

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