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

Execute o seguinte comando do 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 criado.

Nesse 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.

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

Observe que há vários arquivos Sass (.scss) 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 a regra .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 forte ao Teaser do produto.

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

$ 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. Observe que o comando Maven executou vários scripts NPM, incluindo npm run build. O comando npm run build é definido no arquivo package.json, 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.

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 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 módulo ui.apps, inspecione o arquivo: ui.apps/src/main/content/jcr_root/apps/venia/clientlibs/clientlib-site/css/site.css:

Este arquivo é site.css copiado para o 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.

Em seguida, verifique as outras bibliotecas de clientes geradas pelo projeto:

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 - Uma biblioteca do cliente vazia que simplesmente incorpora as dependências necessárias dos Componentes principais do AEM. A categoria é venia.base.

clientlib-cif - 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 - Inclui o CSS 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.

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

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

No terminal, crie e implante todo o projeto em uma instância local do AEM:

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

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 modo Editar. 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.

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 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.

Visualize a fonte da página e você poderá identificar que várias bibliotecas de clientes estão 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 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.

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

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

O modelo de Página de Aterrissagem está aberto e no qual a Página inicial se baseia.

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, você pode ver uma lista das categorias de Bibliotecas de Clientes 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 - A categoria de 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, 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 base 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.

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

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

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

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

Localize as "inclusões" para clientlib-site.min.css, clientlib-site.min.js e remova.

<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>

Essas "inclusões" são removidas porque representam a versão compilada do CSS e do JavaScript gerada pelo módulo ui.frontend. 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 navegue até a pasta ui.frontend. Execute o comando npm start:

$ cd ui.frontend
$ npm start

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

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:

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

No módulo ui.frontend, reabra o arquivo _productteaser.scss em 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 ser atualizado 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 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:

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

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.