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' );
    }
}

但是此功能似乎无法正常运行，因为无论是否选中，客户都可以进入结帐页面。我想确保只有选中该复选框的客户才能继续进行结帐。相反，警告消息将显示在顶部。

instance classes

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

Answer 1

以下代码将在购物车页面上用于您的隐私权政策复选框使用强制性jQuery代码，以使其像“进行结帐”按钮一样工作，只是链接到结帐页面而无需提交任何数据。 / p>

该代码将禁用启动按钮：

当未选中此复选框时，它会使用“ 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：

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

<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中的自定义“条款和条件”接受复选框

2 个答案: