Cómo customizar el admin de Magento (parte 1)

Cada instancia de Magento consiste de al menos dos sitios separados: el frontend, que permite a los clientes navegar, crear cuentas y comprar productos, y el sitio de administración: que consta de una plataforma segura para que los administradores del comercio realicen tareas como gestión de pedidos, actualizaciones de catálogo, creación de contenido, campañas de marketing, generación de informes y configuración de todos los ajustes de la tienda, entre otras aciones.

En general, se realiza un gran esfuerzo para desarrollar y personalizar el frontend, lo cuál es claramente importante, ya que es donde navegarán todos los clientes; sin embargo, con frecuencia el sitio de administración pasa sin recibir atención por parte de los diseñadores y desarrolladores, y a veces ni siquiera saben que es totalmente posible personalizar y modificar el sitio de administración hasta el último píxel. Aquí se explicará como customizar el admin de Magento.

Algunos beneficios de personalizar el sitio de administración son:

• Mayor personalización para el comercio: incluye tus logotipos, íconos y colores en el sitio de administración, para brindar una imagen clara de la empresa y de su marca en toda la plataforma de Magento, lo que también le dará a su sitio una apariencia más profesional, lo que te permitirá mostrarlo mejor a inversionistas y socios comerciales.
• Muestra solamente lo relevante, no más ni menos: Magento tiene miles de funcionalidades listas para usar, especialmente si estás usando la versión de Adobe Commerce, pero a veces, menos es más. Tener tantas herramientas y secciones puede ser confuso para un usuario que solo necesita realizar unas pocas tareas, y aunque las ACL (listas de control de acceso) existen para crear reglas que les permitan a los usuarios acceder solo a secciones particulares, tal vez una extensión que hayas agregado a tu sitio no tiene esta configuración, o tal vez no deseas que ningún usuario vea una sección en particular en el menú. Bueno, es tan simple como modificar la plantilla del menú para agregar, eliminar o modificar cualquier elemento del menú en el sitio de administración.
• Sin ambigüedades: los usuarios del sitio de administración sabrán con certeza que están en el lugar correcto, después de todo, es posible que algunas personas tengan que interactuar con varias instancias de magento al mismo tiempo (como desarrolladores, contratistas y trabajadores a tiempo parcial). Al personalizar tu administrador para que coincida con la marca de su comercio, es obvio que están en el lugar correcto.
• Deja que florezca la creatividad: si bien es posible que esto no aplique a todos, algunos podrían decir que el sitio de administración predeterminado de Magento parece un poco... blando. Por supuesto, esto es intencional, ya que debe poder funcionar para cualquier tipo de negocio e industria. Pero no tiene por qué ser así, tal vez quieras que sus empleados sientan que están usando una plataforma emocionante, creativa y de primer nivel cuando ingresan al administrador.

Para modificar tu sitio de administración, deberás crear un tema y un módulo, y aunque esto requerirá una programación básica, puedes usar el código provisto, pero asegúrate de reemplazar el nombre del comercio por el tuyo.

A continuación, los pasos:

1. En tu carpeta raíz de magento (donde encontrarás los directorios de app, pub, generated, vendor y var), navega hasta app/design/adminhtml, aquí deberías ver una carpeta llamada "Magento", pero como queremos que nuestro tema esté separado de Magento, crearemos una carpeta con el nombre de nuestro comercio (en este ejemplo, reemplaza "Imagineer" con tu empresa):
   
   
2. Dentro de esta carpeta, crea otra carpeta, a la que puedes nombrar con el nombre que quieras para identificar tu tema (ya que puedes crear un número indefinido de temas, puedes ser tan creativo o genérico como quieras con la nomenclatura), aquí estamos usando "adminDemoCCR" como nuestro ejemplo:
   
   
3. Dentro de esta carpeta, crea un archivo "theme.xml" con el siguiente contenido:
   
   
   <theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">

       <title>Admin Demo CCR</title> 
    <!-- ^ your theme's name -->

       <parent>Magento/backend</parent>   
    <!-- ^ the parent theme, in case your theme inherits from an existing theme -->

       <media>

           <preview_image>media/Icon_CCR.png</preview_image>
        <!-- ^ the path to your theme's preview image -->

       </media>

   </theme>

    

    
4. Además, crea un archivo "registration.php" para que Magento sepa que se trata de un componente (reemplace "Imagineer" con su empresa y "adminDemoCCR" con el nombre de tu tema):
   
   
   <?php

   use \Magento\Framework\Component\ComponentRegistrar;

   
   

   ComponentRegistrar::register(ComponentRegistrar::THEME, 'adminhtml/Imagineer/adminDemoCCR', __DIR__);

    
5. A continuación, crea una carpeta "media", que se puede usar para cargar imágenes, estilos y scripts (asegúrate de que el nombre de tu ícono coincida con la <preview_image> definida en el paso 3):
   
   
6. Adicionalmente, puedes crear una carpeta "web" y dentro de ella otra carpeta "images", para agregar todas las imágenes que quieras que cargue Magento en tu admin:
   
   
7. Para cambiar la imagen que se muestra en la pantalla de inicio de sesión, crea una carpeta "Magento_Backend", en la que sobreescribiremos la imagen de inicio de sesión predeterminada. Dentro de esta nueva carpeta, crea una carpeta "design" y un archivo "admin_login.xml":
   
   
   
8. Agrega el siguiente contenido (recuerda reemplazar "Logo_CCR.png" con el nombre de tu logotipo):
   
   
   <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="admin-login" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">

       <body>

           <referenceBlock name="logo">

               <arguments>

                   <argument name="logo_image_src" xsi:type="string">images/Logo_CCR.png</argument>

                   <argument name="logo_width" xsi:type="number">150</argument>
                <!-- ^ Add custom logo width -->

                   <argument name="logo_height" xsi:type="number">80</argument>
                <!-- ^ Add custom logo height -->

               </arguments>

           </referenceBlock>

       </body>

    </page>

    
   Esta es la imagen que estamos reemplazando:
   
   
   
   
   
9. Hasta ahora, el tema debería tener la siguiente estructura:
   
   
   
   
10. Luego, para indicarle a Magento que necesita cargar este tema, debe crearse un módulo, así que navega de regreso a tu directorio raíz de Magento e ingresa a la carpeta "app", desde aquí, ingresa a la carpeta "code" (si no existe, créela) y crea una carpeta con el mismo nombre de comercio que definió en el paso 1 (probablemente el nombre de tu empresa); en nuestro ejemplo, es "Imagineer". Si ya existe una carpeta con este nombre, simplemente ingresa adentro:
    
    
    
    
11. Dentro de esta carpeta, crea una nueva carpeta con el nombre de tu módulo, en este ejemplo, lo llamamos "AdminTheme" (está bien si ya existen varios módulos aquí, solo asígnale un nombre único):
    
    
    
    
12. Dentro de esta carpeta, crea un archivo "registration.php" (sí, creamos uno en el paso 4, pero eso fue para el tema, aquí estamos creando un módulo separado que se encargara de cargar ese tema):
    (reemplaza Imagineer con el nombre de tu empresa)
    
    
    <?php

    \Magento\Framework\Component\ComponentRegistrar::register(

    \Magento\Framework\Component\ComponentRegistrar::MODULE,

       'Imagineer_AdminTheme',

       __DIR__

    );

    ?>

     
13. Luego, crea una carpeta "etc" y dentro crea un archivo "module.xml" (nuevamente, reemplaza Imagineer con el nombre de tu empresa):
    
    
    <?xml version="1.0"?>

    <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">

        <module name="Imagineer_AdminTheme" setup_version="1.0">

       <sequence>

          <module name="Magento_Theme"/>

          <module name="Magento_Enterprise"/>

       </sequence>

        </module>

    </config>

     
14. Dentro de la carpeta "etc", crea otro archivo "di.xml" (reemplaza Imagineer/adminDemoCCRcon el nombre de tu empresa y tema definidos en los pasos 1 y 2):
    
     

    <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">

        <!-- Admin theme. Start -->

        <type name="Magento\Theme\Model\View\Design">

            <arguments>

                 <argument name="themes" xsi:type="array">

                     <item name="adminhtml" xsi:type="string">Imagineer/adminDemoCCR</item>
<!-- Example: "Magento/backend" -->

                 </argument>

             </arguments>

        </type>

        <!-- Admin theme. End -->

    </config>

     
15. Ahora agreguemos un ícono al menú lateral del sitio de administración, para hacer esto, regresa a la carpeta del módulo (app/code/TuEmpresa/AdminTheme) y crea una carpeta "view" y dentro de ella una carpeta "adminhtml", y allí otra carpeta llamada "design". Aquí, crea un nuevo archivo "default.xml" (recuerda reemplazar "Icon_CCR.png" con el nombre de tu ícono):
    
    
    <?xml version="1.0"?>

    <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="admin-1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">

        <body>

            <referenceContainer name="header">

                <block class="Magento\Backend\Block\Page\Header" name="logo" before="-">

                    <arguments>

                        <argument name="show_part" xsi:type="string">logo</argument>

                        <argument name="logo_image_src" xsi:type="string">images/Icon_CCR.png</argument>

                    </arguments>

                </block>

            </referenceContainer>

        </body>

    </page>
    
    
     
    Esta es la imagen que estamos reemplazando:
    
    
    
    
    
    
16. También puedes agregar imágenes en este módulo, para hacerlo, regresa a la carpeta "view" creada en el paso 15 y crea una carpeta "web" y dentro de ella una carpeta "images", donde puedes cargar imágenes para tu tema.
17. Hasta ahora, el módulo debería tener la siguiente estructura:
    
    
    
    
18. Por último, debemos compilar, generar contenido estático y limpiar caché. Para hacerlo, navega en una terminal a la carpeta raíz de magento, por ejemplo "cd /var/www/html/magento", y ejecuta los siguientes comandos:
    • bin/magento setup:upgrade
    • bin/magento setup:di:compile
    • bin/magento setup:static-content:deploy -f
    • bin/magento cache:flush
    
    Ahora puedes ingresar a tu administrador y verificar que los cambios se aplicaron correctamente. En el próximo capítulo de esta guía, exploraremos cómo agregar estilos a tu tema del admin a través de css y archivos less para cambiar la apariencia de los botones, fuentes, colores y otros elementos del administrador.