<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=262721675103356&amp;ev=PageView&amp;noscript=1">
Skip to the main content.
ICX FOLDER
logo-ICX

4 minutos de lectura

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

4 minutos de lectura

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):

    Pasos Magento
  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:

    Pasos Magento
  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):

    Pasos Magento
  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:

    Pasos Magento
  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":


    Pasos Magento
  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:

    Pasos Magento
    Pasos Magento

  9. Hasta ahora, el tema debería tener la siguiente estructura:

    Pasos Magento

  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:

    Pasos Magento

  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):

    Pasos Magento

  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:

    Pasos Magento

    Pasos Magento

  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:

    Pasos Magento

  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.
Content added to ICX Folder

Guardar blog

Imprimir

Suscribirse

Comienza

CX Insights Recomendados Para Usted

Integración de redes sociales al comercio electrónico

Integración de redes sociales al comercio electrónico

Es increíble el gran auge que ha llegado a alcanzar las redes sociales, pero aún más la integración de redes sociales con los comercios electrónicos....

Leer más
Blogs en Magento: Una manera sencilla de atraer clientes

Blogs en Magento: Una manera sencilla de atraer clientes

Magento es una poderosa y flexible plataforma de comercio electrónico que posee una amplia variedad de herramientas de SEO para garantizar que el...

Leer más
¿Qué es un marketplace y cuál es la diferencia con un eCommerce b2b?

¿Qué es un marketplace y cuál es la diferencia con un eCommerce b2b?

El cambio a las compras online no ha sido nada gradual, las empresas que aún no habían ni pensado en tener un eCommerce o que todavía veían esa idea...

Leer más

SUBSCRIPCIÓN ICX

Venga y sea parte de los últimos insights específicos proporcionados por nuestros expertos

¿Qué sigue?

¿ESTÁS LISTO?