Download the PHP package tmonier/sylius-command-palette-plugin without Composer

Sylius Command Palette Plugin

Français : README.fr.md

A command palette (Ctrl+K / ⌘K) for the Sylius 2 back office: find any order, customer, product, promotion or admin page from anywhere.

The Sylius 2 admin has no global search: the navbar field only searches products, the sidebar field only filters menu items, and there is no keyboard shortcut. Finding "order 1042" or "the customer who called" means opening the right grid and filtering it first.

This plugin adds a keyboard-first search dialog to every admin page, free and open source.

Features

Also included: keyboard navigation, accessible dialog (combobox / listbox pattern, focus trap, focus restored on close), light and dark themes, translations in English, French, German, Spanish, Italian, Dutch and Polish, no build step and no JavaScript dependency.

Screenshots

Command palette (Cmd+K) searching "claire": her latest orders with status, then the customer

Requirements

Installation

1. Require the package:

2. Register the bundle in config/bundles.php (Symfony Flex does it automatically once a recipe exists):

3. Import the configuration in config/packages/tmonier_sylius_command_palette.yaml:

4. Import the admin route in config/routes/tmonier_sylius_command_palette.yaml:

5. Install the assets (a JavaScript and a CSS file, nothing to build):

No migration: the plugin has no table.

Configuration

Rate limiting

The search endpoint runs DQL queries on every keystroke. The built-in rate limiter (symfony/rate-limiter + symfony/lock) caps requests at 120 per minute per admin user (keyed on the user identifier; falls back to the client IP when no user is found). Requests that exceed the limit receive a 429 Too Many Requests JSON response ({"error": "too_many_requests"}) with a Retry-After header (seconds).

The rate limiter is enabled by default and is automatically disabled if the symfony/rate-limiter package is not installed. To disable it explicitly:

Keyboard shortcuts

The Search… ⌘K button in the navbar opens it too. The Sylius product search field is kept.

Add your own provider

Implement SearchProviderInterface and tag the service with tmonier_command_palette.provider. The priority sets the position of the group (built-in: orders 500, customers 400, products 300, promotions 200, coupons 100).

Guidelines:

• Bind every user value as a parameter and escape LIKE wildcards with LikePattern (escape(), prefix(), contains(), used with LikePattern::DQL_ESCAPE).
• Select scalar columns (one query per group, no lazy loading per result) and honour $limit.
• Return URLs of admin pages: the endpoint is only available to administrators, but your provider decides what it exposes.
• Icons are UX Icons names rendered once in the layout: add the ones not used by the admin menu to the icons option (an unknown icon falls back to an arrow).
• An exception thrown by a provider is logged (channel tmonier_command_palette) and its group is skipped; the other groups are still returned.

Admin menu items added through the sylius.menu.admin.main event (or a menu builder) appear in the Pages group automatically.

Customisation

The admin parts are added with Twig Hooks:

Templates can be overridden in templates/bundles/TmonierSyliusCommandPalettePlugin/. To hide the navbar button and keep the shortcuts:

The search endpoint is GET /admin/command-palette/search?q=… (route tmonier_command_palette_admin_search), returning {"query": "…", "groups": [{"key", "label", "results": [{"title", "subtitle", "url", "icon", "badge"}]}]}.

How it works

• Server-side search for orders, customers, products and promotions: requests are debounced (200 ms), the previous one is aborted, queries shorter than 2 characters are not sent and queries are cut to 100 characters (in the browser and on the server). Each provider runs one or two scalar queries with bound parameters, whatever the number of results.
• Client-side pages: the admin menu and the actions are rendered once in the page as JSON and filtered in the browser, so they appear on the first keystroke.
• Plain JavaScript, no build: command-palette.js (an IIFE, no dependency) and command-palette.css are installed by assets:install in public/bundles/tmoniersyliuscommandpaletteplugin/. Every value is rendered with textContent; icons are cloned from <template> elements rendered by Twig.
• Security: the endpoint is behind the admin firewall (ROLE_ADMINISTRATION_ACCESS, checked again in the controller), responses are private, no-store. An expired session shows a "reload the page" message in the palette.

Limitations

• Matching uses LIKE (prefix for codes, e-mails and names, contains for product and promotion names), not a full-text index: on very large catalogues the "contains" searches scan the translation tables. Plug a provider backed by your search engine if needed.
• Product names are searched in the administrator's locale only.
• Order numbers are matched exactly; the leading-zero shortcut assumes the default Sylius padding (9 digits).
• Sylius Plus RBAC is not integrated: every administrator can find every resource (the pages they open still apply their own permissions).
• Catalog promotions, shipments, payments and taxons are not searched in v1 (only reachable as pages / actions).

Development

B2B demo

This plugin is used in the Sylius B2B demo: a Sylius 2.3 shop with fictitious sample data where the B2B plugins work together. The source code, setup and fixtures of the demo are in that repository.

The demo is an example, not a production setup.

License

MIT. See LICENSE.