php 在WooCommerce Checkout中添加COD付款的确认对话框

ndh0cuux 于 2023-06-28 发布在 PHP

关注(0)|答案(1)|浏览(50)

我使用以下代码在结帐页面上确认货到付款并继续订单，但即使订单得到确认，即使游客没有点击“确认”按钮.

// Popup Confirmation
function add_cod_confirmation_popup() {
    if ( ! is_checkout() ) {
        return;
    }

    $selected_payment_method_id = WC()->session->get('chosen_payment_method');
    // print_r( $selected_payment_method_id );
    if ("cod" === $selected_payment_method_id){
          // Replace 'cod' with the appropriate payment method ID for Cash on Delivery
        add_action( 'wp_footer', 'cod_confirmation_popup_script' );
        add_action( 'wp_footer', 'cod_confirmation_popup_style' );
    }

}
add_action( 'wp', 'add_cod_confirmation_popup' );
function cod_confirmation_popup_script() {
  ?>
  <script>
    // Get the billing phone field
    var billingPhone = document.getElementById("billing_phone");
    // Validate
    jQuery(document).ready(function($) {
      $('form.checkout').on('submit', function(e) {
          var $form = $(this);
          var confirmInput = '<input type="hidden" name="confirm_cod" value="1">';

          if ($('.confirmation-modal').length === 0) {
              e.preventDefault();

              var confirmationModal = '<div class="confirmation-modal">' +
                  '<div class="modal-content">' +
                  '<p>Are you sure you want to place the order with Cash on Delivery?</p>' +
                  '<button class="confirm-button">Confirm</button>' +
                  '<button class="cancel-button">Cancel</button>' +
                  '</div>' +
                  '</div>';

              $('body').append(confirmationModal);

              $('.confirm-button').on('click', function() {
                  $('.confirmation-modal').remove();
                  $form.append(confirmInput);
                  $form.submit();
              });

              $('.cancel-button').on('click', function() {
                  location.reload(true);
              });
          }
      });
  });      
  </script>
  <?php
}

function cod_confirmation_popup_style() {
  ?>
  <style>
      .confirmation-modal {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: rgba(0, 0, 0, 0.5);
          z-index: 9999;
      }

      .modal-content {
          background-color: #fff;
          padding: 20px;
          border-radius: 4px;
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
      }
  </style>
  <?php
}

我已经尝试在取消时添加一个重新加载按钮，但仍然需要时间。
我希望在屏幕上保留弹出窗口，直到确认。

php

来源：https://stackoverflow.com/questions/76537807/add-a-confirmation-dialog-box-for-cod-payment-in-woocommerce-checkout

1条答案

按热度按时间

3qpi33ja1#

我已经重新访问了你的jQuery代码，删除了不必要的第一个PHP函数，并更改了最后一个函数的钩子。
现在，当访问结账时，如果默认选择了鳕鱼付款方式，或者当客户选择了鳕鱼付款时，确认对话框会出现，隐藏的输入字段会添加到结账表单：

如果勾选“确认”按钮，则隐藏输入字段中的值设置为“1”，确认对话框消失。
如果勾选“取消”按钮，则隐藏输入字段中的值设置为“o”，确认对话框消失。

如果在客户选择另一种支付方式之后，隐藏的输入字段被移除。
下面是代码：

add_action( 'wp_footer', 'cod_confirmation_popup_script' );
function cod_confirmation_popup_script() {
    if( is_checkout() && ! is_wc_endpoint_url() ) :
    ?>
    <script>
    jQuery(function($) {
        var billingPhone    = $("#billing_phone").val(), // ??? Not used (can be removed)
            paymentSel      = 'input[name="payment_method"]',
            confirmInput    = '<input type="hidden" name="confirm_cod" value="1">',
            inputConfirmSel = 'input[name="confirm_cod"]';

        function loadCodModal() {
            if ($('.confirmation-modal').length === 0 ) {
                var chosenPayment   = $(paymentSel+':checked').val(),
                    confirmationModal   = '<div class="confirmation-modal">' +
                    '<div class="modal-content">' +
                    '<p>Are you sure you want to place the order with Cash on Delivery?</p>' +
                    '<button class="confirm-button">Confirm</button>' +
                    '<button class="cancel-button">Cancel</button>' +
                    '</div>' +
                    '</div>';

                if ( chosenPayment === 'cod' ) {
                    $('body').append(confirmationModal);
                    $('form.checkout').append(confirmInput);

                    $('.confirm-button').on('click', function() {
                        $('.confirmation-modal').remove();
                        $(inputConfirmSel).val('1');
                    });

                    $('.cancel-button').on('click', function() {
                        $('.confirmation-modal').remove();
                        $(inputConfirmSel).val('0');
                    });
                }  else {

                }
            }
        };
        // On load (on start)
        loadCodModal();

        // On payment method change
        $('form.checkout').on('change', paymentSel, function() {
            chosenPayment = $(this).val();
            
            if( chosenPayment === 'cod' ) {
                loadCodModal();
            } else if ($(inputConfirmSel).length !== 0 ) {
                $(inputConfirmSel).remove();
            }
            // Update checkout on payment method change
            $(document.body).trigger('update_checkout');
        });
    });      
    </script>
    <?php
    endif;
}

add_action( 'wp_head', 'cod_confirmation_popup_style' );
function cod_confirmation_popup_style() {
    if( is_checkout() && ! is_wc_endpoint_url() ) :
    ?>
    <style>
      .confirmation-modal {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: rgba(0, 0, 0, 0.5);
          z-index: 9999;
      }

      .modal-content {
          background-color: #fff;
          padding: 20px;
          border-radius: 4px;
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
      }
    </style>
    <?php
    endif;
}

代码放在活动子主题（或活动主题）的functions.php文件中。测试和工作。