Table of Contents
We have added support for extending the Store Dashboard menu and loading custom React dashboard components.
Add Custom Store Dashboard Menu
Use the dashboard_other_endpoints filter to register custom dashboard menus/submenus.
Example:
add_filter(
'dashboard_other_endpoints',
array( $this, 'add_menu_in_dashboard' ),
20
);
public function add_menu_in_dashboard( $submenus ) {
$new_item = array(
'appointment' => array(
'name' => __( 'Appointment', 'multivendorx-pro' ),
'slug' => 'appointment',
'icon' => 'appointments',
'submenu' => array(
array(
'key' => 'all-appointment',
'name' => __( 'All Appointment', 'multivendorx-pro' ),
'slug' => 'all-appointment',
'capability' => array( 'manage_store_settings' ),
),
array(
'key' => 'add-appointment',
'name' => __( 'Add Appointment', 'multivendorx-pro' ),
'slug' => 'add-appointment',
'capability' => array( 'manage_store_settings' ),
),
),
'capability' => array( 'manage_store_settings' ),
'module' => array( 'appointment' ),
),
);
return array_merge( $submenus, $new_item );
}Load Custom React Dashboard Component
Dashboard components can be loaded using the multivendorx_pro_dashboard_component filter.
Internal loader:
return applyFilters(
'multivendorx_pro_dashboard_component',
null,
convertedKey
);Register Custom Dashboard Component
import { addFilter } from '@wordpress/hooks';
import AppointmentDashboard from './AppointmentDashboard';
addFilter(
'multivendorx_pro_dashboard_component',
'my-plugin/appointment-dashboard',
(component, endpoint) => {
if (endpoint === 'appointment') {
return <AppointmentDashboard />;
}
return component;
}
);
Example React Component
import React from 'react';
const AppointmentDashboard = () => {
return (
<div className="appointment-dashboard">
<h2>Appointment Dashboard</h2>
<p>
This is a custom dashboard component loaded using
the multivendorx_pro_dashboard_component filter.
</p>
</div>
);
};
export default AppointmentDashboard;
