Alterar estilo dos Componentes principais da CIF do AEM style-aem-cif-core-components

O Projeto CIF Venia é uma base de código de referência para o uso de Componentes principais do CIF. Neste tutorial, você inspeciona o projeto de referência Venia e entende como o CSS e o JavaScript usados pelos componentes principais CIF do AEM são organizados. Você também criará um estilo usando CSS para atualizar o estilo padrão do componente Teaser do produto.

TIP
Use o Arquétipo de projeto do AEM ao iniciar sua própria implementação comercial.

O que você vai criar

Neste tutorial, um novo estilo é implementado para o Teaser do produto que se assemelha a um cartão. As lições aprendidas no tutorial podem ser aplicadas a outros Componentes principais do CIF.

O que você vai criar

Pré-requisitos prerequisites

Um ambiente de desenvolvimento local é necessário para concluir este tutorial. Isso inclui uma instância do AEM em execução que está configurada e conectada a uma instância do Adobe Commerce. Revise os requisitos e as etapas para configurar um desenvolvimento local com AEM.

Clonar o projeto Venia clone-venia-project

Clonizamos o Projeto Venia e substituímos os estilos padrão.

NOTE
Você pode usar um projeto existente (baseado no Arquétipo de Projeto AEM com CIF incluído) e ignorar esta seção.
  1. Execute o seguinte comando git para clonar o projeto:

    code language-shell
    $ git clone git@github.com:adobe/aem-cif-guides-venia.git
    
  2. Crie e implante o projeto em uma instância local do AEM:

    code language-shell
    $ cd aem-cif-guides-venia/
    $ mvn clean install -PautoInstallPackage,cloud
    
  3. Adicione as configurações OSGi necessárias para conectar a instância do AEM a uma instância do Adobe Commerce ou adicione as configurações ao projeto recém-criado.

  4. Neste ponto, você deve ter uma versão funcional de uma loja conectada a uma instância do Adobe Commerce. Navegue até a página US > Home em: http://localhost:4502/editor.html/content/venia/us/en.html.

    Você verá que a loja está usando o tema Venia. Ao expandir o Menu principal da loja, você verá várias categorias, indicando que a conexão com o Adobe Commerce está funcionando.

    Loja configurada com o tema Venia

Bibliotecas de clientes e módulo ui.frontend introduction-to-client-libraries

O CSS e o JavaScript responsáveis pela renderização de temas/estilos da loja são gerenciados no AEM por uma biblioteca do cliente ou, abreviando, clientlibs. As bibliotecas de clientes fornecem um mecanismo para organizar o CSS e o JavaScript no código de um projeto e, em seguida, na página.

AEM Estilos específicos da marca podem ser aplicados aos Componentes principais do CIF adicionando e substituindo o CSS gerenciado por essas bibliotecas de clientes. Entender como as bibliotecas de clientes são estruturadas e incluídas na página é essencial.

O ui.frontend é um webpack dedicado para gerenciar todos os ativos de front-end de um projeto. Isso permite que desenvolvedores de front-end usem qualquer número de linguagens e tecnologias como TypeScript, Sass e muito mais.

O módulo ui.frontend também é um módulo Maven e integrado ao projeto maior usando um módulo NPM, o aem-clientlib-generator. Durante uma compilação, o aem-clientlib-generator copia os arquivos CSS e JavaScript compilados para uma biblioteca do cliente no módulo ui.apps.

Ui.frontend para a arquitetura ui.apps

O CSS e o JavaScript compilados são copiados do módulo ui.frontend para o módulo ui.apps como uma biblioteca do cliente durante uma compilação Maven

Atualizar o estilo do teaser ui-frontend-module

Em seguida, faça uma pequena alteração no estilo Teaser para ver como o módulo ui.frontend e as bibliotecas de clientes funcionam. Use o IDE de sua escolha para importar o projeto Venia. As capturas de tela usadas são do Visual Studio Code IDE.

  1. Navegue e expanda o módulo ui.frontend e expanda a hierarquia de pastas para: ui.frontend/src/main/styles/commerce:

    pasta de comércio ui.frontend

    Observe que há vários arquivos Sass (.scss) abaixo da pasta. Esses são os estilos específicos do Commerce para cada um dos componentes do Commerce.

  2. Abra o arquivo _productteaser.scss.

  3. Atualize a regra .item__image e modifique a regra de borda:

    code language-scss
    .item__image {
        border: #ea00ff 8px solid; /* <-- modify this rule */
        display: block;
        grid-area: main;
        height: auto;
        opacity: 1;
        transition-duration: 512ms;
        transition-property: opacity, visibility;
        transition-timing-function: ease-out;
        visibility: visible;
        width: 100%;
    }
    

    A regra acima deve adicionar uma borda rosa forte ao Teaser do produto.

  4. Abra uma nova janela de terminal e navegue até a pasta ui.frontend:

    code language-shell
    $ cd <project-location>/aem-cif-guides-venia/ui.frontend
    
  5. Execute o seguinte comando Maven:

    code language-shell
    $ mvn clean install
    ...
    [INFO] ------------------------------------------------------------------------
    [INFO] BUILD SUCCESS
    [INFO] ------------------------------------------------------------------------
    [INFO] Total time:  29.497 s
    [INFO] Finished at: 2020-08-25T14:30:44-07:00
    [INFO] ------------------------------------------------------------------------
    

    Inspect a saída do terminal. Você pode ver que o comando Maven executou vários scripts NPM, incluindo npm run build. O comando npm run build é definido no arquivo package.json e tem o efeito de compilar o projeto do webpack e acionar a geração da biblioteca do cliente.

  6. Inspect o arquivo ui.frontend/dist/clientlib-site/site.css:

    CSS do Site Compilado

    O arquivo é a versão compilada e minificada de todos os arquivos Sass no projeto.

    note note
    NOTE
    Arquivos como esse são ignorados do controle do código-fonte, pois devem ser gerados durante o tempo de compilação.
  7. Inspect o arquivo ui.frontend/clientlib.config.js.

    code language-js
    /* clientlib.config.js*/
    ...
    // Config for `aem-clientlib-generator`
    module.exports = {
        context: BUILD_DIR,
        clientLibRoot: CLIENTLIB_DIR,
        libs: [
            {
                ...libsBaseConfig,
                name: 'clientlib-site',
                categories: ['venia.site'],
                dependencies: ['venia.dependencies', 'aem-core-cif-react-components'],
                assets: {
    ...
    

    Este é o arquivo de configuração para aem-clientlib-generator e determina onde e como o CSS compilado e o JavaScript serão transformados em uma biblioteca cliente AEM.

  8. No módulo ui.apps, inspecione o arquivo: ui.apps/src/main/content/jcr_root/apps/venia/clientlibs/clientlib-site/css/site.css:

    CSS do Site compilado em ui.apps

    Isso copia o arquivo site.css no projeto ui.apps. Agora ele faz parte de uma biblioteca de cliente chamada clientlib-site com uma categoria de venia.site. Quando o arquivo fizer parte do módulo ui.apps, ele poderá ser implantado no AEM.

    note note
    NOTE
    Arquivos como esse também são ignorados do controle do código-fonte, pois devem ser gerados durante o tempo de compilação.
  9. Em seguida, verifique as outras bibliotecas de clientes geradas pelo projeto:

    Outras bibliotecas de clientes

    Essas bibliotecas de clientes não são gerenciadas pelo módulo ui.frontend. Em vez disso, essas bibliotecas de clientes incluem dependências de CSS e JavaScript fornecidas pelo Adobe. A definição dessas bibliotecas de clientes está no arquivo .content.xml abaixo de cada pasta.

    clientlib-base - Esta é uma biblioteca do cliente vazia que simplesmente incorpora as dependências necessárias dos Componentes principais do AEM. A categoria é venia.base.

    clientlib-cif - Esta também é uma biblioteca do cliente vazia que simplesmente incorpora as dependências necessárias dos Componentes principais CIF do AEM. A categoria é venia.cif.

    clientlib-grid - Isso inclui o CSS necessário para habilitar o recurso de Grade Responsiva do AEM. O uso da grade AEM habilita o Modo de layout no Editor AEM e oferece aos autores de conteúdo a capacidade de redimensionar componentes. A categoria é venia.grid e está incorporada na biblioteca venia.base.

  10. Inspect os arquivos customheaderlibs.html e customfooterlibs.html abaixo de ui.apps/src/main/content/jcr_root/apps/venia/components/page:

    Scripts personalizados de cabeçalho e rodapé

    Esses scripts incluem as bibliotecas venia.base e venia.cif como parte de todas as páginas.

    note note
    NOTE
    Somente as bibliotecas base são "codificadas" como parte dos scripts da página. venia.site não está incluído nesses arquivos e, em vez disso, foi incluído como parte do modelo da página para maior flexibilidade. Isso é inspecionado posteriormente.
  11. No terminal, crie e implante todo o projeto em uma instância local do AEM:

    code language-shell
    $ cd aem-cif-guides-venia/
    $ mvn clean install -PautoInstallPackage,cloud
    

Criar um Teaser do produto author-product-teaser

Agora que as atualizações de código foram implantadas, adicione uma nova instância do Teaser do produto à página inicial do site usando as ferramentas de criação do AEM. Isso nos permite visualizar os estilos atualizados.

  1. Abra uma nova guia do navegador e navegue até a Página Inicial do site: http://localhost:4502/editor.html/content/venia/us/en.html.

  2. Expanda o Localizador de ativos (o painel lateral) no modo Editar. Alternar o filtro de Ativo para Produtos.

    Expandir o Localizador de Ativos e filtrar por Produtos

  3. Arraste e solte um novo Produto na página inicial no Contêiner de layout principal:

    Teaser do produto com borda rosa

    Você verá que o Teaser do produto agora tem uma borda rosa brilhante com base na alteração de regra CSS criada anteriormente.

Verificar bibliotecas de clientes na página verify-client-libraries

Em seguida, verifique a inclusão das bibliotecas de clientes na página.

  1. Navegue até a Página Inicial do site: http://localhost:4502/editor.html/content/venia/us/en.html.

  2. Selecione o menu Informações da página e clique em Exibir como publicado:

    Exibir como publicado

    A página será aberta sem carregar o JavaScript do autor do AEM, como seria exibido no site publicado. Observe que a URL tem o parâmetro de consulta ?wcmmode=disabled anexado. Ao desenvolver CSS e JavaScript, é uma boa prática usar esse parâmetro para simplificar a página sem nada do autor AEM.

  3. Visualize a fonte da página e você poderá identificar que várias bibliotecas de clientes estão incluídas:

    code language-html
    <!DOCTYPE html>
    <html lang="en-US">
    <head>
        ...
        <link rel="stylesheet" href="/etc.clientlibs/venia/clientlibs/clientlib-base.min.css" type="text/css">
        <link rel="stylesheet" href="/etc.clientlibs/venia/clientlibs/clientlib-site.min.css" type="text/css">
    </head>
    ...
        <script type="text/javascript" src="/etc.clientlibs/venia/clientlibs/clientlib-site.min.js"></script>
        <script type="text/javascript" src="/etc.clientlibs/core/wcm/components/commons/site/clientlibs/container.min.js"></script>
        <script type="text/javascript" src="/etc.clientlibs/venia/clientlibs/clientlib-base.min.js"></script>
    <script type="text/javascript" src="/etc.clientlibs/core/cif/clientlibs/common.min.js"></script>
    <script type="text/javascript" src="/etc.clientlibs/venia/clientlibs/clientlib-cif.min.js"></script>
    </body>
    </html>
    

    As bibliotecas de clientes quando entregues à página recebem o prefixo /etc.clientlibs e são servidas por meio de um proxy para evitar a exposição de itens confidenciais em /apps ou /libs.

    Aviso venia/clientlibs/clientlib-site.min.css e venia/clientlibs/clientlib-site.min.js. Esses são os arquivos CSS e JavaScript compilados derivados do módulo ui.frontend.

Inclusão da biblioteca do cliente com modelos de página client-library-inclusion-pagetemplates

Há várias opções para incluir uma biblioteca do lado do cliente. Em seguida, verifique como o projeto gerado inclui as bibliotecas clientlib-site por meio de Modelos de Página.

  1. Navegue até a Página Inicial do site no Editor de AEM: http://localhost:4502/editor.html/content/venia/us/en.html.

  2. Selecione o menu Informações da página e clique em Editar modelo:

    Editar o modelo

    Isso abre o modelo da Página de Aterrissagem na qual a Página inicial se baseia.

    note note
    NOTE
    Para exibir todos os modelos disponíveis na tela inicial do AEM, navegue até Ferramentas > Geral > Modelos.
  3. No canto superior esquerdo, selecione o ícone Informações da página e clique em Política da página.

    Item do menu da política da página

  4. A Política da página para o modelo Página de aterrissagem é aberta:

    Política da Página - página de aterrissagem

    No lado direito, é possível ver uma lista das bibliotecas de clientes categorias que serão incluídas em todas as páginas que usam esse modelo.

    • venia.dependencies - Fornece as bibliotecas de fornecedores das quais venia.site depende.
    • venia.site - Esta é a categoria para clientlib-site gerada pelo módulo ui.frontend.

    Observe que outros modelos usam a mesma política, Página de Conteúdo, Página de Aterrissagem e assim por diante. Ao reutilizar a mesma política, podemos garantir que as mesmas bibliotecas de clientes sejam incluídas em todas as páginas.

    A vantagem de utilizar modelos e políticas de página para gerenciar a inclusão das bibliotecas de clientes é que você pode alterar a política de acordo com o modelo. Por exemplo, talvez você esteja gerenciando duas marcas diferentes na mesma instância do AEM. Cada marca tem seu próprio estilo ou tema, mas as bibliotecas base e o código base serão os mesmos. Outro exemplo: se você quisesse que uma biblioteca do cliente maior fosse exibida apenas em determinadas páginas, seria possível criar uma política de página exclusiva para esse modelo.

Desenvolvimento de Webpack local local-webpack-development

No exercício anterior, uma atualização foi feita em um arquivo Sass no módulo ui.frontend e, em seguida, após a execução de uma compilação Maven, as alterações são implantadas no AEM. Em seguida, usamos um webpack-dev-server para desenvolver rapidamente os estilos de front-end.

Os proxies webpack-dev-server de imagens e alguns dos CSS/JavaScript da instância local do AEM, mas permitem que o desenvolvedor modifique os estilos e o JavaScript no módulo ui.frontend.

  1. No navegador, navegue até a Página inicial e Exiba como Publicado: http://localhost:4502/content/venia/us/en.html?wcmmode=disabled.

  2. Visualize o código-fonte da página e a cópia o HTML bruto da página.

  3. Retorne ao IDE de sua escolha abaixo do módulo ui.frontend e abra o arquivo: ui.frontend/src/main/static/index.html

    Arquivo HTML estático

  4. Substitua o conteúdo de index.html e cole o HTML copiado na etapa anterior.

  5. Localize as inclusões de clientlib-site.min.css, clientlib-site.min.js e remova.

    code language-html
    <head>
        <!-- remove this link -->
        <link rel="stylesheet" href="/etc.clientlibs/venia/clientlibs/clientlib-base.min.css" type="text/css">
        ...
    </head>
    <body>
        ...
         <!-- remove this link -->
        <script type="text/javascript" src="/etc.clientlibs/venia/clientlibs/clientlib-site.min.js"></script>
    </body>
    

    Eles são removidos porque representam a versão compilada do CSS e do JavaScript gerada pelo módulo ui.frontend. Deixe as outras bibliotecas do cliente como elas serão enviadas por proxy da instância do AEM em execução.

  6. Abra uma nova janela de terminal e navegue até a pasta ui.frontend. Execute o comando npm start:

    code language-shell
    $ cd ui.frontend
    $ npm start
    

    Isso inicia o webpack-dev-server em http://localhost:8080/

    note caution
    CAUTION
    Se você receber um erro relacionado ao Sass, pare o servidor e execute o comando npm rebuild node-sass e repita as etapas acima. Isso pode ocorrer se você tiver uma versão diferente de npm e node, então especificada no projeto aem-cif-guides-venia/pom.xml.
  7. Navegue até http://localhost:8080/ em uma nova guia com o mesmo navegador que uma instância conectada do AEM. Você deve ver a página inicial do Venia por meio do webpack-dev-server:

    Servidor de desenvolvimento do Webpack na porta 80

    Deixe o webpack-dev-server em execução. É usado no próximo exercício.

Implementar estilo de cartão para Teaser do produto update-css-product-teaser

Em seguida, modifique os arquivos Sass no módulo ui.frontend para implementar um Teaser do produto com layout de cartão. O webpack-dev-server é usado para visualizar rapidamente as alterações.

Retorne ao IDE e ao projeto gerado.

  1. No módulo ui.frontend, reabra o arquivo _productteaser.scss em ui.frontend/src/main/styles/commerce/_productteaser.scss.

  2. Faça as seguintes alterações na borda do Teaser do produto:

    code language-diff
        .item__image {
    -       border: #ea00ff 8px solid;
    +       border-bottom: 1px solid #c0c0c0;
            display: block;
            grid-area: main;
            height: auto;
            opacity: 1;
            transition-duration: 512ms;
            transition-property: opacity, visibility;
            transition-timing-function: ease-out;
            visibility: visible;
            width: 100%;
        }
    

    Salve as alterações e o webpack-dev-server deve ser atualizado automaticamente com os novos estilos.

  3. Adicione sombreado e pontas arredondadas ao Teaser do produto.

    code language-scss
     .item__root {
         position: relative;
         box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
         transition: 0.3s;
         border-radius: 5px;
         float: left;
         margin-left: 12px;
         margin-right: 12px;
    }
    
    .item__root:hover {
       box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
    }
    
  4. Atualize o nome do produto para que ele apareça na parte inferior do teaser e modifique a cor do texto.

    code language-css
    .item__name {
        color: #000;
        display: block;
        float: left;
        font-size: 22px;
        font-weight: 900;
        line-height: 1em;
        padding: 0.75em;
        text-transform: uppercase;
        width: 75%;
    }
    
  5. Atualize o preço do produto para que ele também apareça na parte inferior do teaser e modifique a cor do texto.

    code language-css
    .price {
        color: #000;
        display: block;
        float: left;
        font-size: 18px;
        font-weight: 900;
        padding: 0.75em;
        padding-bottom: 2em;
        width: 25%;
    
        ...
    
  6. Atualize a consulta de mídia na parte inferior para empilhar o nome e o preço em telas menores que 992px.

    code language-css
    @media (max-width: 992px) {
        .productteaser .item__name {
            font-size: 18px;
            width: 100%;
        }
        .productteaser .item__price {
            font-size: 14px;
            width: 100%;
        }
    }
    

    Agora você deve ver o estilo do cartão refletido no webpack-dev-server:

    Alterações no teaser do Servidor de Desenvolvimento do Webpack

    No entanto, as alterações ainda não foram implantadas no AEM. Você pode baixar o arquivo de solução aqui.

  7. Implante as atualizações do AEM usando suas habilidades em Maven em um terminal de linha de comando:

    code language-shell
    $ cd aem-cif-guides-venia/
    $ mvn clean install -PautoInstallPackage,cloud
    
    note note
    NOTE
    Há outras Ferramentas e configurações do IDE que podem sincronizar arquivos de projeto diretamente em uma instância do AEM local sem precisar executar uma compilação completa de Maven.

Exibir Teaser do produto atualizado view-updated-product-teaser

Depois que o código do projeto for implantado no AEM, você poderá ver as alterações no Teaser do produto.

  1. Retorne ao navegador e atualize a Página inicial: http://localhost:4502/editor.html/content/venia/us/en.html. O estilo do teaser de produto já deve ter sido aplicado.

    Estilo atualizado do Teaser do produto

  2. Tente adicionar outros teasers de produto. Use o Modo de layout para alterar a largura e a distância dos componentes para exibir vários teasers seguidos.

    Vários teasers de produtos

Resolução de problemas troubleshooting

Você pode verificar no CRXDE-Lite se o arquivo CSS atualizado foi implantado: http://localhost:4502/crx/de/index.jsp#/apps/venia/clientlibs/clientlib-site/css/site.css

Ao implantar novos arquivos CSS e/ou JavaScript, também é importante garantir que o navegador não esteja fornecendo arquivos obsoletos. Você pode corrigir isso limpando o cache do navegador ou iniciando uma nova sessão do navegador.

O AEM também tenta armazenar as bibliotecas de clientes em cache para melhorar o desempenho. Ocasionalmente, após a implantação de um código, os arquivos mais antigos são enviados. Você pode invalidar manualmente o cache das bibliotecas de clientes do AEM utilizando a ferramenta Recompilar bibliotecas de clientes. Invalidar caches é o método mais aconselhável se você suspeitar que o AEM armazenou em cache uma versão antiga de uma biblioteca do cliente. A ferramenta Recompilar bibliotecas é ineficaz e demorada.

Parabéns congratulations

AEM Você estilizou seu primeiro Componente principal CIF e usou um servidor de desenvolvimento de webpack!

Desafio extra bonus-challenge

Utilize o Sistema de estilo do AEM para criar dois estilos que podem ser ativados/desativados por um autor de conteúdo. Em Desenvolvimento com o sistema de estilo você encontra informações detalhadas com todas as etapas para fazê-lo.

Desafio extra — Sistema de estilo

Recursos adicionais additional-resources

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2