Woocommerce 购物车页面中的自定义 "Terms and Conditions" 接受复选框

Question

在小型家庭项目上工作，想在 "Proceed to Checkout" 按钮下方添加复选标记选项到我的 Woocommerce 网站的购物车页面。我找到了这个功能，就是添加那个选项：

    add_action( 'woocommerce_after_cart', 'bbloomer_add_checkout_privacy_policy', 9 );

function bbloomer_add_checkout_privacy_policy() {

woocommerce_form_field( 'privacy_policy', array(
    'type'          => 'checkbox',
    'class'         => array('form-row privacy'),
    'label_class'   => array('woocommerce-form__label woocommerce-form__label-for-checkbox checkbox'),
    'input_class'   => array('woocommerce-form__input woocommerce-form__input-checkbox input-checkbox'),
    'required'      => true,
    'label'         => 'By proceeding, you are agreeing to our <a href="/termsandconditions">Terms and Conditions</a>',
)); 

}

// Show notice if customer does not tick

add_action( 'woocommerce_proceed_to_checkout', 'bbloomer_not_approved_privacy' );

function bbloomer_not_approved_privacy() {
    if ( ! (int) isset( $_POST['privacy_policy'] ) ) {
        wc_add_notice( __( 'Please acknowledge the Terms and Conditions' ), 'error' );
    }
}

但是这个功能好像有点不对劲，因为无论是否勾选，客户都可以进入结帐页面。我想确保只有勾选复选框的客户才能继续结帐。相反，警告消息将显示在顶部。

有人可以告诉我此功能的问题在哪里或指出一些可行的解决方案吗？提前致谢。这是我之前发布的此功能的当前外观图像。

Answer 1

以下代码将在您的隐私政策复选框的购物车页面中工作 使用强制性 jQuery 代码 使其工作，因为 "proceed to checkout" 按钮刚刚链接在不提交任何数据的情况下进入结帐页面。

代码将在启动时禁用按钮：

它使用"Sweet alert 2" JS消息在未选中复选框时单击按钮显示错误消息:

完整代码：

add_action( 'woocommerce_proceed_to_checkout', 'cart_privacy_policy_checkbox', 5 );
function cart_privacy_policy_checkbox() {

    woocommerce_form_field( 'privacy_policy', array(
        'type'          => 'checkbox',
        'class'         => array('form-row privacy'),
        'label_class'   => array('woocommerce-form__label woocommerce-form__label-for-checkbox checkbox'),
        'input_class'   => array('woocommerce-form__input woocommerce-form__input-checkbox input-checkbox'),
        'required'      => true,
        'label'         => sprintf( __( "I've read and accept the %s", "woocommerce" ),
                           '<a href="privacy-policy">'.__( "Privacy Policy", "woocommerce" ).'</a>' ),
    ));

    // jQuery code start below
    ?>
    <script src="https://unpkg.com/sweetalert2@8.8.1/dist/sweetalert2.all.min.js"></script>
    <script src="https://unpkg.com/promise-polyfill@8.1.0/dist/polyfill.min.js"></script>
    <script type="text/javascript">
    jQuery( function($){
        var a = '.checkout-button',     b = '#privacy_policy',
        c = '<?php echo wc_get_checkout_url(); ?>',     d = 'disabled';

        // Set disable button state
        $(a).addClass(d).prop('href', '#');

        // Woocommerce Ajax cart events
        $('body').on('updated_cart_totals removed_from_cart', function(){
            if( ! ( $(a).hasClass(d) && $(b).prop('checked') ) ){
                $(a).addClass(d).prop('href', '#');
            }
        })

        // On button click event
        $('body').on('click', a, function(e){
            if( ! $(b).prop('checked') ) {
                // Disable "Proceed to checkout" button
                e.preventDefault();
                // disabling button state
                if( ! $(a).hasClass(d) ){
                    $(a).addClass(d).prop('href', '#');
                }
                // Sweet alert 2
                swal({
                    title:  '<?php _e("Pricacy Policy", "woocommerce"); ?>',
                    text:   '<?php _e("Please acknowledge the privacy policy Terms and Conditions", "woocommerce"); ?>',
                    type:   'error',
                    timer:  3500,
                    showConfirmButton: false
                });
            }
        });

        // On checkbox change event
        $(b).change(function(){
            if($(this).prop('checked')){
                if( $(a).hasClass(d) ){
                    $(a).removeClass(d).prop('href', c);
                }
            } else {
                if( ! $(a).hasClass(d) ){
                    $(a).addClass(d).prop('href', '#');
                }
            }
        });
    });
    </script>
    <?php
}

代码进入您的活动子主题（或活动主题）的 function.php 文件。已测试并有效。

Sweet Alert Two documentation

Answer 2

非常感谢这个代码！

它对我有用，除了通过 ajax 更新购物车时，例如删除项目时。

在那种情况下，除非我刷新页面，否则复选框不再启用继续结帐按钮。我终于找到了 solution:

将以下代码段添加到 header 以在从购物车中删除商品后重新加载购物车页面。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
    jQuery( document.body ).on( 'updated_cart_totals', function () {
    location.reload( true );
} );
</script>

Woocommerce 购物车页面中的自定义 "Terms and Conditions" 接受复选框

Custom "Terms and Conditions" acceptance checkbox in Cart page Woocommerce

php

wordpress

jquery

cart

woocommerce