購物車頁面 Woocommerce 中的自定義“條款和條件”接受復選框

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 代碼使其工作，因為“繼續結賬”按鈕只是鏈接到結賬頁面而不提交任何數據。

該代碼將在啟動時禁用按鈕：

當未選中復選框時，它使用“甜蜜警報 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 文件中。 測試和工作。

甜蜜警報二文檔

Answer 2

非常感謝這段代碼！

它對我有用，除了通過 ajax 更新購物車時，例如刪除項目時。

在這種情況下，除非我刷新頁面，否則復選框不再啟用“繼續結帳”按鈕。 我終於找到了解決方案：

將以下代碼段添加到標題以在從購物車中刪除商品后重新加載購物車頁面。

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