Alterar estilo dos Componentes principais da CIF do AEM style-aem-cif-core-components
A variável Projeto CIF Venia é uma base de código de referência para o uso de Componentes principais do CIF. AEM Neste tutorial, você inspeciona o projeto de referência Venia e entende como o CSS e o JavaScript usados pelos componentes principais CIF são organizados. Você também pode criar um estilo usando CSS para atualizar o estilo padrão do Teaser do produto componente.
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.
Pré-requisitos prerequisites
Um ambiente de desenvolvimento local é necessário para concluir este tutorial. Esse ambiente 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 o SDK as a Cloud Service do AEM.
Clonar o projeto Venia clone-venia-project
Você vai clonar o Projeto Veniae substituirá os estilos padrão.
-
Execute o seguinte comando do Git para clonar o projeto:
code language-shell $ git clone git@github.com:adobe/aem-cif-guides-venia.git
-
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
-
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 criado.
-
Nesse ponto, você deve ter uma versão funcional de uma loja conectada a uma instância do Adobe Commerce. Navegue até a
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 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 um biblioteca do cliente ou "clientlibs" para abreviar. 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.
A variável ui.frontend é uma dedicada webpack projeto para gerenciar todos os ativos de front-end de um projeto. Este webpack permite que desenvolvedores de front-end usem qualquer número de idiomas e tecnologias, como TypeScript, Sasse muito mais.
A variável ui.frontend
também é um módulo Maven e integrado ao projeto maior usando um módulo NPM com a aem-clientlib-generator. Durante uma criação, a variável aem-clientlib-generator
copia os arquivos CSS e JavaScript compilados para uma Biblioteca do cliente na ui.apps
módulo.
O CSS compilado e o JavaScript são copiados do ui.frontend
módulo no ui.apps
módulo 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 de Teaser para ver como ui.frontend
as bibliotecas de módulo e cliente funcionam. Uso o IDE de sua escolha para importar o projeto Venia. As capturas de tela usadas são do IDE do Visual Studio Code.
-
Navegue e expanda a variável ui.frontend e expandir a hierarquia de pastas para:
ui.frontend/src/main/styles/commerce
:Observe que há vários Sass (
.scss
) arquivos abaixo da pasta. Esses arquivos são estilos específicos do Commerce para cada um dos componentes do Commerce. -
Abra o arquivo
_productteaser.scss
. -
Atualize o
.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.
-
Abra uma nova janela de terminal e navegue até a
ui.frontend
pasta:code language-shell $ cd <project-location>/aem-cif-guides-venia/ui.frontend
-
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. Observe que o comando Maven executou vários scripts NPM, incluindo
npm run build
. A variávelnpm run build
é definido na variávelpackage.json
arquivo e compila o projeto do webpack e aciona 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.
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. -
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: { ...
Esse arquivo de configuração é para aem-clientlib-generator e determina onde e como o CSS compilado e o JavaScript são transformados em uma biblioteca cliente AEM.
-
No
ui.apps
, verifique o arquivo:ui.apps/src/main/content/jcr_root/apps/venia/clientlibs/clientlib-site/css/site.css
:Este arquivo é
site.css
copiado para oui.apps
projeto. Agora, ele faz parte de uma biblioteca do cliente chamadaclientlib-site
com uma categoria devenia.site
. Quando o arquivo fizer parte da variávelui.apps
pode 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. -
Em seguida, verifique as outras bibliotecas de clientes geradas pelo projeto:
Essas bibliotecas de clientes não são gerenciadas pelo
ui.frontend
módulo. Em vez disso, essas bibliotecas de clientes incluem as dependências de CSS e JavaScript fornecidas pelo Adobe. A definição dessas bibliotecas de clientes está na.content.xml
arquivo abaixo de cada pasta.clientlib-base - Uma biblioteca do cliente vazia que simplesmente incorpora as dependências necessárias do Componentes principais do AEM. A categoria é
venia.base
.clientlib-cif - Uma biblioteca do cliente vazia que simplesmente incorpora as dependências necessárias do AEM Componentes principais do CIF. A categoria é
venia.cif
.clientlib-grid - Inclui o CSS para ativar o recurso de Grade responsiva AEM. O uso da grade AEM habilita Modo de layout no Editor de AEM e dá aos autores de conteúdo a capacidade de redimensionar componentes. A categoria é
venia.grid
e está incorporado navenia.base
biblioteca. -
Inspect os arquivos
customheaderlibs.html
ecustomfooterlibs.html
debaixoui.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.
note note NOTE Somente as bibliotecas base são "codificadas" como parte dos scripts da página. venia.site
O não está incluído nesses arquivos e, em vez disso, é incluído como parte do modelo de página para obter mais flexibilidade. Esse processo é inspecionado posteriormente. -
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 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.
-
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.
-
Expanda o Localizador de ativos (o painel lateral) no Editar modo. Alternar o filtro de Ativo para Produtos.
-
Arraste e solte um novo Produto na página inicial no Contêiner de layout principal:
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.
-
Navegue até a Página inicial do site: http://localhost:4502/editor.html/content/venia/us/en.html.
-
Selecione o menu Informações da página e clique em Exibir como publicado:
Esta página é aberta sem carregar nenhum JavaScript do autor 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, é uma boa prática usar esse parâmetro para simplificar a página sem nada do autor do AEM. -
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 servidos por meio de um proxy para evitar expor itens sensíveis no/apps
ou/libs
.Aviso
venia/clientlibs/clientlib-site.min.css
evenia/clientlibs/clientlib-site.min.js
. Esses arquivos são os arquivos CSS e JavaScript compilados derivados doui.frontend
módulo.
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 a clientlib-site
bibliotecas via Modelos de página.
-
Navegue até a 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:
A variável Landing Page for aberto um modelo que Início página é baseada em.
note note NOTE Para visualizar todos os modelos disponíveis na tela inicial do AEM, acesse Ferramentas > Geral > Modelos. -
No canto superior esquerdo, selecione o ícone Informações da página e clique em Política da página.
-
A Política da página é aberta para o modelo Página inicial:
No lado direito, é possível ver uma lista de Bibliotecas de clientes categorias que estão incluídos em todas as páginas que usam esse modelo.
venia.dependencies
- Fornece bibliotecas de fornecedores quevenia.site
depende do.venia.site
- A categoria paraclientlib-site
que oui.frontend
gerado pelo módulo.
Observe que outros modelos usam a mesma política, Página de conteúdo, Landing Page e assim por diante. Ao reutilizar a mesma política, ela garante 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 sã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, foi efetuada uma atualização a um ficheiro Sass ui.frontend
e, em seguida, após executar uma compilação Maven, as alterações são implantadas no AEM. Em seguida, considere usar um webpack-dev-server para desenvolver rapidamente os estilos de front-end.
As imagens proxies webpack-dev-server e algumas das imagens CSS/JavaScript da instância local do AEM, mas permitem que o desenvolvedor modifique os estilos e o JavaScript no ui.frontend
módulo.
-
No navegador, navegue até a janela Início página e Exibir como publicado: http://localhost:4502/content/venia/us/en.html?wcmmode=disabled.
-
Visualize o código-fonte da página e as copiar o HTML bruto da página.
-
Retorne ao IDE de sua escolha abaixo de
ui.frontend
módulo abra o arquivo:ui.frontend/src/main/static/index.html
-
Substituir o conteúdo de
index.html
e colar o HTML copiado na etapa anterior. -
Localize os "includes" para
clientlib-site.min.css
,clientlib-site.min.js
, e remover as mesmas.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>
Esses "includes" foram removidos porque representam a versão compilada do CSS e do JavaScript gerada pelo
ui.frontend
módulo. Deixe as outras bibliotecas de clientes como elas serão enviadas por proxy da instância do AEM em execução. -
Abra uma nova janela de terminal e acesse o
ui.frontend
pasta. Execute o comandonpm start
:code language-shell $ cd ui.frontend $ npm start
Este comando 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. Este erro poderá ocorrer se você tiver uma versão diferente donpm
enode
do que especificado no projetoaem-cif-guides-venia/pom.xml
. -
Navegue até a http://localhost:8080/ em uma nova guia com o mesmo navegador usado para fazer logon na instância do AEM. Você deve ver a página inicial do Venia por meio do webpack-dev-server:
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 na ui.frontend
para implementar um Teaser do produto com estilo de cartão. O webpack-dev-server é usado para visualizar rapidamente as alterações.
Retorne ao IDE e ao projeto gerado.
-
No ui.frontend , reabra o arquivo
_productteaser.scss
emui.frontend/src/main/styles/commerce/_productteaser.scss
. -
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.
-
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); }
-
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%; }
-
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%; ...
-
Atualize a consulta de mídia na parte inferior para empilhar o nome e o preço em telas menores que 992 px.
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:
No entanto, as alterações ainda não foram implantadas no AEM. Você pode baixar o arquivo de solução aqui.
-
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.
-
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 para exibir vários teasers seguidos.
Resolução de problemas troubleshooting
Você pode verificar em 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, JavaScript ou ambos, também é importante garantir que o navegador não esteja disponibilizando arquivos obsoletos. Você pode eliminar esse problema potencial 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ê terminou de criar o estilo do seu primeiro Componente principal CIF e usou um servidor de desenvolvimento de webpack!
Desafio extra bonus-challenge
Use o Sistema de estilo AEM para criar dois estilos que podem ser ativados ou desativados por um autor de conteúdo. Desenvolvimento com o sistema de estilo A seção inclui etapas detalhadas e informações sobre como realizar essa tarefa.