Personalizar os 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ê estenderá ainda mais o Teaser do produto componente para exibir um atributo personalizado do Adobe Commerce. Você também aprenderá mais sobre a integração do GraphQL entre o AEM e o Adobe Commerce e os ganchos de extensão fornecidos pelos Componentes principais da CIF.

O que você vai criar

A marca Venia começou recentemente a fabricar alguns produtos usando materiais sustentáveis e a empresa gostaria de exibir um Econômica emblema como parte do Teaser do produto. Um novo atributo personalizado será criado no Adobe Commerce para indicar se um produto usa a variável Ecológico material. Esse atributo personalizado será adicionado como parte da consulta do GraphQL e exibido no Teaser do produto para produtos especificados.

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. Para seguir o tutorial completamente, você precisará de permissões para adicionar Atributos a um produto no Adobe Commerce.

Você também precisará do GraphQL IDE, como GraphiQL ou uma extensão do navegador para executar amostras de código e tutoriais. Se você instalar uma extensão do navegador, verifique se ela tem a capacidade de definir cabeçalhos de solicitação. No Google Chrome, Altair GraphQL Client é uma extensão que pode fazer o trabalho.

Clonar o projeto Venia

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

1. Execute o seguinte comando git para clonar o projeto:

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

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

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

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

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

   

Criação do Teaser do produto

O Teaser do produto será estendido por todo este tutorial. Como primeira etapa, adicione uma nova instância do Teaser do produto à página inicial para entender a funcionalidade da linha de base.

1. Acesse a página inicial do site: http://localhost:4502/editor.html/content/acme/us/en.html

2. Insira um novo Teaser do produto no container do layout principal da página.

   

3. Expanda o painel lateral (se ainda não estiver sendo exibido) e na lista suspensa do localizador de ativos selecione Produtos. Isso deve exibir uma lista de produtos disponíveis de uma instância conectada do Adobe Commerce. Selecione, arraste e solte um produto no Teaser do produto exibido na página.

   

   OBSERVAÇÃO

   Observação: você também pode configurar o produto exibido definindo o componente na caixa de diálogo (clicando na chave inglesa).

4. Agora você já deve estar vendo um produto no teaser. O nome e o preço do produto são atributos exibidos por padrão.

   

Adicionar um atributo personalizado no Adobe Commerce

Os produtos e os dados do produto exibidos no AEM são armazenados no Adobe Commerce. Em seguida, adicione um novo atributo para Econômica como parte do conjunto de atributos do produto usando a interface do usuário do Adobe Commerce.

1. Faça logon na instância do Adobe Commerce.

2. Navegar para Catálogo > Produtos.

3. Atualize o filtro de pesquisa para encontrar o Produto configurável usado quando adicionado ao componente Teaser do exercício anterior. Abra o produto no modo de edição.

   

4. Na exibição do produto, clique em Adicionar atributo > Criar novo atributo.

5. Preencha o Novo atributo com os seguintes valores (deixe as configurações padrão para outros valores)

   Conjunto de campos	Rótulo do campo	Valor
   Propriedades do atributo	Rótulo do atributo	Econômica
   Propriedades do atributo	Tipo de entrada do catálogo	Sim/Não
   Propriedades avançadas de atributos	Código do atributo	eco_friendly

   

   Clique em Salvar atributo quando terminar.

6. Role até a parte inferior do produto e expanda a Atributos cabeçalho. Você deve ver o novo Econômica campo. Alterne o botão para Sim.

   

   Salvar as alterações no produto.

   DICA

   Mais detalhes sobre o gerenciamento Atributos do produto podem ser encontrados no guia do usuário do Adobe Commerce.

7. Navegar para Sistema > Ferramentas > Gerenciamento de cache. Como uma atualização foi feita no schema de dados, precisamos invalidar alguns dos Tipos de cache no Adobe Commerce.

8. Marque a caixa ao lado de Configuração e envie o tipo de cache para Atualizar

   

   DICA

   Mais detalhes sobre O Gerenciamento de cache pode ser encontrado no guia do usuário do Adobe Commerce.

Usar um GraphQL IDE para verificar o atributo

Antes de entrar em AEM código, é útil explorar a variável Adobe Commerce GraphQL usando um GraphQL IDE. A integração do Adobe Commerce com o AEM é feita principalmente por meio de uma série de consultas do GraphQL. Compreender e modificar as consultas do GraphQL é uma das principais maneiras de estender os Componentes principais da CIF.

Em seguida, use um GraphQL IDE para verificar se a variável eco_friendly foi adicionado ao conjunto de atributos do produto. As capturas de tela deste tutorial estão usando o Altair GraphQL Client.

1. Abra o GraphQL IDE e insira o URL http://<server>/graphql na barra de URL do IDE ou da extensão.

2. Adicione o seguinte consulta de produtos em que YOUR_SKU é SKU do produto utilizado no exercício anterior:

     {
       products(
       filter: { sku: { eq: "YOUR_SKU" } }
       ) {
           items {
           name
           sku
           eco_friendly
           }
       }
   }
   

3. Execute a query e você deverá obter uma resposta como a seguinte:

   {
     "data": {
       "products": {
         "items": [
           {
             "name": "Valeria Two-Layer Tank",
             "sku": "VT11",
             "eco_friendly": 1
           }
         ]
       }
     }
   }
   

   

   Observe que o valor de Sim é um número inteiro de 1. Isso será útil quando gravarmos a consulta do GraphQL em Java.

   DICA

   Documentação mais detalhada sobre Adobe Commerce GraphQL pode ser encontrado aqui.

Atualizar o Modelo do Sling para o Teaser do produto

A seguir, estenderemos a lógica de negócios do Teaser do produto implementando um Modelo do Sling. Os Modelos do Sling são objetos POJO (Plain Old Java Objects) orientados por anotações que implementam qualquer lógica de negócios exigida pelo componente. Modelos do Sling são usados junto com os scripts HTL como parte do componente. Seguiremos o padrão de delegação para Modelos do Sling para que possamos estender partes do modelo existente do Teaser do produto.

Os Modelos do Sling são implementados como Java e podem ser encontrados no módulo principal do projeto gerado.

Use o IDE de sua escolha para importar o projeto Venia. As capturas de tela usadas são da Visual Studio Code IDE.

1. No IDE, navegue sob o núcleo para: core/src/main/java/com/venia/core/models/commerce/MyProductTeaser.java.

   

   MyProductTeaser.java é uma interface Java que estende a CIF ProductTeaser interface.

   Já foi adicionado um novo método chamado isShowBadge() para exibir um selo se o produto for considerado "Novo".

2. Adicione um novo método isEcoFriendly() à interface:

   @ProviderType
   public interface MyProductTeaser extends ProductTeaser {
       // Extend the existing interface with the additional properties which you
       // want to expose to the HTL template.
       public Boolean isShowBadge();
   
       public Boolean isEcoFriendly();
   }
   

   Esse é um novo método que introduziremos para encapsular a lógica de indicar se o produto tem o eco_friendly conjunto de atributos para Sim ou Não.

3. Em seguida, inspecione o MyProductTeaserImpl.java at core/src/main/java/com/venia/core/models/commerce/MyProductTeaserImpl.java.

   O padrão de delegação para Modelos do Sling allow MyProductTeaserImpl referência ProductTeaser modelo por meio do sling:resourceSuperType propriedade:

   @Self
   @Via(type = ResourceSuperType.class)
   private ProductTeaser productTeaser;
   

   Para todos os métodos que não queremos substituir ou alterar, podemos simplesmente retornar o valor que o ProductTeaser retorna. Por exemplo:

   @Override
   public String getImage() {
       return productTeaser.getImage();
   }
   

   Isso minimiza a quantidade de código Java que uma implementação precisa gravar.

4. Um dos pontos de extensão adicionais fornecidos pelos Componentes principais AEM CIF é o AbstractProductRetriever que fornece acesso a atributos específicos do produto. A Inspect initModel() método :

   import javax.annotation.PostConstruct;
   ...
   @Model(adaptables = SlingHttpServletRequest.class, adapters = MyProductTeaser.class, resourceType = MyProductTeaserImpl.RESOURCE_TYPE)
   public class MyProductTeaserImpl implements MyProductTeaser {
       ...
       private AbstractProductRetriever productRetriever;
   
       /* add this method to intialize the proudctRetriever */
       @PostConstruct
       public void initModel() {
           productRetriever = productTeaser.getProductRetriever();
   
           if (productRetriever != null) {
               productRetriever.extendProductQueryWith(p -> p.createdAt());
           }
   
       }
   ...
   

   O @PostConstruct A anotação garante que esse método seja chamado assim que o Modelo do Sling for inicializado.

   Observe que o query de GraphQL do produto já foi estendido usando o extendProductQueryWith para recuperar o método adicional created_at atributo. Esse atributo é usado posteriormente como parte do isShowBadge() método .

5. Atualize a consulta do GraphQL para incluir a variável eco_friendly na consulta parcial:

   //MyProductTeaserImpl.java
   
   private static final String ECO_FRIENDLY_ATTRIBUTE = "eco_friendly";
   
   @PostConstruct
   public void initModel() {
       productRetriever = productTeaser.getProductRetriever();
   
       if (productRetriever != null) {
           productRetriever.extendProductQueryWith(p -> p
               .createdAt()
               .addCustomSimpleField(ECO_FRIENDLY_ATTRIBUTE)
           );
       }
   }
   

   Atualizar o método extendProductQueryWith é uma maneira eficiente de garantir que atributos de produto adicionais estejam disponíveis para o restante do modelo. Essa ação também minimiza o número de consultas executadas.

   No código acima, a variáveladdCustomSimpleField é usada para recuperar o eco_friendly atributo. Isso ilustra como você pode consultar qualquer atributo personalizado que faça parte do esquema do Adobe Commerce.

   OBSERVAÇÃO

   O createdAt() foi efetivamente implementado como parte da Interface do produto. A maioria dos atributos de esquema encontrados com frequência foram implementados, portanto, use addCustomSimpleField somente para atributos verdadeiramente personalizados.

6. Adicione um logger para ajudar a depurar o código Java:

   import org.slf4j.Logger;
   import org.slf4j.LoggerFactory;
   ...
   @Model(adaptables = SlingHttpServletRequest.class, adapters = MyProductTeaser.class, resourceType = MyProductTeaserImpl.RESOURCE_TYPE)
   public class MyProductTeaserImpl implements MyProductTeaser {
   
   private static final Logger LOGGER = LoggerFactory.getLogger(MyProductTeaserImpl.class);
   

7. Em seguida, implemente o isEcoFriendly() método :

   @Override
   public Boolean isEcoFriendly() {
   
       Integer ecoFriendlyValue;
       try {
           ecoFriendlyValue = productRetriever.fetchProduct().getAsInteger(ECO_FRIENDLY_ATTRIBUTE);
           if(ecoFriendlyValue != null && ecoFriendlyValue.equals(Integer.valueOf(1))) {
               LOGGER.info("*** Product is Eco Friendly**");
               return true;
           }
       } catch (SchemaViolationError e) {
           LOGGER.error("Error retrieving eco friendly attribute");
       }
       LOGGER.info("*** Product is not Eco Friendly**");
       return false;
   }
   

   No método acima, a variável productRetriever é usada para buscar o produto e a variável getAsInteger() é usado para obter o valor da variável eco_friendly atributo. Com base nas consultas do GraphQL executadas anteriormente, sabemos que o valor esperado quando a variável eco_friendly está definido como "Sim" é, na verdade, um número inteiro de 1.

   Agora que o Modelo do Sling foi atualizado, a marcação de componente precisa ser atualizada para realmente exibir um indicador de Econômica baseado no Modelo do Sling.

Personalização da marcação do Teaser do produto

Uma extensão comum de componentes do AEM é modificar a marcação gerada pelo componente. Essa modificação é feita substituindo o script HTL que o componente usa para renderizar sua marcação. A Linguagem de modelo HTML (HTL) é uma linguagem de modelo leve que os componentes do AEM usam para renderizar dinamicamente a marcação com base no conteúdo criado, permitindo que os componentes sejam reutilizados. O Teaser do produto, por exemplo, pode ser reutilizado várias vezes para exibir produtos diferentes.

Em nosso caso, queremos renderizar um banner sobre o teaser para indicar que o produto é "ecológico" com base em um atributo personalizado. O padrão de design para personalizar a marcação de um componente é, na verdade, padrão para todos os componentes do AEM, não apenas para os Componentes principais da CIF do AEM.

1. No IDE, navegue e expanda o ui.apps e expanda a hierarquia de pastas para: ui.apps/src/main/content/jcr_root/apps/venia/components/commerce/productteaser e inspecionar o .content.xml arquivo.

   

   <?xml version="1.0" encoding="UTF-8"?>
   <jcr:root xmlns:sling="https://sling.apache.org/jcr/sling/1.0" xmlns:cq="https://www.day.com/jcr/cq/1.0" xmlns:jcr="https://www.jcp.org/jcr/1.0"
       jcr:description="Product Teaser Component"
       jcr:primaryType="cq:Component"
       jcr:title="Product Teaser"
       sling:resourceSuperType="core/cif/components/commerce/productteaser/v1/productteaser"
       componentGroup="Venia - Commerce"/>
   

   Veja acima a definição de componente para o Teaser do produto em nosso projeto. Observe a propriedade sling:resourceSuperType="core/cif/components/commerce/productteaser/v1/productteaser". Este é um exemplo de criação de um componente Proxy. Em vez de copiar e colar todos os scripts HTL do Teaser do produto dos Componentes principais da CIF do AEM, podemos usar o sling:resourceSuperType para herdar toda a funcionalidade.

2. Abra o arquivo productteaser.html. Esta é uma cópia do productteaser.html do Teaser do produto CIF

   <!--/* productteaser.html */-->
   <sly
     data-sly-use.product="com.venia.core.models.commerce.MyProductTeaser"
     data-sly-use.templates="core/wcm/components/commons/v1/templates.html"
     data-sly-use.actionsTpl="actions.html"
     data-sly-test.isConfigured="${properties.selection}"
     data-sly-test.hasProduct="${product.url}"
   ></sly>
   

   Observe que o Modelo do Sling para MyProductTeaser é usada e atribuída ao product variável.

3. Modificar productteaser.html para fazer uma chamada para a isEcoFriendly método implementado no exercício anterior:

   ...
   <div
     data-sly-test="${isConfigured && hasProduct}"
     class="item__root"
     data-cmp-is="productteaser"
     data-virtual="${product.virtualProduct}"
   >
     <div data-sly-test="${product.showBadge}" class="item__badge">
       <span>${properties.text || 'New'}</span>
     </div>
     <!--/* Insert call to Eco Friendly here */-->
     <div data-sly-test="${product.ecoFriendly}" class="item__eco">
       <span>Eco Friendly</span>
     </div>
     ...
   </div>
   

   Ao chamar um método do Modelo do Sling no HTL, a variável get e is parte do método é solta e a primeira letra é minúscula. So isShowBadge() become .showBadge e isEcoFriendly become .ecoFriendly. Com base no valor booleano retornado de .isEcoFriendly() determina se a variável <span>Eco Friendly</span> é exibida.

   Mais informações sobre data-sly-test e outros Declarações de bloco HTL podem ser encontradas aqui.

4. Salve as alterações e implante as atualizações no AEM usando suas habilidades Maven em um terminal de linha de comando:

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

5. Abra uma nova janela do navegador e navegue até AEM e o Console do OSGi > Status > Modelos Sling: http://localhost:4502/system/console/status-slingmodels

6. Procurar por MyProductTeaserImpl e você deve ver uma linha como a seguinte:

   com.venia.core.models.commerce.MyProductTeaserImpl - venia/components/commerce/productteaser
   

   Isso indica que o Modelo do Sling foi devidamente implantado e mapeado para o componente correto.

7. Atualize para o Página inicial Venia at http://localhost:4502/editor.html/content/venia/us/en.html onde o Teaser do produto foi adicionado.

   

   Se o produto tiver a variável eco_friendly conjunto de atributos para Sim, você deve ver o texto "Ecológico" na página. Tente alternar para produtos diferentes para ver a mudança de comportamento.

8. Em seguida, abra o AEM error.log para ver as declarações de log que adicionamos. O error.log está localizado em <AEM SDK Install Location>/crx-quickstart/logs/error.log.

   Pesquise nos logs de AEM para ver as declarações de log adicionadas no Modelo do Sling:

   2020-08-28 12:57:03.114 INFO [com.venia.core.models.commerce.MyProductTeaserImpl] *** Product is Eco Friendly**
   ...
   2020-08-28 13:01:00.271 INFO [com.venia.core.models.commerce.MyProductTeaserImpl] *** Product is not Eco Friendly**
   ...
   

   ATENÇÃO

   Você também pode ver alguns rastreamentos de pilha se o produto usado no teaser não tiver o eco_friendly como parte do conjunto de atributos.

Adicionar estilos para o emblema compatível com o ambiente

Nesse momento, a lógica de quando exibir o Econômica O selo está funcionando, no entanto, o texto simples pode usar alguns estilos. Em seguida, adicione um ícone e estilos à ui.frontend para concluir a implementação.

1. Baixe o eco_friendly.svg arquivo. Isso será usado como a variável Econômica selo.

2. Retorne ao IDE e navegue até o ui.frontend pasta.

3. Adicione o eco_friendly.svg para ui.frontend/src/main/resources/images pasta:

   

4. Abra o arquivo productteaser.scss at ui.frontend/src/main/styles/commerce/_productteaser.scss.

5. Adicione as seguintes regras de Sass dentro do .productteaser classe:

   .productteaser {
       ...
       .item__eco {
           width: 60px;
           height: 60px;
           left: 0px;
           overflow: hidden;
           position: absolute;
           padding: 5px;
   
       span {
           display: block;
           position: absolute;
           width: 45px;
           height: 45px;
           text-indent: -9999px;
           background: no-repeat center center url('../resources/images/eco_friendly.svg');
           }
       }
   ...
   }
   

   OBSERVAÇÃO

   Veja Alterar estilo dos Componentes principais da CIF para obter mais detalhes sobre fluxos de trabalho front-end.

6. Salve as alterações e implante as atualizações no AEM usando suas habilidades Maven em um terminal de linha de comando:

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

7. Atualize para o Página inicial Venia at http://localhost:4502/editor.html/content/venia/us/en.html onde o Teaser do produto foi adicionado.

   

Parabéns

Você acabou de personalizar seu primeiro componente CIF do AEM. Baixe o finalização de arquivos de solução aqui.

Desafio extra

Revise a funcionalidade do Novo selo que já foi implementado no Teaser do produto. Tente adicionar uma caixa de seleção adicional para os autores controlarem quando a função Econômica símbolo deve ser exibido. Será necessário atualizar a caixa de diálogo do componente em ui.apps/src/main/content/jcr_root/apps/venia/components/commerce/productteaser/_cq_dialog/.content.xml.

Recursos adicionais

• Arquétipo do AEM
• Componentes principais da CIF do AEM
• Personalizar os Componentes principais da CIF do AEM
• Personalizar os Componentes principais
• Introdução ao AEM Sites
• Uso do seletor de produto e categoria da CIF

Recursos do Business.Adobe.com