DocumentaçãoCommerceGuia de sistemas do administrador

Ferramentas do desenvolvedor

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

Criado para:

  • Iniciante
  • Intermediário
  • Administrador
  • Desenvolvedor

Use as ferramentas avançadas de desenvolvedor para determinar o modo de compilação durante o desenvolvimento de front-end, criar uma nova inclui na lista de permissões de endereços IP e exibir dicas de caminho de modelo. Também há ferramentas para fazer facilmente alterações pontuais no texto na interface da loja e do administrador.

Modos de operação

Sua instância Adobe Commerce ou Magento Open Source pode ser implantada para execução no modo de produção ou no modo de desenvolvedor. As ferramentas e definições de configuração criadas especificamente para desenvolvedores só podem ser acessadas enquanto o armazenamento estiver em execução no modo de desenvolvedor.

O modo de operação pode ser alterado somente a partir da linha de comando do servidor por um usuário com permissões apropriadas. Consulte Definir o modo de operação no Guia de Configuração para obter mais informações.

A maioria dos tópicos na documentação do comerciante se aplica a uma instância do Commerce em execução no modo de produção. No entanto, as definições e ferramentas de configuração a seguir podem ser usadas apenas quando a instalação estiver sendo executada no modo de desenvolvedor.

Fluxo de trabalho de desenvolvimento de front-end

O tipo de Fluxo de trabalho de desenvolvimento de front-end determina se ocorre Menos compilação no lado do cliente ou do servidor durante o desenvolvimento. Menos é uma extensão do CSS que tem recursos e convenções adicionais e que produz código simplificado. Compilação menor do lado do cliente é recomendada para o desenvolvimento de temas. A compilação do lado do servidor é o modo padrão. As opções de fluxo de trabalho de desenvolvimento não estão disponíveis para lojas no modo de produção.
Consulte Compilação MENOS do lado do cliente vs. do lado do servidor{:target="_blank"} na documentação do desenvolvedor do Commerce.

NOTE
A configuração do fluxo de trabalho de desenvolvimento de front-end está disponível somente no Modo de desenvolvedor.

Configuração avançada - fluxo de trabalho de desenvolvimento de front-end

  1. Na barra lateral Admin, vá para Stores > Settings>Configuration.

  2. No painel esquerdo, expanda Advanced e escolha Developer.

  3. Expandir Seletor de expansão a seção Front-end Development Workflow.

  4. Defina Workflow Type como um dos seguintes:

    • Client side less compilation - A compilação ocorre no navegador usando a biblioteca nativa less.js.
    • Server side less compilation - A compilação ocorre no servidor usando a biblioteca PHP Less. Esse é o modo padrão para produção.

  5. Quando terminar, clique em Save Config.

Assinaturas de arquivos estáticos

Adicionar uma assinatura digital ao URL de arquivos estáticos permite que os navegadores detectem quando uma versão mais recente do arquivo estiver disponível. Os arquivos estáticos que podem ser rastreados com assinaturas digitais incluem JavaScript, CSS, imagens e fontes. A assinatura é anexada ao caminho diretamente após o URL base. Se a assinatura de um arquivo for diferente do que está armazenado no cache do navegador, a versão mais recente do arquivo será usada.

Consulte Assinatura de conteúdo estático{:target="_blank"} na documentação do desenvolvedor do Commerce.

NOTE
A configuração de Configurações de Arquivo Estático está disponível somente ao trabalhar no modo de desenvolvedor.

Configuração avançada - configurações de arquivos estáticos

Para obter uma lista detalhada das definições de configuração, consulte Configurações do Arquivo Estático na Referência de Configuração.

Para habilitar arquivos estáticos assinados:

  1. Na barra lateral Admin, vá para Stores > Settings>Configuration.

  2. No painel esquerdo, expanda Advanced e escolha Developer.

  3. Expandir Seletor de expansão a seção Static Files Settings.

  4. Defina Sign Static Files como Yes.

  5. Quando terminar, clique em Save Config.

Otimização do arquivo de recurso

O tempo necessário para carregar arquivos de recursos pode ser reduzido com a mesclagem e o agrupamento de arquivos, além de minimizar o código.

  • A mesclagem combina arquivos separados do mesmo tipo em um único arquivo.
  • O agrupamento é uma técnica que agrupa arquivos separados para reduzir o número de solicitações HTTP necessárias para carregar uma página.
  • A minificação remove espaços, quebras de linha e comentários, mas não afeta a funcionalidade do código. Como os arquivos minimizados não podem ser editados, o processo deve ser aplicado somente quando você estiver pronto para entrar em produção.

Por padrão, o Adobe Commerce e o Magento Open Source não mesclam, agrupam ou minimizam arquivos, e o desenvolvedor do projeto deve determinar quais métodos de otimização de arquivo devem ser usados.

Consulte Práticas recomendadas de desempenho para obter mais informações.

NOTE
Arquivos CSS e JavaScript podem ser otimizados somente no Modo de Desenvolvedor.
Tipo de arquivo
Operações suportadas
Arquivos CSS
MergeMinify
Arquivos JavaScript
MergeBundleMinify
Arquivos de modelo
Minify

Para otimizar arquivos de recursos:

  1. Na barra lateral Admin, vá para Stores > Settings>Configuration.

  2. No painel esquerdo, expanda Advanced e escolha Developer.

  3. Para otimizar arquivos CSS, expanda Seletor de expansão a seção CSS Settings e faça o seguinte:

    • Defina Merge CSS Files como Yes.
    • Defina Minify CSS Files como Yes.

    Configuração avançada - Configurações de CSS {width="600" modal="regular"}

Configurações CSS

  1. Para otimizar arquivos JavaScript, expanda Seletor de expansão a seção JavaScript Settings e faça o seguinte:

    • Defina Merge JavaScript Files como Yes.
    • Defina Minify JavaScript Files como Yes.

    Configuração avançada - Configurações do JavaScript {width="600" modal="regular"}

  2. Para minificar arquivos de modelo PHTML, expanda Seletor de expansão a seção Template Settings e defina Minify Html como Yes.

    Configuração avançada - configurações do modelo {width="600" modal="regular"}

  3. Quando terminar, clique em Save Config.

Restrições do cliente

Antes de usar uma ferramenta como dicas de caminho de modelo, adicione seu endereço IP à inclui na lista de permissões de Restrições de Cliente de Desenvolvedor para evitar interromper a experiência de compra dos clientes na loja. Se você não souber seu endereço IP, poderá pesquisá-lo online.

NOTE
As Restrições de Cliente de Desenvolvedor podem ser definidas somente no Modo de Desenvolvedor.

Para obter informações técnicas, consulte VCL personalizado para permitir solicitações no Guia do Commerce na Infraestrutura da Nuvem.

incluir na lista de permissões Para adicionar seu endereço IP ao arquivo:

  1. Na barra lateral Admin, vá para Stores > Settings>Configuration.

  2. No painel esquerdo, expanda Advanced e escolha Developer.

  3. Expandir Seletor de expansão a seção Developer Client Restrictions.

    Configuração avançada - restrições de cliente desenvolvedor {width="600" modal="regular"}

  4. Para Allow IPs, digite seu endereço IP.

    Se o acesso for necessário a partir de vários endereços IP, separe cada um com uma vírgula.

  5. Quando terminar, clique em Save Config.

  6. Quando solicitado, atualize todos os caches inválidos.

Dicas de caminho do modelo

As dicas do caminho de modelo são uma ferramenta de diagnóstico que adiciona uma notação ao caminho para cada modelo usado na página. As dicas do caminho do modelo podem ser habilitadas para a loja ou para o administrador.

NOTE
As Dicas de Caminho do Modelo podem ser editadas somente no modo de desenvolvedor.

Consulte Localizar modelos, layouts e estilos{:target="_blank"} na documentação do desenvolvedor do Commerce.

Exemplo de vitrine - dicas do caminho do modelo

Etapa 1: adicionar o endereço IP ao arquivo de inclui na lista de permissões

Antes de usar as dicas do caminho de modelo, adicione seu endereço IP ao incluir na lista de permissões para evitar interferência com os clientes que estão fazendo compras na loja. Quando terminar, limpe o cache do Commerce para remover todas as dicas do armazenamento.

Configuração avançada - restrições de cliente desenvolvedor

Etapa 2: ativar dicas de caminho do modelo

  1. Na barra lateral Admin, vá para Stores > Settings>Configuration.

  2. No painel esquerdo, expanda Advanced e escolha Developer.

  3. Expanda Seletor de expansão a seção Debug e faça o seguinte:

    Configuração avançada - depurar {width="600" modal="regular"}

    • Para ativar as dicas de caminho de modelo para o armazenamento, defina Enabled Template Path Hints for Storefront como Yes.

    • Para habilitar dicas de caminho de modelo para o repositório somente quando a URL inclui o parâmetro templatehints, defina Habilitar Dicas para Storefront com o Parâmetro de URL para Yes. Em seguida, defina o valor do parâmetro, se necessário. O valor padrão é magento, mas você pode usar um valor personalizado. Por exemplo, se você alterar o valor para lorem, você usaria mymagento.com?templatehints=lorem para exibir dicas de modelo.

    • Para ativar as dicas de caminho de modelo para o Administrador, defina Enabled Template Path Hints for Admin como Yes.

    • Para incluir os nomes dos blocos, defina Add Block Class Type to Hints como Yes.

  4. Quando terminar, clique em Save Config.

Etapa 3: limpar o cache

  1. Na barra lateral Admin, vá para System > Tools>Cache Management.

  2. No canto superior direito, clique em Flush Magento Cache.

Converter em linha

Você pode usar a ferramenta Traduzir em linha no modo de desenvolvedor para retocar o texto na interface e refletir sua voz e marca. Quando o modo Traduzir em linha está ativado, qualquer texto na página que pode ser editado é contornado em vermelho. É fácil editar rótulos de campo, mensagens e outros textos que são exibidos na loja e no Administrador. Por exemplo, muitos temas usam terminologia como Minha conta, Minha lista de desejos e Meu painel para ajudar os clientes a encontrar uma solução. No entanto, você pode simplesmente usar as palavras Conta, Lista de desejos e Painel.

NOTE
A ferramenta Traduzir em Linha está disponível somente ao trabalhar no modo de desenvolvedor.

Consulte Visão geral das traduções na documentação do desenvolvedor do Commerce.

Exemplo de vitrine - texto traduzível

Se a loja estiver disponível em vários idiomas, você poderá fazer ajustes no texto traduzido para a localidade. No servidor, o texto da interface é mantido em um arquivo CSV separado para cada bloco de saída e é organizado por localidade. Como uma abordagem alternativa, em vez de usar a ferramenta Traduzir em linha, você também pode editar os arquivos CSV diretamente no servidor. Os arquivos de tradução são armazenados em app/code/Magento/<module_name>/i18n/<language_locale>.csv.

NOTE
Para usar a ferramenta Traduzir em linha, o navegador deve permitir pop-ups.

Etapa 1: Desativar caches de saída

  1. Na barra lateral Admin, vá para System > Tools>Cache Management.

  2. Marque as seguintes caixas de seleção:

    • Blocks HTML output
    • Page Cache
    • Translations

  3. Defina o controle Actions como Disable e clique em Submit.

Etapa 2: ativar a ferramenta Traduzir em linha

  1. Na barra lateral Admin, vá para Stores > Settings>Configuration.

  2. Para trabalhar com um modo de exibição de loja específico, defina a Store View a ser atualizada.

  3. No painel esquerdo, expanda Advanced e escolha Developer.

  4. Expandir Seletor de expansão a seção Translate Inline.

    Desmarque a caixa de seleção Use Website conforme necessário para modificar essas configurações.

    A opção Enabled for Admin ​não está disponível ao editar um modo de exibição de loja específico.

    Configuração avançada - traduzir em linha {width="600" modal="regular"}

  5. Defina Enabled for Storefront como Yes.

  6. Quando terminar, clique em Save Config.

  7. Quando solicitado, atualize os caches inválidos, mas deixe os caches desativados como estão por enquanto.

Etapa 3: atualizar o texto

  1. Abra a vitrine em um navegador e vá para a página que deseja editar.

    Se necessário, use o seletor de idioma para alterar a exibição da loja. Cada cadeia de texto que pode ser traduzida é contornada em vermelho. Quando você passa o mouse sobre qualquer caixa de texto, um ícone de livro ( Ícone de livro ) é exibido.

  2. Clique no ícone de livro para abrir a janela Traduzir e faça o seguinte:

    • Se a alteração for para o modo de exibição de loja específico, marque a caixa de seleção Store View Specific.

    • Insira o novo texto Custom.

  3. Quando terminar, clique em Submit.

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

  4. Para ver as alterações no armazenamento, atualize o navegador.

  5. Repita esse processo para que todos os elementos no armazenamento sejam alterados.

Etapa 4: restaurar as configurações originais

  1. Retorne ao administrador da sua loja.

  2. Na barra lateral Admin, vá para Stores > Settings>Configuration.

  3. Defina Store View para a exibição específica que foi editada.

  4. No painel esquerdo, expanda Advanced e escolha Developer.

  5. Expandir Seletor de expansão a seção Translate Inline.

  6. Defina Enabled for Frontend como No.

  7. Quando terminar, clique em Save Config.

  8. Na barra lateral Admin, vá para System > Tools>Cache Management.

  9. Marque a caixa de seleção dos seguintes caches de saída que foram desabilitados anteriormente:

    • Blocks HTML output
    • Page Cache
    • Translations

  10. Defina o controle Actions como Enable e clique em Submit.

  11. Quando solicitado, atualize todos os caches inválidos.

Etapa 5: verificar as alterações em seu armazenamento

Vá para a loja e examine cada página atualizada para verificar se as alterações estão corretas. Neste exemplo, Customer Login foi alterado para Customer Sign In. Se foram feitas alterações em uma exibição específica, use o Seletor de idioma para alternar para a exibição correta.

Exemplo de vitrine - entrada traduzida do cliente

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