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

Question

我正在尝试向 WooCommerce Analytics -> 订单提供的表中添加一列，并且该订单的商品名称(不是产品名称)显示在上面。

我添加了一个钩子(Hook)，并尝试提取订单中商品的所有名称(这个钩子(Hook)是我之前使用过的，它在 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>';
    }
}

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

Answer 1

我今天必须做类似的事情，这是 documentation和 example我用过，这就是我的做法。

首先，克隆并启动 woocommerce-admin:

cd wp-content/plugins 
git clone <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a7c0ced3e7c0ced3cfd2c589c4c8ca" rel="noreferrer noopener nofollow">[email protected]</a>: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);

接下来，您必须修改 JavaScript 文件。以下是我如何使用它来显示电话号码:

// 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);

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