WooCommerce 购物车中根据日期选择器显示自定义费用：解决星期日交货取货问题

php

2024-03-10 10:53:10

在 WooCommerce 购物车中动态显示基于日期选择器的自定义费用

简介

对于电子商务网站而言，根据客户选择的日期计算费用至关重要。本文将指导你如何在 WooCommerce 购物车中根据用户在日期选择器中选择的日期动态显示自定义费用。这个费用只有在用户选择星期日作为交货或取货日期时才会收取。

先决条件

确保 WordPress 和 WooCommerce 已正确安装。
你的网站应该有一个活动的产品租赁页面。
你已在 3 个 WooCommerce 表单字段中使用了 jQuery 日期选择器：活动日期、交货日期和取货日期。

步骤

1. 添加日期选择器脚本

在你的子主题的 functions.php 文件中添加以下代码，将 jQuery UI 日期选择器添加到你的网站：

// 引用 jQuery 脚本
function enqueue_datepicker_scripts() {
    wp_enqueue_script('jquery-ui-datepicker');
}
add_action('wp_enqueue_scripts', 'enqueue_datepicker_scripts');

2. 添加日期选择器选项

接下来，添加日期选择器选项：

// 添加日期选择器选项
function enqueue_datepicker_script() {
    ?>
    <script>
    jQuery(function ($) {
        var datepickerOptions = {
            dateFormat: 'mm/dd/yy',
            minDate: '+3d',
            firstDay: 0,
            onSelect: function (dateText, inst) {
                setTimeout(function () {
                    $('body').trigger('update_checkout');
                }, 1);
            }
        };

        $('#event_date').datepicker($.extend({}, datepickerOptions));
        $('#delivery_date').datepicker($.extend({}, datepickerOptions));
        $('#pickup_date').datepicker($.extend({}, datepickerOptions));
    });
    </script>
    <?php
}
add_action('wp_footer', 'enqueue_datepicker_script');

3. 将日期选择器添加到结账字段

将以下代码添加到 functions.php 文件中，将日期选择器添加到结账字段：

// 添加日期选择器到结账字段
function custom_add_date_picker_fields($checkout) {
    echo '<div id="custom_date_picker"><h2>' . __('交货和取货详情') . '</h2>';

    woocommerce_form_field('event_date', array(
        'type' => 'text',
        'class' => array('form-row-wide datepicker'),
        'label' => __('活动日期'),
        'required' => true,
        'default' => date('m/d/Y', strtotime('+3 days')),
        'custom_attributes' => array(
            'min' => date('m/d/Y', strtotime('+3 days')),
            'max' => date('m/d/Y', strtotime('+2 years')),
        ),
    ), $checkout->get_value('event_date'));

    woocommerce_form_field('delivery_date', array(
        'type' => 'text',
        'class' => array('form-row-wide datepicker'),
        'label' => __('交货日期'),
        'required' => true,
        'default' => date('m/d/Y', strtotime('+2 days')),
    ), $checkout->get_value('delivery_date'));

    woocommerce_form_field('pickup_date', array(
        'type' => 'text',
        'class' => array('form-row-wide datepicker'),
        'label' => __('取货日期'),
        'required' => true,
        'default' => date('m/d/Y', strtotime('+4 days')),
    ), $checkout->get_value('pickup_date'));

    echo '</div>';
}
add_action('woocommerce_before_order_notes', 'custom_add_date_picker_fields');

4. 添加星期日交货费用

现在，添加在星期日交货时收取的费用：

// 添加星期日交货费用
function custom_add_sunday_delivery_fee() {
    if (isset($_POST['delivery_date'])) {
        $delivery_date = sanitize_text_field($_POST['delivery_date']);
        $delivery_day = date('w', strtotime($delivery_date));

        if ($delivery_day == 0) {
            WC()->cart->add_fee(__('星期日交货', 'woocommerce'), 440, true, 'standard');
        }
    }
}
add_action('woocommerce_cart_calculate_fees', 'custom_add_sunday_delivery_fee', 10);

5. 添加星期日取货费用

最后，添加在星期日取货时收取的费用：

// 添加星期日取货费用
function custom_add_sunday_pickup_fee() {
    if (isset($_POST['pickup_date'])) {
        $pickup_date = sanitize_text_field($_POST['pickup_date']);
        $pickup_day = date('w', strtotime($pickup_date));

        if ($pickup_day == 0) {
            WC()->cart->add_fee(__('星期日取货', 'woocommerce'), 440, true, 'standard');
        }
    }
}
add_action('woocommerce_cart_calculate_fees', 'custom_add_sunday_pickup_fee', 10);