WooCommerce结账页：根据配送日期动态添加额外费用（含日期选择器集成）-php教程-PHP中文网

WooCommerce结账页：根据配送日期动态添加额外费用（含日期选择器集成）

本教程详细指导如何在woocommerce结账页面集成xdsoft datetimepicker，并根据用户选择的配送日期动态收取额外费用。文章涵盖了自定义日期字段的添加、日期选择器的配置、基于日期差异计算和应用费用的php逻辑，以及如何将配送日期保存并显示在订单详情和邮件中，确保结账流程的灵活性和业务规则的准确执行。

在WooCommerce商店中，有时需要根据客户选择的配送日期来调整订单费用，例如为当日或次日配送收取额外加急费。本教程将引导您完成在WooCommerce结账页面实现这一功能的完整步骤，包括添加自定义日期选择器、动态计算费用以及将选择的日期保存到订单信息中。

一、添加自定义配送日期选择器

首先，我们需要在WooCommerce结账页面添加一个用于选择配送日期的字段，并对其进行基础验证。

<?php
/**
 * 在结账页“订单备注”下方添加自定义配送日期字段
 *
 * @param WC_Checkout $checkout WooCommerce 结账对象
 */
function custom_delivery_date_field( $checkout ) {
    woocommerce_form_field( 'delivery_date', array(
        'type'        => 'text',
        'class'       => array('form-row-wide'),
        'id'          => 'datepicker', // 用于JS选择器
        'required'    => true,
        'label'       => __('Select Delivery Date', 'your-text-domain'),
        'placeholder' => __('Click to select date', 'your-text-domain'),
    ));
}
add_action( 'woocommerce_after_order_notes', 'custom_delivery_date_field' );

/**
 * 验证配送日期字段是否已选择
 */
function validate_delivery_date_field() {
    if ( isset( $_POST['delivery_date'] ) && empty( $_POST['delivery_date'] ) ) {
        wc_add_notice( __( 'Please select the Delivery Date', 'your-text-domain' ), 'error' );
    }
}
add_action( 'woocommerce_checkout_process', 'validate_delivery_date_field' );
?>

登录后复制

代码说明：

custom_delivery_date_field 函数通过 woocommerce_form_field 创建一个类型为 text 的输入字段，其 id 设置为 datepicker，方便后续JavaScript进行初始化。
woocommerce_after_order_notes 钩子确保该字段显示在订单备注区域下方。
validate_delivery_date_field 函数在结账处理时检查 delivery_date 字段是否为空，若为空则添加一个错误通知。

二、集成并配置xdsoft DateTimePicker

为了提供友好的日期选择体验，我们将集成 xdsoft DateTimePicker。此步骤包括引入必要的JavaScript库和初始化日期选择器，并配置其在日期或时间选择后触发WooCommerce结账页面的更新。

<?php
/**
 * 引入xdsoft DateTimePicker库并初始化日期选择器
 */
function load_and_init_datetimepicker() {
    // 仅在结账页面加载
    if ( ! is_checkout() ) {
        return;
    }
    ?>
    <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.min.css" />
    <script type="text/javascript">
        jQuery(document).ready(function($) {
            jQuery.datetimepicker.setLocale('en'); // 设置语言环境

            // 获取当前时间，并向上取整到最近的30分钟，确保可选时间从当前时间之后开始
            var currentDate = new Date();
            var minutes = currentDate.getMinutes();
            var m = (Math.ceil(minutes / 30) * 30) % 60;
            currentDate.setMinutes(m);

            jQuery('#datepicker').datetimepicker({
                // beforeShowDay: $.datepicker.noWeekends, // 禁用周末，如果需要可以启用
                format: 'Y/m/d H:i:s', // 日期时间格式
                minDate: 0,            // 最小可选日期为今天
                minTime: '8:00',       // 最小可选时间
                step: 30,              // 时间步长为30分钟
                allowTimes: [          // 允许选择的时间段
                    '09:00', '09:30', '10:00', '10:30', '11:00', '11:30', '12:00', '12:30',
                    '13:00', '13:30', '14:00', '14:30', '15:00', '15:30', '16:00', '16:30', '17:00'
                ],
                onSelectDate: function(ct, $i) {
                    // 当选择日期时，触发WooCommerce结账页面的更新，以便重新计算费用
                    jQuery('body').trigger('update_checkout');
                },
                onSelectTime: function(ct, $i) {
                    // 当选择时间时，触发WooCommerce结账页面的更新
                    jQuery('body').trigger('update_checkout');
                }
            });
        });
    </script>
    <?php
}
add_action( 'woocommerce_after_checkout_form', 'load_and_init_datetimepicker', 20 );
?>

登录后复制

代码说明：

load_and_init_datetimepicker 函数通过 woocommerce_after_checkout_form 钩子在结账表单底部加载JavaScript和CSS库。
jQuery.datetimepicker.setLocale('en') 设置日期选择器的语言。
minDate: 0 确保用户不能选择过去的日期。
onSelectDate 和 onSelectTime 回调函数是关键，它们在用户选择日期或时间后，通过 jQuery('body').trigger('update_checkout') 触发WooCommerce结账页面的AJAX更新，从而实时重新计算订单费用。

三、实现基于配送日期的额外费用逻辑

这一部分是核心，我们将使用 woocommerce_cart_calculate_fees 钩子来检查用户选择的配送日期，并根据规则动态添加或移除额外费用。

冬瓜配音

AI在线配音生成器

查看详情

<?php
/**
 * 根据选择的配送日期动态添加额外费用
 */
function wc_add_delivery_surcharge() {
    // 确保只在非管理后台且非AJAX请求时执行
    if ( is_admin() && ! defined( 'DOING_AJAX' ) ) {
        return;
    }

    // 解析POST数据以获取delivery_date
    parse_str( $_POST['post_data'], $post_data );

    if ( isset( $post_data['delivery_date'] ) && ! empty( $post_data['delivery_date'] ) ) {
        $selected_date_str = explode(' ', $post_data['delivery_date'])[0]; // 只取日期部分
        $current_date_str  = date("Y/m/d");

        $selected_timestamp = strtotime( $selected_date_str );
        $current_timestamp  = strtotime( $current_date_str );

        // 计算日期差异（天数）
        $datediff = $selected_timestamp - $current_timestamp;
        $difference_in_days = floor( $datediff / ( 60 * 60 * 24 ) );

        $fee_amount = 5.00; // 定义加急费用金额

        if ( $difference_in_days == 0 || $difference_in_days == 1 ) {
            // 如果是今天或明天，添加加急费用
            WC()->cart->add_fee( __( 'Fast delivery charge', 'your-text-domain' ), $fee_amount, true, 'standard' );
        } else {
            // 如果不是今天或明天，确保移除可能存在的加急费用
            $fees = WC()->cart->get_fees();
            foreach ( $fees as $key => $fee ) {
                if ( $fee->name === __( 'Fast delivery charge', 'your-text-domain' ) ) {
                    unset( $fees[$key] );
                    // 重新设置购物车费用，以移除特定费用
                    WC()->cart->fees_api()->set_fees( $fees );
                    break; // 找到并移除后即可退出循环
                }
            }
        }
    } else {
        // 如果没有选择配送日期，也移除可能存在的加急费用
        $fees = WC()->cart->get_fees();
        foreach ( $fees as $key => $fee ) {
            if ( $fee->name === __( 'Fast delivery charge', 'your-text-domain' ) ) {
                unset( $fees[$key] );
                WC()->cart->fees_api()->set_fees( $fees );
                break;
            }
        }
    }
}
add_action( 'woocommerce_cart_calculate_fees','wc_add_delivery_surcharge' );
?>

登录后复制

代码说明：

wc_add_delivery_surcharge 函数挂载到 woocommerce_cart_calculate_fees 钩子，确保在购物车费用计算时执行。
通过 parse_str( $_POST['post_data'], $post_data ) 获取结账表单提交的数据，其中包含 delivery_date。
将选定日期和当前日期转换为时间戳，计算它们之间的天数差异。
如果差异为 0（今天）或 1（明天），则使用 WC()->cart->add_fee() 添加名为“Fast delivery charge”的额外费用。
关键的移除逻辑： 如果用户选择了非加急日期，或者没有选择日期，代码会遍历当前购物车中的所有费用，如果找到名为“Fast delivery charge”的费用，则将其移除。这确保了费用的动态性和准确性。

四、保存与显示配送日期信息

为了在订单管理和通知中查看配送日期，我们需要将其保存到订单元数据中，并在后台订单详情页和客户邮件中显示。

<?php
/**
 * 将配送日期保存到订单元数据
 *
 * @param int $order_id 订单ID
 */
function save_delivery_date_field_to_order_meta( $order_id ) {
    if ( isset( $_POST['delivery_date'] ) && ! empty( $_POST['delivery_date'] ) ) {
        update_post_meta( $order_id, '_delivery_date', sanitize_text_field( $_POST['delivery_date'] ) );
    }
}
add_action( 'woocommerce_checkout_update_order_meta', 'save_delivery_date_field_to_order_meta' );

/**
 * 在WooCommerce后台订单详情页显示配送日期
 *
 * @param WC_Order $order 订单对象
 */
function display_delivery_date_in_admin_order( $order ) {
    $delivery_date = $order->get_meta( '_delivery_date' );
    if ( $delivery_date ) {
        echo '<p><strong>' . __( 'Delivery Date', 'your-text-domain' ) . ':</strong> ' . esc_html( $delivery_date ) . '</p>';
    }
}
add_action( 'woocommerce_admin_order_data_after_billing_address', 'display_delivery_date_in_admin_order', 10, 1 );

/**
 * 在WooCommerce订单邮件中显示配送日期
 *
 * @param WC_Order $order         订单对象
 * @param bool     $sent_to_admin 是否发送给管理员
 * @param bool     $plain_text    是否为纯文本邮件
 * @param WC_Email $email         邮件对象
 */
function display_delivery_date_in_emails( $order, $sent_to_admin, $plain_text, $email ) {
    $delivery_date = $order->get_meta( '_delivery_date' );
    if ( $delivery_date ) {
        echo '<p><strong>' . __( 'Delivery Date', 'your-text-domain' ) . ':</strong> ' . esc_html( $delivery_date ) . '</p>';
    }
}
add_action( 'woocommerce_email_after_order_table', 'display_delivery_date_in_emails', 20, 4 );
?>

登录后复制

代码说明：

save_delivery_date_field_to_order_meta 函数使用 woocommerce_checkout_update_order_meta 钩子将 delivery_date 的值保存为订单的元数据（_delivery_date）。
display_delivery_date_in_admin_order 函数使用 woocommerce_admin_order_data_after_billing_address 钩子在WooCommerce后台订单编辑页面的账单地址下方显示配送日期。
display_delivery_date_in_emails 函数使用 woocommerce_email_after_order_table 钩子在所有WooCommerce订单邮件（包括客户和管理员邮件）的订单表格下方显示配送日期。

五、注意事项与总结

代码放置位置： 所有上述PHP代码应放置在您主题的 functions.php 文件中，或创建一个自定义插件来管理这些功能。推荐使用自定义插件，以确保主题更新不会覆盖您的定制代码。
文本域： 在代码中使用了 'your-text-domain' 作为文本域，请根据您的主题或插件实际使用的文本域进行替换，以便进行国际化。
费用金额与名称： wc_add_delivery_surcharge 函数中的 $fee_amount 和费用名称 'Fast delivery charge' 可以根据您的业务需求进行调整。
日期选择器配置： load_and_init_datetimepicker 函数中的 minDate、minTime、step 和 allowTimes 等选项可以根据您的配送策略进行灵活配置。例如，如果您不希望周末配送，可以启用 beforeShowDay: $.datepicker.noWeekends。
AJAX更新： onSelectDate 和 onSelectTime 中触发 jQuery('body').trigger('update_checkout') 是实现费用动态计算的关键。这会向服务器发送AJAX请求，重新计算购物车总额和费用，并更新结账页面显示。

通过以上步骤，您已经成功地在WooCommerce结账页面实现了一个功能完善的配送日期选择器，并能够根据用户的选择动态地添加或移除额外费用，同时将配送日期保存并显示在订单的各个环节中。这不仅提升了用户体验，也为您的业务提供了更大的灵活性。

以上就是WooCommerce结账页：根据配送日期动态添加额外费用（含日期选择器集成）的详细内容，更多请关注php中文网其它相关文章！