购物车页面 Woocommerce 中的自定义“条款和条件”接受复选框

Question

适用于小型家庭项目，并希望将“继续结帐”按钮下方的复选标记选项添加到我的 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 代码 使其工作，因为“继续结帐”按钮只是链接到结帐页面而不提交任何数据。

代码将禁用启动按钮：

它使用“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：

将以下sn-p添加到标题中以在从购物车中删除商品后重新加载购物车页面。

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