Enhanced Localization & Customization Hooks for the New React-Based Vendor Dashboard
1. Overview
With the release of Dokan Pro’s modern (React-driven) vendor dashboard, many site owners have struggled to translate, hide, or reorder interface elements—especially within the new Analytics/Reports screens. Currently, numerous labels (e.g. “Show:”, dropdown options like “All products” or “Comparison,” and input placeholders such as “Type to search for product”) are neither exposed in Dokan’s own translation files nor filterable via PHP hooks. As a result, non-English‐speaking marketplaces (or single-language deployments) must resort to fragile JavaScript overrides that break on every minor UI change.
This feature request proposes:
Full internationalization of all UI strings (including analytics/report components, input placeholders, and dynamically loaded headings)
New PHP filters/hooks to hide or reorder dashboard panels and table columns
Ability to set global default tab/menu names per language—so that every new vendor sees, for example, “Продукти” instead of “Products” without manual renaming
A streamlined mechanism to hide specific category/filter options in vendor tables without custom JS
2. Use Cases
Single-Language Marketplace (e.g., Bulgarian):
A marketplace owner wants every new vendor to see the dashboard entirely in Bulgarian, including custom‐built analytics cards and input placeholders. Relying on JS to patch untranslated strings is brittle and nearly impossible for dynamically injected React components.
When a Bulgarian vendor clicks into the product search field, the placeholder (“Търсене на продукт”) must appear immediately—without a split-second flash of “Type to search for product.”
Per-User / Global Default Menu Renaming:
Right now, Dokan Pro’s Menu Manager works well for existing users, but there is no way to define default names for all future vendors (e.g., “Dashboard → Табло,” “Products → Продукти,” “Reports → Отчети”). Administrators must either rename each vendor’s menu manually or write custom code. A simple filter like
php
Copy
Edit
add_filter( 'dokan_vendor_dashboard_menu', function( $menus ) {
$menus['products']['title'] = 'Продукти';
return $menus;
} );
would solve it—if such a filter existed and applied to the React dashboard.
Hiding or Collapsing Dashboard Panels / Analytics Cards:
A store manager may not want “Top Products by Revenue” or “Orders Summary” visible for all vendors, or might want to collapse them by default. Ideally, a filter—e.g.,
php
Copy
Edit
add_filter( 'dokan_reports_panels', function( $panels ) {
unset( $panels['top_products_revenue'] );
return $panels;
} );
would remove that card entirely, rather than requiring CSS/JS workarounds.
Removing Specific Filters/Columns from Vendor Tables:
In the “Products” table, there are category filters or columns (like “Category,” “Stock Status,” etc.) that site owners may wish to hide for a simplified view. An ability to programmatically remove columns—e.g.:
php
Copy
Edit
add_filter( 'dokan_products_table_columns', function( $columns ) {
unset( $columns['category'], $columns['stock'] );
return $columns;
} );
would allow a cleaner, more tailored vendor interface.
3. Proposed Solutions
A. Expose All UI Strings for Translation
Wrap Every Label & Placeholder in Translation Functions
In PHP templates and React components, ensure all visible text uses __( 'String', 'dokan-lite' ) (or the appropriate text domain).
Example:
php
Copy
Edit
And in React:
js
Copy
Edit
{ __( 'Compare Products', 'dokan-lite' ) }
Generate a Unified JSON/WP-Localize for React
Use wp_localize_script() or @wordpress/i18n to feed a dokan-translations.json object so React components can call __() at runtime.
Populate this JSON with every dynamic string, including dropdown options (“All products,” “Single product,” “Comparison”) and input placeholders.
B. Add PHP Filters/Hooks for Dashboard Panels & Tabs
Dashboard Panels Filter
Introduce a hook like
php
Copy
Edit
/**
* @param array $panels {
* Array of panel definitions: 'panel_key' => [ 'title' => '', 'component' => '' ]
* }
*/
do_action( 'dokan_dashboard_panels', &$panels );
Allow removing or reordering:
php
Copy
Edit
add_action( 'dokan_dashboard_panels', function( &$panels ) {
unset( $panels['top_products_revenue'], $panels['orders_summary'] );
// Reindex or re‐order if needed.
} );
Vendor Menu Titles Filter
A filter before rendering menu items, for example:
php
Copy
Edit
/**
* @hook dokan_vendor_dashboard_menu
* @param array $menus Array of tab definitions: key => [ 'title' => '', 'url' => '' ]
* @return array
*/
apply_filters( 'dokan_vendor_dashboard_menu', $menus );
Site owners could set default titles in functions.php or via a custom settings page.
C. Control Table Columns & Filters via Hooks
Products Table Columns Filter
Before rendering the “Products” table, apply:
php
Copy
Edit
$columns = apply_filters( 'dokan_products_table_columns', $default_columns );
Example usage:
php
Copy
Edit
add_filter( 'dokan_products_table_columns', function( $cols ) {
unset( $cols['category'], $cols['stock_status'] );
return $cols;
} );
Reports/Analytics Filters Filter
If the Reports page uses a PHP array for filter‐names (e.g., $filter_options), wrap it:
php
Copy
Edit
$filter_options = apply_filters( 'dokan_reports_filter_options', $filter_options );
Developers could then remove or rename specific filter labels (e.g., remove “Comparison”).
4. Benefits & Impact
Maintainability & Future-Proofing
Relying on PHP filters/hookable methods ensures that when Dokan or WooCommerce updates the underlying React components, existing customizations remain intact.
Site owners avoid fragile JavaScript “mutation observers” that frequently break after minor UI changes.
Full Localization for Single-Language Marketplaces
Immediately serve a fully translated dashboard to Bulgarian vendors (or any other single-language market), without requiring site owners to learn React internals or monkey-patch elements.
Encourage non-English-language adoption, expanding Dokan’s global user base.
Better UX & Reduced Support Overhead
When vendors see a consistent, fully translated interface (including placeholders that appear the instant an input is focused), they won’t be confused by mixed English/Bulgarian UI.
Hiding unnecessary panels and columns streamlines the vendor experience, reducing clutter and support requests.
Empower Developers & Integrators
By offering documented filters (with code examples), third-party developers can build add-ons or theme integrations more easily.
Encourages a more vibrant ecosystem of localized themes and marketplace extensions.
5. Backward Compatibility & Implementation Notes
Graceful Fallback
Existing installations without these new hooks should continue working as normal. The added filters/actions should default to including all panels/columns with English labels.
When the filter does not exist, Dokan falls back to its current hard-coded behavior.
WooCommerce Upstream Strings
Because many Analytics/Reports strings come from WooCommerce core, collaborate upstream with WooCommerce to ensure those components are also internationalized. Until then, Dokan can expose filters that allow overriding the final rendered labels (e.g., a filter on $report_labels that merges WooCommerce’s translations with Dokan’s custom overrides).
Documentation & Code Examples
Each new hook should be documented in the official Dokan Developer Docs (https://docs.dokan.co/).
Provide at least two or three code snippets per hook to demonstrate common use cases (e.g., hiding a panel, renaming a tab, customizing a table column).
6. Next Steps for Review
Review & Incorporate Internationalization Hooks
Identify all React components in dokan-lite/assets/js/modules/report-analytics (and similar folders) that output hard-coded text. Wrap each string in __() or _x() calls.
Generate an updated POT file that includes these new strings so site owners can translate everything via Loco Translate.
Define & Register New Filters in PHP Backend
In includes/Dashboard/, add filter points for:
Dashboard panels (dokan_dashboard_panels)
Vendor menu items (dokan_vendor_dashboard_menu)
Table columns (dokan_products_table_columns, dokan_orders_table_columns, etc.)
Report filter options (dokan_reports_filter_options)
Publish Documentation & Examples
Add a “Developer” section to Dokan Docs showing how to use these new filters.
Example gist or code sandbox demonstrating a single-language Bulgarian site using these hooks to fully localize and simplify the dashboard.
Release Timeline & Backport Strategy
Ideally, include these updates in the next minor release (e.g., 3.8.x) so that affected merchants can immediately benefit.
Ensure that documentation is updated at the same time to minimize confusion.
Conclusion:
By adding comprehensive translation support for all dynamic UI strings and providing well-documented PHP filters to hide or rename dashboard components, Dokan Pro will dramatically improve the experience for non-English marketplaces and developer integrators. These enhancements will reduce the reliance on fragile JavaScript workarounds, streamline vendor onboarding, and strengthen Dokan’s position as a truly global, customizable multi-vendor platform.