自定义房间租赁产品跳转WooCommerce结账页的实现问题

我通过自定义插件rent_room创建了房间租赁产品数据类型，同时在WooCommerce主题目录下复制content-single-product.php生成专属产品页面。该页面通过booked-dates.php实现日期选择器功能：

• 锁定不可用日期，仅允许选择可用日期
• 选中日期时，页面的「Total Cost」会根据所选天数计算总价（如每晚15美元，选3天则总价45美元），选中日期存储于selected_dates数组

点击「Book Now」按钮时，预期实现：

• 跳转至WooCommerce结账页
• 购物车仅保留当前房间租赁项
• 传递selected_dates和total_cost变量，将total_cost设为订单应付金额

我尝试了以下代码但未达成需求，请求技术支持：

脚本入队代码（主题functions.php） #

function enqueue_custom_datepicker() {
    if (is_product()) {
        global $post;
        $product_id = $post->ID;
        $product = wc_get_product($product_id);

        if ($product) {
            $cost_per_night = get_post_meta($product->get_id(), '_wcrr_cost_per_night', true);

            // Debug output
            error_log('Enqueuing custom datepicker script.');

            wp_enqueue_script(
                'custom-datepicker',
                get_template_directory_uri() . '/custom-datepicker.js?v=' . time(),
                array('jquery', 'jquery-ui-datepicker'),
                null,
                true
            );

            wp_localize_script(
                'custom-datepicker',
                'roomRentalData',
                array(
                    'costPerNight' => $cost_per_night
                )
            );

                // Localize script with product and checkout data
            wp_localize_script('custom-datepicker', 'customCheckout', array(
                'ajax_url' => admin_url('admin-ajax.php'),
                'product_id' => $product->get_id(),
                'checkout_url' => wc_get_checkout_url(),
            ));
        } else {
            error_log('Product object is not valid.');
        }
    } else {
        error_log('Not on a product page.');
    }
}
add_action('wp_enqueue_scripts', 'enqueue_custom_datepicker');

日期选择器与AJAX处理代码（custom-datepicker.js） #

jQuery(document).ready(function($) {
    // Initialize the booking dates.
    var selected_dates = []; 
    var totalCost = 0; 

    // Initialize the datepicker
    $('.room-calendar').datepicker({
        dateFormat: 'yy-mm-dd',
        beforeShowDay: function(date) {
            var dateString = $.datepicker.formatDate('yy-mm-dd', date);
            // Check if the date is unavailable
            if (unavailableDates.indexOf(dateString) !== -1) {
                return [false, 'unavailable-date', 'Unavailable'];
            } else {
                // Check if the date is selected
                if (selected_dates.indexOf(dateString) !== -1) {
                    return [true, 'selected-date', 'Selected'];
                } else {
                    return [true, '', 'Available'];
                }
            }
        },
        onSelect: function(dateText) {
            var formattedDate = $.datepicker.formatDate('yy-mm-dd', $.datepicker.parseDate('yy-mm-dd', dateText));
            var index = selected_dates.indexOf(formattedDate);

            // Toggle the date in the array
            if (index === -1) {
                selected_dates.push(formattedDate);
            } else {
                selected_dates.splice(index, 1);
            }

            // Refresh the datepicker to update the UI
            $(this).datepicker('refresh');

            // Debugging: Log the selected dates
            console.log('Selected dates:', selected_dates);

            updateTotalCost();
        }
    });

    // Function to update total cost based on selected dates
    function updateTotalCost() {
        totalCost = selected_dates.length * roomRentalData.costPerNight;
        $('.total-cost').text('Total Cost: $' + totalCost);
        console.log('Total Cost:', totalCost); 
    }

    // Add CSS for the selected dates
    $('<style>')
        .prop('type', 'text/css')
        .html(`
            .ui-datepicker-calendar td.selected-date {
                border: 2px solid green; /* Green border for selected dates */
            }
        `)
        .appendTo('head');


    // Handle the "Proceed to Checkout" button click
    $('#custom-checkout-button').on('click', function() {
        $.ajax({
            url: customCheckout.ajax_url,
            type: 'POST',
            data: {
                action: 'wcrr_process_booking',
                product_id: customCheckout.product_id,
                selected_dates: selected_dates,
                total_cost: totalCost
            },
            success: function(response) {
                if (response.success) {
                    // Redirect to the WooCommerce checkout page
                    window.location.href = customCheckout.checkout_url;
                } else {
                    console.error('Failed to add to cart');
                }
            }
        });
    });
});

会话处理与结账页展示代码（主题functions.php） #

function wcrr_process_booking() {
    $product_id = isset($_POST['product_id']) ? intval($_POST['product_id']) : 0;
    $selected_dates = isset($_POST['selected_dates']) ? array_map('sanitize_text_field', $_POST['selected_dates']) : [];
    $total_cost = isset($_POST['total_cost']) ? floatval($_POST['total_cost']) : 0;

    if ($product_id && $selected_dates && $total_cost) {
        // Store the custom data in the WooCommerce session
        WC()->session->set('selected_dates', $selected_dates);
        WC()->session->set('total_cost', $total_cost);

        wp_send_json_success();
    } else {
        wp_send_json_error('Invalid data');
    }
}
add_action('wp_ajax_wcrr_process_booking', 'wcrr_process_booking');
add_action('wp_ajax_nopriv_wcrr_process_booking', 'wcrr_process_booking');

function wcrr_display_checkout_custom_data() {
    $selected_dates = WC()->session->get('selected_dates');
    $total_cost = WC()->session->get('total_cost');

    if ($selected_dates && $total_cost) {
        echo '<h3>Your Booking Details</h3>';
        echo '<p><strong>Selected Dates:</strong> ' . implode(', ', $selected_dates) . '</p>';
        echo '<p><strong>Total Cost:</strong> ' . wc_price($total_cost) . '</p>';

        // Update the order total with the custom total cost
        WC()->cart->set_total($total_cost);
    }
}
add_action('woocommerce_review_order_before_payment', 'wcrr_display_checkout_custom_data');

内容的提问来源于stack exchange，提问作者908EH