Alterar estilo dos Componentes principais da CIF do AEM

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

DICA

Use o Arquétipo de projeto AEM ao iniciar sua própria implementação de comércio.

O que você vai criar

Neste tutorial, um novo estilo será 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 da CIF.

O que você vai criar

Pré-requisitos

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

Clonar o projeto Venia

Nós vamos clonar o Projeto Venia e, em seguida, substituir os estilos padrão.

OBSERVAÇÃO

Você pode usar um projeto existente (com base no AEM Project Archetype com a CIF incluída) e ignore esta seção.

Execute o seguinte comando git para clonar o projeto:

$ git clone git@github.com:adobe/aem-cif-guides-venia.git

Crie e implante o projeto em uma instância local do AEM:

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

Adicione as configurações OSGi necessárias para conectar a instância do AEM a uma instância do Adobe Commerce ou adicionar as configurações ao projeto recém-criado.
Neste ponto, você deve ter uma versão funcional de uma loja conectada a uma instância do Adobe Commerce. Navegue até o US > Home página 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.

Bibliotecas de clientes e módulo ui.frontend

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.

É possível aplicar estilos específicos da marca AEM os Componentes principais da 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 projeto para gerenciar todos os ativos de front-end de um projeto. Isso permite que desenvolvedores front-end usem qualquer número de idiomas e tecnologias como TypeScript, Sass e muito mais.

O ui.frontend é também um módulo Maven e é integrado ao projeto maior por meio do uso de um módulo NPM aem-clientlib-generator. Durante uma criação, a variável aem-clientlib-generator copia os arquivos CSS e JavaScript compilados em uma Biblioteca do cliente na ui.apps módulo.

ui.front-end para a arquitetura ui.apps

CSS e Javascript compilados são copiados do ui.frontend no ui.apps módulo como uma biblioteca do cliente durante uma build Maven

Atualizar o estilo do Teaser

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

Navegar e expandir o ui.frontend e expanda a hierarquia de pastas para: ui.frontend/src/main/styles/commerce:

Observe que há várias Sass (.scss) abaixo da pasta. Esses são os estilos específicos de Comércio para cada um dos componentes de Comércio.
Abra o arquivo _productteaser.scss.

Atualize o .item__image e modifique a regra de borda:

.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 muito em negrito ao Teaser do produto.

Abra uma nova janela de terminal e navegue até a ui.frontend pasta:
```
$ cd <project-location>/aem-cif-guides-venia/ui.frontend
```

Execute o seguinte comando Maven:

$ 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ê verá que o comando Maven executou vários scripts NPM, incluindo npm run build. O npm run build é definido na variável package.json e tem o efeito de compilar o projeto do webpack e acionar a geração da biblioteca do cliente.

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

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

OBSERVAÇÃO

Arquivos como este são ignorados do controle de origem, pois devem ser gerados durante o tempo de criação.

Inspect o arquivo ui.frontend/clientlib.config.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 e o JavaScript compilados serão transformados em uma biblioteca AEM do cliente.

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

Essa é a cópia site.css no ui.apps projeto. Agora faz parte de uma biblioteca de clientes chamada clientlib-site com uma categoria de venia.site. Quando o arquivo fizer parte do ui.apps pode ser implantado no AEM.

OBSERVAÇÃO

Arquivos como este também são ignorados do controle de origem, pois devem ser gerados durante o tempo de criação.
Em seguida, inspecione as outras bibliotecas de clientes geradas pelo projeto:

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

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

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

clientlib-grid - Inclui o CSS necessário para ativar AEM recurso de Grade Responsiva. Usar a grade de AEM ativa Modo de layout no editor de AEM e fornece aos autores de conteúdo a capacidade de redimensionar componentes. A categoria é venia.grid e está incorporada na variável venia.base biblioteca.
Inspect os arquivos customheaderlibs.html e customfooterlibs.html debaixo ui.apps/src/main/content/jcr_root/apps/venia/components/page:

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

OBSERVAÇÃO

Somente as bibliotecas base são "codificadas" como parte dos scripts de página. venia.site não está incluído nesses arquivos e, em vez disso, é incluído como parte do modelo de página para maior flexibilidade. Isso será inspecionado posteriormente.
No terminal, crie e implante o projeto inteiro em uma instância local de AEM:
```
$ cd aem-cif-guides-venia/
$ mvn clean install -PautoInstallPackage,cloud
```

Criar um Teaser do produto

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 permitirá visualizar os estilos atualizados.

Abra uma nova guia do navegador e navegue até a guia Página inicial do sítio: http://localhost:4502/editor.html/content/venia/us/en.html.
Expanda o Localizador de ativos (o painel lateral) em Editar modo. Alterne o filtro Ativo para Produtos.
Arraste e solte um novo produto na página inicial do Contêiner de layout principal:

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

Verificar bibliotecas de clientes na página

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

Navegue até o Página inicial do sítio: http://localhost:4502/editor.html/content/venia/us/en.html.
Selecione o menu Informações da página e clique em Exibir como publicado:

A página será exibida sem carregar o javascript criado pelo autor no AEM, como seria exibido no site publicado. Observe que o url tem o parâmetro de consulta ?wcmmode=disabled anexado. Ao desenvolver o CSS e o Javascript, é recomendado usar esse parâmetro para simplificar a página sem nenhuma ação de seu autor no AEM.

Visualize a fonte da página e você deve ser capaz de identificar se várias bibliotecas de clientes foram incluídas:

<!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 através de proxy para evitar a exposição de algo sensível 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 ui.frontend módulo.

Inclusão da biblioteca do cliente com modelos de página

Há várias opções para incluir uma biblioteca do lado do cliente. Em seguida, verifique como o projeto gerado inclui a variável clientlib-site bibliotecas via Modelos de página.

Navegue até o Página inicial do site no Editor de AEM: http://localhost:4502/editor.html/content/venia/us/en.html.
Selecione o Informações da página e clique em Editar modelo:

Isso abrirá o Página de aterrissagem o modelo Início é baseada em.

OBSERVAÇÃO

Para exibir todos os modelos disponíveis na tela inicial AEM, navegue até Ferramentas > Geral > Modelos.
No canto superior esquerdo, selecione o ícone Informações da página e clique em Política da página.
Isso abrirá a Política da página para o modelo de Página de aterrissagem:

No lado direito, é possível ver uma lista das categorias de bibliotecas de clientes que serão incluídas em todas as páginas que utilizam esse modelo.
- venia.dependencies - Fornece todas as bibliotecas de fornecedores que venia.site depende de .
- venia.site - Esta é a categoria para clientlib-site que ui.frontend é gerado.
Observe que outros modelos utilizam a mesma política, Página de conteúdo, Página de aterrissagem, etc. 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 terá 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 bibliotecas do cliente maior fosse exibida apenas em determinadas páginas, seria possível fazer uma política de página exclusiva para esse modelo.

Desenvolvimento de Webpack Local

No exercício anterior, foi feita uma atualização em um arquivo Sass na ui.frontend e depois de executar uma build Maven, as alterações são implantadas em AEM. Em seguida, analisaremos o aproveitamento de um servidor de desenvolvimento de webpack para desenvolver rapidamente os estilos de front-end.

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

No navegador, navegue até o Início página e Exibir como publicado: http://localhost:4502/content/venia/us/en.html?wcmmode=disabled.
Exibir a fonte da página e o copiar o HTML bruto da página.
Retorne ao IDE de sua escolha abaixo do ui.frontend o módulo abre o arquivo : ui.frontend/src/main/static/index.html
Substituir o conteúdo de index.html e colar o HTML copiado na etapa anterior.

Encontre as inclusões para clientlib-site.min.css, clientlib-site.min.js e remove eles.

<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 pela variável ui.frontend módulo. Deixe as outras bibliotecas de clientes como elas serão enviadas por proxy da instância de AEM em execução.

Abra uma nova janela de terminal e navegue até a ui.frontend pasta. Execute o comando npm start:
```
$ cd ui.frontend
$ npm start
```
Isso iniciará o servidor webpack-dev em http://localhost:8080/

ATENÇÃO

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 tiver uma versão diferente de npm e node em seguida, especificado no projeto aem-cif-guides-venia/pom.xml.
Navegue até o http://localhost:8080/ em uma nova guia com o mesmo navegador que uma instância de AEM logada. Você deve ver a página inicial Venia através do webpack-dev-server:

Deixe o servidor webpack-dev em execução. Ele será usado no próximo exercício.

Implementar o estilo de cartão para Teaser do produto

Em seguida, modifique os arquivos Sass na ui.frontend para implementar um estilo semelhante a uma placa para o Teaser do produto. O webpack-dev-server será usado para visualizar rapidamente as alterações.

Retorne ao IDE e ao projeto gerado.

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

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

    .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 atualizar automaticamente com os novos estilos.

Adicione sombreado e pontas arredondadas ao Teaser do produto.

 .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);
}

Atualize o nome do produto para que ele apareça na parte inferior do teaser e modifique a cor do texto.

.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%;
}

Atualize o preço do produto para que ele também apareça na parte inferior do teaser e modifique a cor do texto.

.price {
    color: #000;
    display: block;
    float: left;
    font-size: 18px;
    font-weight: 900;
    padding: 0.75em;
    padding-bottom: 2em;
    width: 25%;

    ...

Atualize a consulta de mídia na parte inferior para empilhar o nome e o preço em telas menores que 992px.
```
@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:

No entanto, as alterações ainda não foram implantadas em AEM. Você pode baixar o arquivo de solução aqui.
Implante as atualizações para AEM usando suas habilidades Maven em um terminal de linha de comando:
```
$ cd aem-cif-guides-venia/
$ mvn clean install -PautoInstallPackage,cloud
```
OBSERVAÇÃO

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

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

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.
Tente adicionar outros teasers de produto. Use o Modo de layout para alterar a largura e a distância dos componentes a fim de exibir vários teasers em sequência.

Resolução de problemas

Você pode fazer o check-in CRXDE-Lite que 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

Você acabou de criar o estilo do seu primeiro Componente principal da CIF do AEM e usou um servidor de desenvolvimento de webpack!

Desafio extra

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

Pesquisa nova e melhorada

Alterar estilo dos Componentes principais da CIF do AEM

O que você vai criar

Pré-requisitos

Clonar o projeto Venia

Bibliotecas de clientes e módulo ui.frontend

Atualizar o estilo do Teaser

Criar um Teaser do produto

Verificar bibliotecas de clientes na página

Inclusão da biblioteca do cliente com modelos de página

Desenvolvimento de Webpack Local

Implementar o estilo de cartão para Teaser do produto

Exibir Teaser do produto atualizado

Resolução de problemas

Parabéns

Desafio extra

Recursos adicionais

Recursos de Business.Adobe.com

Nesta página

Exibir próximos:

Aprender

Documentação

Comunidade

Suporte

Recursos

Conta da Adobe

Adobe