DocumentaciónCommerceGuía de sistemas de administración

Herramientas para desarrolladores

Last update: Mon Nov 27 2023 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

La instancia de Adobe Commerce o de Magento Open Source se puede implementar para ejecutarse en producción o modo de desarrollador. Solo se puede acceder a las herramientas y a los ajustes de configuración diseñados específicamente para desarrolladores mientras se ejecuta la tienda 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 Definición del modo de funcionamiento en el Guía de configuración para obtener más información.

La mayoría de los temas de la documentación de 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 la 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 está disponible en Modo de desarrollador solo.

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

  1. En el Administrador barra lateral, vaya a Stores > Settings>Configuration.

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

  3. Expandir Selector de expansión el Front-end Development Workflow sección.

  4. Establecer Workflow Type a uno de los siguientes:

    • Client side less compilation - La compilación tiene lugar en el navegador utilizando el nativo less.js biblioteca.
    • Server side less compilation - La compilación tiene lugar en el servidor utilizando la biblioteca Less PHP. Este es el modo predeterminado para la producción.

  5. Cuando termine, 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 incluyen 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 los ajustes de configuración, consulte Configuración de archivo estático en el Referencia de configuración.

Para habilitar los archivos estáticos firmados:

  1. En el Administrador barra lateral, vaya a Stores > Settings>Configuration.

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

  3. Expandir Selector de expansión el Static Files Settings sección.

  4. Establecer Sign Static Files hasta Yes.

  5. Cuando termine, 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 se pueden optimizar en Modo de desarrollador solo.
Tipo de archivo
Operaciones compatibles
Archivos CSS
MergeMinify
Archivos JavaScript
MergeBundleMinify
Archivos de plantilla
Minify

Para optimizar los archivos de recursos:

  1. En el Administrador barra lateral, 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 el CSS Settings y haga lo siguiente:

    • Establecer Merge CSS Files hasta Yes.
    • Establecer Minify CSS Files hasta Yes.

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

Configuración de CSS

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

    • Establecer Merge JavaScript Files hasta Yes.
    • Establecer Minify JavaScript Files hasta Yes.

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

  2. Para minimizar los archivos de plantilla PHTML, expanda Selector de expansión el Template Settings sección y conjunto Minify Html hasta Yes.

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

  3. Cuando termine, haga clic en Save Config.

Restricciones de cliente

Antes de usar una herramienta como sugerencias de ruta de plantilla, asegúrese de añadir su dirección IP a la lista de permitidos Restricciones de cliente para desarrolladores para evitar interrumpir 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 de desarrollador se pueden establecer en Modo de desarrollador solo.

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

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

  1. En el Administrador barra lateral, vaya a Stores > Settings>Configuration.

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

  3. Expandir Selector de expansión el Developer Client Restrictions sección.

    Configuración avanzada: restricciones de cliente de desarrollador {width="600" modal="regular"}

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

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

  5. Cuando termine, 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 plantilla se pueden editar en modo de desarrollador solo.

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 de ruta de plantilla, agregue su dirección IP al lista de permitidos para evitar interferencias con los clientes que compran 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 de cliente de desarrollador

Paso 2: Habilitar sugerencias de ruta de plantilla

  1. En el Administrador barra lateral, vaya a Stores > Settings>Configuration.

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

  3. Expandir Selector de expansión el  Debug y haga lo siguiente:

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

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

    • Para habilitar sugerencias de ruta de plantilla para el almacén, solo cuando la dirección URL incluya templatehints parámetro, establecer Habilitar sugerencias para tienda con parámetro de URL hasta Yes. Luego establezca el valor del parámetro si es necesario. El valor predeterminado es magento, pero puede utilizar 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 plantilla para el administrador, establezca Enabled Template Path Hints for Admin hasta Yes.

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

  4. Cuando termine, haga clic en Save Config.

Paso 3: Borrar la caché

  1. En el Administrador barra lateral, vaya a System > Tools>Cache Management.

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

Traducir en línea

Puede utilizar 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 utilizan 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 enfoque alternativo, en lugar de utilizar la variable 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 el Administrador barra lateral, vaya a System > Tools>Cache Management.

  2. Seleccione las siguientes casillas de verificación:

    • Blocks HTML output
    • Page Cache
    • Translations

  3. Configure las variables Actions control a Disable y haga clic en Submit.

Paso 2: Habilitar la herramienta Traducir en línea

  1. En el Administrador barra lateral, vaya a Stores > Settings>Configuration.

  2. Para trabajar con una vista de tienda específica, establezca el Store View para actualizar.

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

  4. Expandir Selector de expansión el Translate Inline sección.

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

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

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

  5. Establecer Enabled for Storefront hasta Yes.

  6. Cuando termine, 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 ) aparece.

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

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

    • Introduzca el nuevo Custom texto.

  3. Cuando termine, haga clic en Submit.

    Introducir 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 el Administrador barra lateral, vaya a Stores > Settings>Configuration.

  3. Establecer Store View a la vista específica que se editó.

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

  5. Expandir Selector de expansión el Translate Inline sección.

  6. Establecer Enabled for Frontend hasta No.

  7. Cuando termine, haga clic en Save Config.

  8. En el Administrador barra lateral, 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. Configure las variables Actions control a 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