DocumentationCommerceGuide des systèmes d’administration

[PaaS uniquement]{class="badge informative" title="S’applique uniquement aux projets Adobe Commerce on Cloud (infrastructure PaaS gérée par Adobe) et aux projets On-premise."}

Outils de développement

Last update: Thu May 29 2025 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Rubriques :

Créé pour :

  • Débutant
  • Intermédiaire
  • Administration
  • Développeur

Utilisez les outils de développement avancés pour déterminer le mode de compilation lors du développement front-end, créer une liste autorisée d’adresses IP et afficher des indications de chemin d’accès au modèle. Il existe également des outils permettant d’apporter facilement des modifications ponctuelles au texte dans l’interface du storefront et de l’administrateur.

Modes de fonctionnement

Votre instance Adobe Commerce ou Magento Open Source peut être déployée pour s’exécuter en mode de production ou mode développeur. Les outils et paramètres de configuration conçus spécifiquement pour les développeurs ne sont accessibles que lorsque le magasin est en cours d’exécution en mode développeur.

Le mode de fonctionnement ne peut être modifié qu’à partir de la ligne de commande du serveur par un utilisateur disposant des autorisations appropriées. Voir Définir le mode de fonctionnement dans le Guide de configuration pour plus d’informations.

La plupart des rubriques de la documentation pour les commerçants s’appliquent à une instance Commerce exécutée en mode de production. Toutefois, les paramètres de configuration et outils suivants ne peuvent être utilisés que lorsque l’installation est en cours d’exécution en mode Développeur.

Workflow de développement front-end

Le type de workflow de développement front-end détermine si la compilation Less a lieu côté client ou serveur au cours du développement. Less est une extension de CSS qui comporte des fonctionnalités et des conventions supplémentaires et qui produit du code rationalisé. Une compilation Less côté client est recommandée pour le développement de thèmes. La compilation côté serveur est le mode par défaut. Les options du workflow de développement ne sont pas disponibles pour les magasins en mode de production.
Voir Compilation LESS côté client ou côté serveur dans la documentation destinée aux développeurs et développeuses de Commerce.

NOTE
La configuration du workflow de développement front-end est disponible uniquement en mode Développeur.

Configuration avancée - Workflow de développement front-end {width="600" modal="regular"}

  1. Dans la barre latérale Admin, accédez à Stores > Settings>Configuration.

  2. Dans le panneau de gauche, développez Advanced et choisissez Developer.

  3. Développez Sélecteur d’extension la section Front-end Development Workflow .

  4. Définissez Workflow Type sur l’une des options suivantes :

    • Client side less compilation - La compilation a lieu dans le navigateur à l’aide de la bibliothèque less.js native.
    • Server side less compilation - La compilation a lieu sur le serveur en utilisant la bibliothèque Less PHP. Il s’agit du mode par défaut pour la production.

  5. Cliquez ensuite sur Save Config.

Signatures de fichiers statiques

L’ajout d’une signature numérique à l’URL des fichiers statiques permet aux navigateurs de détecter lorsqu’une version plus récente du fichier est disponible. Les fichiers statiques qui peuvent être suivis à l’aide de signatures numériques comprennent les fichiers JavaScript, CSS, images et polices. La signature est ajoutée au chemin d’accès directement après l’URL de base. Si la signature d’un fichier diffère de celle stockée dans le cache du navigateur, la version la plus récente du fichier est utilisée.

Voir Signature de contenu statique dans la documentation destinée aux développeurs de Commerce.

NOTE
La configuration Paramètres de fichier statique est disponible uniquement lorsque vous travaillez en mode développeur.

Configuration avancée - Paramètres des fichiers statiques {width="600" modal="regular"}

Pour obtenir la liste détaillée des paramètres de configuration, voir Paramètres de fichier statique dans le Référence de configuration.

Pour activer les fichiers statiques signés :

  1. Dans la barre latérale Admin, accédez à Stores > Settings>Configuration.

  2. Dans le panneau de gauche, développez Advanced et choisissez Developer.

  3. Développez Sélecteur d’extension la section Static Files Settings .

  4. Définissez Sign Static Files sur Yes.

  5. Cliquez ensuite sur Save Config.

Optimisation des fichiers de ressources

Le temps de chargement des fichiers de ressources peut être réduit en fusionnant et en regroupant les fichiers, ainsi qu’en réduisant le code.

  • La fusion combine des fichiers distincts du même type en un seul fichier.
  • Le regroupement est une technique qui permet de regrouper des fichiers distincts afin de réduire le nombre de requêtes HTTP requises pour charger une page.
  • La minimisation supprime les espaces, les sauts de ligne et les commentaires, mais n’affecte pas les fonctionnalités du code. Comme les fichiers réduits ne peuvent pas être modifiés, le processus ne doit être appliqué que lorsque vous êtes prêt à passer en production.

Par défaut, Adobe Commerce et Magento Open Source ne fusionnent pas, ne regroupent pas ou ne réduisent pas au minimum les fichiers. Le développeur du projet doit déterminer les méthodes d’optimisation des fichiers à utiliser.

Pour plus d’informations, consultez Bonnes pratiques relatives aux performances.

NOTE
Les fichiers CSS et JavaScript ne peuvent être optimisés qu’en mode Développeur.
Type de fichier
Opérations prises en charge
Fichiers CSS
MergeMinify
Fichiers JavaScript
MergeBundleMinify
Fichiers de modèle
Minify

Pour optimiser les fichiers de ressources, procédez comme suit

  1. Dans la barre latérale Admin, accédez à Stores > Settings>Configuration.

  2. Dans le panneau de gauche, développez Advanced et choisissez Developer.

  3. Pour optimiser les fichiers CSS, développez Sélecteur d’extension dans la section CSS Settings et procédez comme suit :

    • Définissez Merge CSS Files sur Yes.
    • Définissez Minify CSS Files sur Yes.

    Configuration avancée - Paramètres CSS {width="600" modal="regular"}

Paramètres CSS

  1. Pour optimiser les fichiers JavaScript, développez Sélecteur d’extension dans la section JavaScript Settings et procédez comme suit :

    • Définissez Merge JavaScript Files sur Yes.
    • Définissez Minify JavaScript Files sur Yes.

    Configuration avancée - Paramètres JavaScript {width="600" modal="regular"}

  2. Pour réduire les fichiers de modèle PHTML, développez Sélecteur d’extension la section Template Settings et définissez Minify Html sur Yes.

    Configuration avancée - Paramètres du modèle {width="600" modal="regular"}

  3. Cliquez ensuite sur Save Config.

Restrictions du client

Placer sur la liste autorisée Avant d’utiliser un outil tel que conseils de chemin d’accès pour les modèles, veillez à ajouter votre adresse IP aux restrictions pour les développeurs et les clientes et développeuses, afin de ne pas perturber l’expérience d’achat des clients et clientes de la boutique. Si vous ne connaissez pas votre adresse IP, vous pouvez la rechercher en ligne.

NOTE
Les restrictions client pour les développeurs peuvent être définies en mode Développeur uniquement.

Pour obtenir des informations techniques, consultez Custom VCL for allow requests dans le guide Commerce on Cloud Infrastructure.

Pour ajouter votre adresse IP à la liste autorisée :

  1. Dans la barre latérale Admin, accédez à Stores > Settings>Configuration.

  2. Dans le panneau de gauche, développez Advanced et choisissez Developer.

  3. Développez Sélecteur d’extension la section Developer Client Restrictions .

    Configuration avancée - Restrictions du client développeur {width="600" modal="regular"}

  4. Par Allow IPs, saisissez votre adresse IP.

    Si l’accès est nécessaire pour plusieurs adresses IP, séparez-les par une virgule.

  5. Cliquez ensuite sur Save Config.

  6. Lorsque vous y êtes invité, actualisez tous les caches non valides.

Indications de chemin du modèle

Les indications de chemin du modèle sont un outil de diagnostic qui ajoute une notation avec le chemin d’accès à chaque modèle utilisé sur la page. Les indications de chemin d’accès du modèle peuvent être activées pour le storefront ou l’administrateur.

NOTE
Les Template Path Hints peuvent être modifiés en mode développeur uniquement.

Voir Rechercher des modèles, des mises en page et des styles dans la documentation destinée aux développeurs de Commerce.

Exemple de storefront - conseils sur le chemin d’accès du modèle {width="700" modal="regular"}

Étape 1 : ajouter votre adresse IP à la place sur la liste autorisée

Avant d’utiliser les indications de chemin d’accès du modèle, ajoutez votre adresse IP à la liste autoriséeafin d’éviter toute interférence avec les clients qui font leurs achats dans le magasin. Lorsque vous avez terminé, veillez à effacer le cache de Commerce pour supprimer toutes les indications du magasin.

Configuration avancée - Restrictions du client développeur {width="600" modal="regular"}

Étape 2 : activer les indications de chemin d’accès du modèle

  1. Dans la barre latérale Admin, accédez à Stores > Settings>Configuration.

  2. Dans le panneau de gauche, développez Advanced et choisissez Developer.

  3. Développez Sélecteur d’extension la section Debug et procédez comme suit :

    Configuration avancée - Débogage {width="600" modal="regular"}

    • Pour activer les indications de chemin d’accès du modèle pour le magasin, définissez Enabled Template Path Hints for Storefront sur Yes.

    • Pour activer les indications de chemin d’accès du modèle pour le magasin uniquement lorsque l’URL inclut le paramètre templatehints, définissez Activer les indications pour Storefront avec le paramètre d’URL sur Yes. Définissez ensuite la valeur du paramètre si nécessaire. La valeur par défaut est magento, mais vous pouvez utiliser une valeur personnalisée. Par exemple, si vous définissez la valeur sur lorem, vous utiliserez mymagento.com?templatehints=lorem pour afficher des conseils sur les modèles.

    • Pour activer les indications de chemin du modèle pour l’administrateur, définissez Enabled Template Path Hints for Admin sur Yes.

    • Pour inclure les noms des blocs, définissez Add Block Class Type to Hints sur Yes.

  4. Cliquez ensuite sur Save Config.

Étape 3 : vider le cache

  1. Dans la barre latérale Admin, accédez à System > Tools>Cache Management.

  2. Dans le coin supérieur droit, cliquez sur Flush Magento Cache.

Traduire en ligne

Vous pouvez utiliser l’outil Traduire en ligne en mode développeur pour retoucher le texte de l’interface afin de refléter votre voix et votre marque. Lorsque le mode Traduire en ligne est activé, tout texte de la page qui peut être modifié est signalé en rouge. Il est facile de modifier les libellés des champs, les messages et tout autre texte qui apparaît dans le storefront et l’admin. Par exemple, de nombreux thèmes utilisent une terminologie telle que Mon compte, Ma liste de souhaits et Mon tableau de bord pour aider les clients à trouver leur chemin. Cependant, vous pouvez préférer simplement utiliser les mots Compte, Liste de souhaits et Tableau de bord.

NOTE
L’outil Traduire en ligne est disponible uniquement lorsque vous travaillez en mode Développeur.

Voir Présentation des traductions dans la documentation destinée aux développeurs de Commerce.

Exemple de storefront - texte traduisible {width="700" modal="regular"}

Si votre boutique est disponible dans plusieurs langues, vous pouvez apporter des ajustements précis au texte traduit pour le paramètre régional. Sur le serveur , le texte de l’interface est conservé dans un fichier CSV distinct pour chaque bloc de sortie et est organisé par paramètre régional. Plutôt que d’utiliser l’outil Traduire en ligne, vous pouvez également modifier les fichiers CSV directement sur le serveur. Les fichiers de traduction sont stockés dans app/code/Magento/<module_name>/i18n/<language_locale>.csv.

NOTE
Pour utiliser l’outil Traduire en ligne , votre navigateur doit autoriser les pop-ups.

Étape 1 : désactiver les caches de sortie

  1. Dans la barre latérale Admin, accédez à System > Tools>Cache Management.

  2. Cochez les cases suivantes :

    • Blocks HTML output
    • Page Cache
    • Translations

  3. Définissez la commande Actions sur Disable, puis cliquez sur Submit.

Étape 2 : activer l’outil Traduire en ligne

  1. Dans la barre latérale Admin, accédez à Stores > Settings>Configuration.

  2. Pour utiliser une vue de magasin spécifique, définissez la Store View à mettre à jour.

  3. Dans le panneau de gauche, développez Advanced et choisissez Developer.

  4. Développez Sélecteur d’extension la section Translate Inline .

    Décochez la case Use Website selon les besoins pour modifier ces paramètres.

    L’option Enabled for Admin ​n’est pas disponible lors de la modification d’une vue de magasin spécifique.

    Configuration avancée - Traduire en ligne {width="600" modal="regular"}

  5. Définissez Enabled for Storefront sur Yes.

  6. Cliquez ensuite sur Save Config.

  7. Lorsque vous y êtes invité, actualisez les caches non valides, mais laissez les caches désactivés tels quels pour l’instant.

Étape 3 : mettre à jour le texte

  1. Ouvrez votre storefront dans un navigateur et accédez à la page à modifier.

    Si nécessaire, utilisez le sélecteur de langues pour modifier la vue du magasin. Chaque chaîne de texte traduisible est entourée en rouge. Lorsque vous pointez sur une zone de texte, une icône de livre ( icône de livre ) s’affiche.

  2. Cliquez sur l’icône représentant un livre pour ouvrir la fenêtre Traduire et procédez comme suit :

    • Si la modification concerne l’affichage spécifique du magasin, cochez la case Store View Specific .

    • Saisissez le nouveau texte de Custom.

  3. Cliquez ensuite sur Submit.

    Saisir du texte personnalisé {width="700" modal="regular"}

  4. Pour afficher vos modifications dans le magasin, actualisez le navigateur.

  5. Répétez ce processus pour tous les éléments du magasin à modifier.

Étape 4 : Restaurer les paramètres d'origine

  1. Revenez à l’administration de votre boutique.

  2. Dans la barre latérale Admin, accédez à Stores > Settings>Configuration.

  3. Définissez Store View sur la vue spécifique qui a été modifiée.

  4. Dans le panneau de gauche, développez Advanced et choisissez Developer.

  5. Développez Sélecteur d’extension la section Translate Inline .

  6. Définissez Enabled for Frontend sur No.

  7. Cliquez ensuite sur Save Config.

  8. Dans la barre latérale Admin, accédez à System > Tools>Cache Management.

  9. Cochez la case des caches de sortie suivants qui ont été précédemment désactivés :

    • Blocks HTML output
    • Page Cache
    • Translations

  10. Définissez la commande Actions sur Enable, puis cliquez sur Submit.

  11. Lorsque vous y êtes invité, actualisez tous les caches non valides.

Étape 5 : vérifier les modifications dans votre boutique

Accédez à votre storefront et examinez chaque page mise à jour pour vous assurer que les modifications sont correctes. Dans cet exemple, Customer Login a été remplacé par Customer Sign In. Si des modifications ont été apportées à une vue spécifique, utilisez le sélecteur de langues pour passer à la vue appropriée.

Exemple de storefront - connexion client traduite {width="700" modal="regular"}

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