DocumentaciónCommerceGuía de sistemas de administración

Herramientas para desarrolladores

Last update: Sun Jul 14 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Temas:

Creado para:

  • Principiante
  • Intermedio
  • Administrador
  • Desarrollador

Utilice las herramientas avanzadas para desarrolladores para determinar el modo de compilación durante el desarrollo de front-end, crear una lista de permitidos de direcciones IP y mostrar sugerencias de ruta de plantillas. También hay herramientas para realizar fácilmente cambios puntuales en el texto en la interfaz de la tienda y el administrador.

Modos de funcionamiento

Su instancia de Adobe Commerce o de Magento Open Source se puede implementar para ejecutarse en producción o en modo de desarrollador. Solo se puede tener acceso a las herramientas y opciones de configuración diseñadas específicamente para desarrolladores mientras la tienda se ejecuta en modo de desarrollador.

Un usuario con los permisos adecuados solo puede cambiar el modo de operación desde la línea de comandos del servidor. Consulte Establecer el modo de operación en la Guía de configuración para obtener más información.

La mayoría de los temas de la documentación del comerciante se aplican a una instancia de Commerce que se ejecuta en el modo de producción. Sin embargo, las siguientes opciones de configuración y herramientas sólo se pueden utilizar cuando la instalación se ejecuta en modo de desarrollador.

Flujo de trabajo de desarrollo de front-end

El tipo de flujo de trabajo de desarrollo de front-end determina si se produce menos compilación en el lado del cliente o del servidor durante el desarrollo. Less es una extensión de CSS que tiene características y convenciones adicionales y que produce código optimizado. Se recomienda la compilación Less del lado del cliente para el desarrollo de temas. La compilación del lado del servidor es el modo predeterminado. Las opciones del flujo de trabajo de desarrollo no están disponibles para tiendas en modo de producción.
Consulte Compilación LESS del lado del cliente frente a compilación del lado del servidor{:target="_blank"} en la documentación para desarrolladores de Commerce.

NOTE
La configuración del flujo de trabajo de desarrollo de front-end solo está disponible en modo de desarrollador.

Configuración avanzada: flujo de trabajo de desarrollo de front-end

  1. En la barra lateral Admin, vaya a Stores > Settings>Configuration.

  2. En el panel izquierdo, expanda Advanced y elija Developer.

  3. Expanda Selector de expansión en la sección Front-end Development Workflow.

  4. Establezca Workflow Type en una de las siguientes opciones:

    • Client side less compilation: la compilación se realiza en el explorador con la biblioteca nativa less.js.
    • Server side less compilation: la compilación se realiza en el servidor utilizando la biblioteca Less PHP. Este es el modo predeterminado para la producción.

  5. Una vez finalizado, haga clic en Save Config.

Firmas de archivo estáticas

Añadir una firma digital a la URL de los archivos estáticos permite a los exploradores detectar cuándo está disponible una versión más reciente del archivo. Los archivos estáticos que se pueden rastrear con firmas digitales son JavaScript, CSS, imágenes y fuentes. La firma se anexa a la ruta directamente después de la dirección URL base. Si la firma de un archivo difiere de lo que se almacena en la caché del explorador, se utiliza la versión más reciente del archivo.

Consulte Firma de contenido estático{:target="_blank"} en la documentación para desarrolladores de Commerce.

NOTE
La configuración del archivo estático solo está disponible cuando se trabaja en modo de desarrollador.

Configuración avanzada: configuración de archivos estáticos

Para obtener una lista detallada de las opciones de configuración, consulte Configuración de archivo estático en la Referencia de configuración.

Para habilitar los archivos estáticos firmados:

  1. En la barra lateral Admin, vaya a Stores > Settings>Configuration.

  2. En el panel izquierdo, expanda Advanced y elija Developer.

  3. Expanda Selector de expansión en la sección Static Files Settings.

  4. Establezca Sign Static Files en Yes.

  5. Una vez finalizado, haga clic en Save Config.

Optimización de archivo de recursos

El tiempo que se tarda en cargar archivos de recursos se puede reducir combinando y agrupando archivos y minimizando el código.

  • La combinación combina archivos independientes del mismo tipo en un solo archivo.
  • El agrupamiento es una técnica que agrupa archivos independientes para reducir el número de solicitudes HTTP necesarias para cargar una página.
  • La minificación elimina los espacios, los saltos de línea y los comentarios, pero no afecta a la funcionalidad del código. Como los archivos minimizados no se pueden editar, el proceso solo debe aplicarse cuando esté listo para entrar en producción.

De forma predeterminada, Adobe Commerce y Magento Open Source no combinan, agrupan ni minimizan archivos, y el desarrollador del proyecto debe determinar qué métodos de optimización de archivos se deben utilizar.

Consulte Prácticas recomendadas de rendimiento para obtener más información.

NOTE
Los archivos CSS y JavaScript solo se pueden optimizar en Modo de desarrollador.
Tipo de archivo
Operaciones compatibles
Archivos CSS
MergeMinify
Archivos de JavaScript
MergeBundleMinify
Archivos de plantilla
Minify

Para optimizar los archivos de recursos:

  1. En la barra lateral Admin, vaya a Stores > Settings>Configuration.

  2. En el panel izquierdo, expanda Advanced y elija Developer.

  3. Para optimizar los archivos CSS, expanda Selector de expansión en la sección CSS Settings y haga lo siguiente:

    • Establezca Merge CSS Files en Yes.
    • Establezca Minify CSS Files en Yes.

    Configuración avanzada - Configuración de CSS {width="600" modal="regular"}

Configuración de CSS

  1. Para optimizar los archivos de JavaScript, expanda Selector de expansión en la sección JavaScript Settings y haga lo siguiente:

    • Establezca Merge JavaScript Files en Yes.
    • Establezca Minify JavaScript Files en Yes.

    Configuración avanzada: configuración de JavaScript {width="600" modal="regular"}

  2. Para minimizar los archivos de plantilla PHTML, expanda Selector de expansión en la sección Template Settings y establezca Minify Html en Yes.

    Configuración avanzada: configuración de plantilla {width="600" modal="regular"}

  3. Una vez finalizado, haga clic en Save Config.

Restricciones de cliente

Antes de usar una herramienta como sugerencias de ruta de plantillas, asegúrese de agregar su dirección IP a la lista de permitidos Restricciones de cliente para desarrolladores para evitar que se interrumpa la experiencia de compra de los clientes en la tienda. Si no conoce su dirección IP, puede buscarla en línea.

NOTE
Las restricciones de cliente para desarrolladores solo se pueden establecer en Modo para desarrolladores.

Para obtener información técnica, consulte VCL personalizado para permitir solicitudes en la Guía de infraestructura en la nube de Commerce.

Para agregar su dirección IP a la lista de permitidos:

  1. En la barra lateral Admin, vaya a Stores > Settings>Configuration.

  2. En el panel izquierdo, expanda Advanced y elija Developer.

  3. Expanda Selector de expansión en la sección Developer Client Restrictions.

    Configuración avanzada: restricciones del cliente para desarrolladores {width="600" modal="regular"}

  4. Para Allow IPs, ingrese su dirección IP.

    Si se necesita acceso desde varias direcciones IP, sepárelas con una coma.

  5. Una vez finalizado, haga clic en Save Config.

  6. Cuando se le solicite, actualice las cachés no válidas.

Sugerencias de ruta de plantilla

Las sugerencias de ruta de plantilla son una herramienta de diagnóstico que agrega notación con la ruta a cada plantilla que se utiliza en la página. Las sugerencias de ruta de plantilla se pueden habilitar para la tienda o para el administrador.

NOTE
Las sugerencias de ruta de plantillas solo se pueden editar en modo para desarrolladores.

Consulte Buscar plantillas, diseños y estilos{:target="_blank"} en la documentación para desarrolladores de Commerce.

Ejemplo de tienda - sugerencias de ruta de plantilla

Paso 1: Añadir su dirección IP a la lista de permitidos

Antes de usar sugerencias para las rutas de plantillas, agrega tu dirección IP a la lista de permitidos para evitar interferencias con los clientes que están comprando en la tienda. Cuando haya terminado, asegúrese de borrar la caché de Commerce para eliminar todas las sugerencias de la tienda.

Configuración avanzada: restricciones del cliente para desarrolladores

Paso 2: Habilitar sugerencias de ruta de plantilla

  1. En la barra lateral Admin, vaya a Stores > Settings>Configuration.

  2. En el panel izquierdo, expanda Advanced y elija Developer.

  3. Expanda Selector de expansión en la sección Debug y haga lo siguiente:

    Configuración avanzada: depurar {width="600" modal="regular"}

    • Para activar sugerencias de ruta de acceso de plantilla para el almacén, establezca Enabled Template Path Hints for Storefront en Yes.

    • Para habilitar sugerencias de ruta de acceso de plantilla para el almacén solo cuando la dirección URL incluya el parámetro templatehints, establezca Habilitar sugerencias para tienda con el parámetro de dirección URL en Yes. Luego establezca el valor del parámetro si es necesario. El valor predeterminado es magento, pero puede usar un valor personalizado. Por ejemplo, si cambia el valor a lorem, utilizaría mymagento.com?templatehints=lorem para mostrar sugerencias de plantilla.

    • Para activar sugerencias de ruta de acceso de plantilla para el administrador, establezca Enabled Template Path Hints for Admin en Yes.

    • Para incluir los nombres de los bloques, establezca Add Block Class Type to Hints en Yes.

  4. Una vez finalizado, haga clic en Save Config.

Paso 3: Borrar la caché

  1. En la barra lateral Admin, vaya a System > Tools>Cache Management.

  2. En la esquina superior derecha, haga clic en Flush Magento Cache.

Traducir en línea

Puede usar la herramienta Traducir en línea en modo de desarrollador para retocar texto en la interfaz y reflejar su voz y marca. Cuando se activa el modo Traducir en línea, cualquier texto de la página que se pueda editar se delineará en rojo. Es fácil editar las etiquetas de campo, los mensajes y otro texto que aparece en la tienda y en el administrador. Por ejemplo, muchos temas usan terminología como Mi cuenta, Mi lista de deseos y Mi tablero para ayudar a los clientes a encontrar el camino. Sin embargo, es posible que prefiera usar simplemente las palabras Cuenta, Lista de deseos y Tablero.

NOTE
La herramienta Traducir en línea solo está disponible cuando se trabaja en modo de desarrollador.

Consulte Resumen de traducciones en la documentación para desarrolladores de Commerce.

Ejemplo de tienda - texto traducible

Si su tienda está disponible en varios idiomas, puede realizar ajustes precisos en el texto traducido para la configuración regional. En el servidor, el texto de la interfaz se mantiene en un archivo CSV independiente para cada bloque de salida y se organiza según la configuración regional. Como alternativa, en lugar de usar la herramienta Traducir en línea, también puede editar los archivos CSV directamente en el servidor. Los archivos de traducción se almacenan en app/code/Magento/<module_name>/i18n/<language_locale>.csv.

NOTE
Para utilizar la herramienta Traducir en línea, el explorador debe permitir ventanas emergentes.

Paso 1: Deshabilitar cachés de salida

  1. En la barra lateral Admin, vaya a System > Tools>Cache Management.

  2. Seleccione las siguientes casillas de verificación:

    • Blocks HTML output
    • Page Cache
    • Translations

  3. Establezca el control Actions en Disable y haga clic en Submit.

Paso 2: Habilitar la herramienta Traducir en línea

  1. En la barra lateral Admin, vaya a Stores > Settings>Configuration.

  2. Para trabajar con una vista de tienda específica, configure Store View para que se actualice.

  3. En el panel izquierdo, expanda Advanced y elija Developer.

  4. Expanda Selector de expansión en la sección Translate Inline.

    Desactive la casilla de verificación Use Website según sea necesario para modificar esta configuración.

    La opción Enabled for Admin ​no está disponible al editar una vista de tienda específica.

    Configuración avanzada: traducir en línea {width="600" modal="regular"}

  5. Establezca Enabled for Storefront en Yes.

  6. Una vez finalizado, haga clic en Save Config.

  7. Cuando se le solicite, actualice las cachés no válidas, pero deje las cachés deshabilitadas tal y como están por ahora.

Paso 3: Actualizar el texto

  1. Abra la tienda en un navegador y vaya a la página que desee editar.

    Si es necesario, utilice el selector de idioma para cambiar la vista de la tienda. Cada cadena de texto que se puede traducir se destaca en rojo. Cuando pasa el ratón por encima de cualquier cuadro de texto, aparece un icono de libro ( Icono de libro ).

  2. Haga clic en el icono de libro para abrir la ventana Traducir y haga lo siguiente:

    • Si el cambio es para la vista de tienda específica, seleccione la casilla de verificación Store View Specific.

    • Escriba el nuevo texto de Custom.

  3. Una vez finalizado, haga clic en Submit.

    Escribir texto personalizado {width="700" modal="regular"}

  4. Para ver los cambios en la tienda, actualice el explorador.

  5. Repita este proceso para cualquier elemento del almacén que desee cambiar.

Paso 4: Restaurar la configuración original

  1. Vuelva al administrador de la tienda.

  2. En la barra lateral Admin, vaya a Stores > Settings>Configuration.

  3. Establezca Store View en la vista específica que se editó.

  4. En el panel izquierdo, expanda Advanced y elija Developer.

  5. Expanda Selector de expansión en la sección Translate Inline.

  6. Establezca Enabled for Frontend en No.

  7. Una vez finalizado, haga clic en Save Config.

  8. En la barra lateral Admin, vaya a System > Tools>Cache Management.

  9. Seleccione la casilla de verificación de las siguientes cachés de salida que estaban deshabilitadas anteriormente:

    • Blocks HTML output
    • Page Cache
    • Translations

  10. Establezca el control Actions en Enable y haga clic en Submit.

  11. Cuando se le solicite, actualice las cachés no válidas.

Paso 5: Verifica los cambios en tu tienda

Vaya a la tienda y examine todas las páginas que se actualizaron para asegurarse de que los cambios son correctos. En este ejemplo, Customer Login se cambió a Customer Sign In. Si se han realizado cambios en una vista específica, utilice el Selector de idioma para cambiar a la vista correcta.

Ejemplo de tienda - inicio de sesión de cliente traducido

recommendation-more-help
d3c62084-5181-43fb-bba6-1feb2fcc3ec1