WooCommerce结账页动态加费与日期选择器集成

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

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

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

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

 '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结账页面的更新。

代码说明：

• 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 钩子来检查用户选择的配送日期，并根据规则动态添加或移除额外费用。

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”的费用，则将其移除。这确保了费用的动态性和准确性。

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

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

get_meta( '_delivery_date' );
    if ( $delivery_date ) {
        echo '
' . __( 'Delivery Date', 'your-text-domain' ) . ': ' . esc_html( $delivery_date ) . '
';
    }
}
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 '
' . __( 'Delivery Date', 'your-text-domain' ) . ': ' . esc_html( $delivery_date ) . '
';
    }
}
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结账页面实现了一个功能完善的配送日期选择器，并能够根据用户的选择动态地添加或移除额外费用，同时将配送日期保存并显示在订单的各个环节中。这不仅提升了用户体验，也为您的业务提供了更大的灵活性。