I've been diving into customizing Analytics reports tables for clients on our WooCommerce platform. I followed a guide at this link, but encountered an issue with the JavaScript file.
After adding the filter at the end of the file as instructed, nothing seems to happen when the addFilter function is called. The callback function never executes.
Below is the code snippet in question:
import { addFilter } from '@wordpress/hooks';
console.log(addFilter)
function addCustomColumnsToWCReportTable( reportTableData ) {
console.log("I'm in !!")
const { endpoint, items } = reportTableData;
if ( 'orders' !== endpoint ) {
return reportTableData;
}
reportTableData.headers = [
...reportTableData.headers,
{
label: 'Order VAT Rate',
key: 'vat_rate',
},
];
reportTableData.rows = reportTableData.rows.map( ( row, index ) => {
const item = items.data[ index ];
const newRow = [
...row,
{
display: item.vat_rate,
value: item.vat_rate,
},
];
return newRow;
} );
return reportTableData;
}
addFilter( 'woocommerce_admin_report_table','custom_reports', addCustomColumnsToWCReportTable, 10 );
The fact that addFilter shows up in the console log indicates it should be functioning properly.
No errors are being thrown in the console, yet the expected console.log() message within the callback function is missing.
I attempted tweaking the hooks without success and explored various online resources for writing filters, though documentation is somewhat lacking.
The only output in the console related to addFilter existing is the following:
ƒ addHook(hookName, namespace, callback) {
let priority = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 10;
const hooksStore = hooks[storeKey];
if (!(0,_validateHookN…