尝试在WooCommerce Analytics-&>订单报告表中添加订单项目名称列(并输出到CSV文件)

我正在尝试向WooCommerce Analytics-&>Orders提供的表中添加一列，该订单的项目名称(而不是产品名称)显示在其上。

我添加了一个钩子，并尝试提取订单中项目的所有名称(这个钩子是我以前使用过的，它在WooCommerce-&>Orders表中很有用)

/**
 * Adds 'Item Name' column header to 'Orders' page immediately after 'Customer Type' column.
 *
 * @param string[] $columns
 * @return string[] $new_columns
 */
function sv_wc_reps_add_order_item_name_column_header( $columns ) {

    $new_columns = array();

    foreach ( $columns as $column_name => $column_info ) {

        $new_columns[ $column_name ] = $column_info;

        if ( 'customer_type' === $column_name ) {
            $new_columns['order_item_name'] = __( 'Item Name', 'my-textdomain' );
        }
    }

    return $new_columns;
}
add_filter( 'woocommerce_report_orders_export_columns', 'sv_wc_reps_add_order_item_name_column_header', 20 );


/**
 * Adds 'Item Name' value into each column
 */
add_action( 'woocommerce_report_orders_prepare_export_item' , 'custom_orders_list_column_content', 20, 2 );
function custom_orders_list_column_content( $column, $post_id ) {
    global $the_order, $post;

    if ( 'order_item_name' === $column ) {
        $products_names = []; // Initializing

        // Loop through order items
        foreach ( $the_order->get_items() as $item ) {
            $product = $item->get_product(); // Get the WC_Product object
            $products_names[]  = $item->get_name(); // Store in an array
        }
        // Display
        echo '<ul style="list-style: none;"><li>' . implode('</li><li>', $products_names) . '</li></ul>';
    }
}

但在我保存代码并刷新页面后，Order Report表没有添加新列，当我单击下载Report时，CSV文件没有显示新列。我认为我的代码缺少一些重要部分。

---

解决方案

我今天不得不做类似的事情，这是我使用的documentation和example，这是我是如何做到的。

首先，克隆并启动WooCommerce-admin：

cd wp-content/plugins 
git clone git@github.com:woocommerce/woocommerce-admin.git
cd woocommerce-admin
npm run build

运行此命令以设置您的分机：

npm run create-wc-extension

完成后，运行以下命令：

cd ../<your-plugin-name>
npm install
npm start

如果您设法做到了这一点，请转到管理面板并激活您的插件。您的文件结构应如下所示：

在插件的主php文件中，默认情况下您会有一个包含js文件的函数，之后添加过滤器如下：

/**
 * Show the phone number of the customer in the order analytics table
 * @param $results
 * @param $args
 * @return mixed
 */
add_filter('woocommerce_analytics_orders_select_query', function ($results, $args) {

    if ($results && isset($results->data) && !empty($results->data)) {
        foreach ($results->data as $key => $result) {
            $order = wc_get_order($result['order_id']);
            
            //get the order item data here
            // ...........................
            
            //here is how i did it for the customers phone number
            $results->data[$key]['customer_phone'] = $order->get_billing_phone();
        }
    }

    return $results;
}, 10, 2);

在CSV中显示新添加的列

/**
 * Add the phone number column to the CSV file
 * @param $export_columns
 * @return mixed
 */
add_filter('woocommerce_report_orders_export_columns', function ($export_columns){
    $export_columns['customer_phone'] = 'Customer phone';
    return $export_columns;
});

/**
 * Add the phone number data to the CSV file
 * @param $export_item
 * @param $item
 * @return mixed
 */
add_filter('woocommerce_report_orders_prepare_export_item', function ($export_item, $item){
    $export_item['customer_phone'] = $item['customer_phone'];
    return $export_item;
}, 10, 2);

下一步，您将必须修改该Java脚本文件。下面是我如何使用它来显示电话号码：

// Import SCSS entry file so that webpack picks up changes
import './index.scss';
import {addFilter} from '@wordpress/hooks';
import {__} from '@wordpress/i18n';

const addTableColumn = reportTableData => {
    if ('orders' !== reportTableData.endpoint) {
        return reportTableData;
    }

    const newHeaders = [
        ...reportTableData.headers,
        {
            label: 'Customer phone',
            key: 'customer_phone',
            required: false,
        },
    ];

    const newRows = reportTableData.rows.map((row, index) => {
        const item = reportTableData.items.data[index];
        const newRow = [
            ...row,
            {
                display: item.customer_phone,
                value: item.customer_phone,
            },
        ];
        return newRow;
    });

    reportTableData.headers = newHeaders;
    reportTableData.rows = newRows;

    return reportTableData;
};

addFilter('woocommerce_admin_report_table', 'wg-woocommerce-addon', addTableColumn);

我建议您处理您的数据服务器端，并使用Java脚本来显示它，但这取决于您。 新列将自动包含在导出的CSV中。您还可以找到更多示例here。