Comment personnaliser le panneau d'administration de Magento 2 pour un meilleur flux de travail
How to Customize the Magento 2 Panneau d'administration for Better Workflow
If you're running a Magento 2 store, you know the panneau d'administration is your command center. But let's be honest—prêt à l'emploi, it's not always the most efficient workspace. The good news? Magento 2 is highly customizable, and with a few tweaks, you can transform your panneau d'administration into a productivity powerhouse.
Dans ce guide, nous'll walk through practical ways to streamline your Magento 2 admin experience—from simple UI adjustments to advanced personnalisations that'll save you hours every week.
Why Customize Your Panneau d'administration?
Avant we dive into the how, let's talk about the why. A well-optimized panneau d'administration can:
- Reduce clicks to common tasks
- Surface important metrics faster
- Minimize training time for new staff
- Prevent costly mistakes from menu diving
Maintenant, let's roll up our sleeves and get to work.
1. Rearrange the Admin Menu
The default menu structure might not match your flux de travail. Voici comment to customize it:
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Backend:etc/menu.xsd">
<menu>
<add id="Magefine_CustomMenu::dashboard" title="Dashboard" module="Magefine_CustomMenu" sortOrder="10" resource="Magento_Backend::dashboard"/>
<add id="Magefine_CustomMenu::sales" title="Sales" module="Magefine_CustomMenu" sortOrder="20" resource="Magento_Sales::sales"/>
<add id="Magefine_CustomMenu::catalog" title="Catalog" module="Magefine_CustomMenu" sortOrder="30" resource="Magento_Catalog::catalog"/>
</menu>
</config>Save this as etc/adminhtml/menu.xml in your custom module. Adjust the triOrder valeurs to rearrange items.
2. Create Custom Admin Dashboards
Magento's tableau de bord is useful, but you can make it better. Try this:
// In your custom module's view/adminhtml/ui_component/magefine_custom_dashboard.xml
<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
<argument name="data" xsi:type="array">
<item name="js_config" xsi:type="array">
<item name="provider" xsi:type="string">magefine_custom_dashboard.magefine_custom_dashboard_data_source</item>
</item>
</argument>
<dataSource name="magefine_custom_dashboard_data_source">
<argument name="dataProvider" xsi:type="configurableObject">
<argument name="class" xsi:type="string">Magefine\Custom\Ui\DataProvider\DashboardData</argument>
</argument>
</dataSource>
<columns name="magefine_custom_dashboard_columns">
<column name="metric">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="filter" xsi:type="string">text</item>
<item name="label" xsi:type="string" translate="true">Metric</item>
</item>
</argument>
</column>
</columns>
</listing>3. Add Quick Action Buttons
Speed up common tasks with custom buttons. Voici comment to add a "Quick Add Product" button:
// In your layout XML file
<referenceContainer name="header">
<block class="Magento\Backend\Block\Template" name="custom.quick.actions" template="Magefine_Custom::quick_actions.phtml" before="-" />
</referenceContainer>Then create the template:
<div class="admin__action-dropdown-wrap">
<button class="admin__action-dropdown">
<span>Quick Actions</span>
</button>
<ul class="admin__action-dropdown-menu">
<li><a href="<?= $block->getUrl('catalog/product/new') ?>">Add Product</a></li>
<li><a href="<?= $block->getUrl('sales/order/create') ?>">Create Order</a></li>
</ul>
</div>4. Customize Grid Views
Make product and commande grids work for you:
<?xml version="1.0" encoding="UTF-8"?>
<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
<columns name="sales_order_columns">
<column name="increment_id">
<settings>
<filter>text</filter>
<label translate="true">Order #</label>
</settings>
</column>
<column name="billing_name">
<settings>
<filter>text</filter>
<label translate="true">Bill-to Name</label>
</settings>
</column>
<column name="grand_total">
<settings>
<filter>textRange</filter>
<label translate="true">Amount</label>
</settings>
</column>
</columns>
</listing>5. Implement Keyboard Shortcuts
Add this JavaScript to create time-saving shortcuts:
require(['jquery'], function($) {
$(document).on('keydown', function(e) {
// Ctrl+Shift+P for new product
if (e.ctrlKey && e.shiftKey && e.keyCode === 80) {
window.location.href = $('#nav a[href*="product/new"]').attr('href');
}
// Ctrl+Shift+O for new order
if (e.ctrlKey && e.shiftKey && e.keyCode === 79) {
window.location.href = $('#nav a[href*="order/create"]').attr('href');
}
});
});6. Create Custom Admin Themes
Reduce eye strain with a custom admin thème. Create etc/adminhtml/theme.xml:
<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
<title>Magefine Dark Admin</title>
<parent>Magento/backend</parent>
<media>
<preview_image>preview.jpg</preview_image>
</media>
</theme>Then add CSS in web/css/source/_theme.less:
@primary__color: #333;
@page__background-color: #222;
@menu__background: #111;
@menu__color: #eee;
7. Bulk Action Improvements
Enhance bulk operations with this in your module's view/adminhtml/ui_component/product_listing.xml:
<massaction name="listing_massaction">
<action name="update_attributes">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="type" xsi:type="string">update_attributes</item>
<item name="label" xsi:type="string" translate="true">Update Attributes</item>
<item name="url" xsi:type="url" path="catalog/product_action_attribute/edit"/>
</item>
</argument>
</action>
</massaction>8. Add Custom Reports
Create focused rapports for your entreprise needs:
<?php
namespace Magefine\Custom\Block\Adminhtml\Report;
class Custom extends \Magento\Backend\Block\Widget\Grid\Container
{
protected function _construct()
{
$this->_blockGroup = 'Magefine_Custom';
$this->_controller = 'adminhtml_report_custom';
$this->_headerText = __('Custom Report');
parent::_construct();
}
}9. Implement Two-Factor Authentication
Security matters. Add 2FA with this in your etc/di.xml:
<type name="Magento\User\Model\User">
<plugin name="magefine_custom_user_2fa" type="Magefine\Custom\Plugin\User\TwoFactorAuth"/>
</type>Then create the plugin:
<?php
namespace Magefine\Custom\Plugin\User;
class TwoFactorAuth
{
public function afterAuthenticate(\Magento\User\Model\User $subject, $result)
{
if ($result) {
// Implement your 2FA logic here
}
return $result;
}
}10. Create Custom Admin Notifications
Keep your team informed:
<?php
namespace Magefine\Custom\Cron;
class AdminNotifications
{
public function execute()
{
$notification = $this->notificationFactory->create();
$notification->setTitle('Daily Summary')
->setDescription('Check today\'s sales performance')
->setUrl($this->url->getUrl('sales/'))
->setIsRead(false)
->save();
}
}Réflexions finales
Customizing your Magento 2 panneau d'administration isn't just about aesthetics—it's about creating a workspace that vous aide à work smarter, not harder. Start with one or two of these tweaks, measure the time savings, and gradually implement more basé sur your team's flux de travail.
Remember, every minute saved in your panneau d'administration is a minute you can spend gligneing your entreprise. Happy customizing!
Need help implementing these changes? Check out our Magento 2 extensions and hosting solutions to take your store to the next level.