Personalizar os Componentes principais do AEM CIF customize-cif-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 -PautoInstallSinglePackage,cloud

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 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 vitrine 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 até a Home Page do site: http://localhost:4502/editor.html/content/acme/us/en.html

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

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

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.

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

Navegue até Catálogo > Produtos.

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

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

Preencha o formulário Novo Atributo com os seguintes valores (deixe as configurações padrão para outros valores)

Clique em Salvar atributo quando terminar.

Role até a parte inferior do produto e expanda o cabeçalho Atributos. Você deve ver o novo campo Eco-Friendly. Alterne a opção para Sim.

Salve as alterações no produto.

Navegue até Sistema > Ferramentas > Gerenciamento de Cache. Como foi feita uma atualização no esquema de dados, você deve invalidar alguns dos Tipos de cache no Adobe Commerce.

Marque a caixa ao lado de Configuração e envie o tipo de cache para Atualização

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

Adicione a seguinte consulta de produtos, onde YOUR_SKU é a SKU do produto usado no exercício anterior:

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

Execute a query e você receberá uma resposta como a seguinte:

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

O valor de Sim é um inteiro de 1. Esse valor é útil ao escrever a consulta do GraphQL em Java™.

No IDE, navegue no módulo core para: core/src/main/java/com/venia/core/models/commerce/MyProductTeaser.java.

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

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

Adicionar 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();
}

Este novo método é introduzido para encapsular a lógica para indicar se o produto tem o atributo eco_friendly definido como Sim ou Não.

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

O padrão de delegação para Modelos do Sling permite que MyProductTeaserImpl faça referência ao modelo ProductTeaser por meio da propriedade sling:resourceSuperType:

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

Para os métodos que você não deseja substituir ou alterar, você pode retornar o valor retornado por ProductTeaser. Por exemplo:

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

Este método minimiza a quantidade de código Java™ que uma implementação deve gravar.

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

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 initialize the productRetriever */
    @PostConstruct
    public void initModel() {
        productRetriever = productTeaser.getProductRetriever();

        if (productRetriever != null) {
            productRetriever.extendProductQueryWith(p -> p.createdAt());
        }

    }
...

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

Observe que a consulta GraphQL do produto já foi estendida usando o método extendProductQueryWith para recuperar o atributo created_at adicional. Este atributo é usado posteriormente como parte do método isShowBadge().

Atualize a consulta GraphQL para incluir o atributo 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)
        );
    }
}

Adicionar ao 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, o addCustomSimpleField é usado para recuperar o atributo eco_friendly. Este atributo ilustra como você pode consultar qualquer atributo personalizado que faça parte do esquema do Adobe Commerce.

Adicione um agente de log para 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);

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

@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, o productRetriever é usado para buscar o produto e o método getAsInteger() é usado para obter o valor do atributo eco_friendly. Com base nas consultas GraphQL executadas anteriormente, você sabe que o valor esperado quando o atributo eco_friendly é definido como "Sim" é na verdade um inteiro de 1.

Agora que o Modelo do Sling foi atualizado, a marcação do Componente deve ser atualizada para realmente exibir um indicador de Compatível com a tecnologia Eco com base no Modelo do Sling.

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

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://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"/>

A definição de componente acima é para o Teaser do produto em seu projeto. Observe a propriedade sling:resourceSuperType="core/cif/components/commerce/productteaser/v1/productteaser". Esta propriedade é um exemplo de criação de um Componente proxy. Em vez de copiar e colar os scripts HTL do Teaser do produto dos Componentes principais do AEM CIF, você pode usar o sling:resourceSuperType para herdar toda a funcionalidade.

Abra o arquivo productteaser.html. Este arquivo é uma cópia do arquivo 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 Sling para MyProductTeaser é usado e atribuído à variável product.

Modifique productteaser.html para poder chamar o método isEcoFriendly 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 Modelo do Sling no HTL, a parte get e is do método é descartada e a primeira letra é em minúsculas. Então isShowBadge() torna-se .showBadge e isEcoFriendly torna-se .ecoFriendly. Com base no valor booleano retornado de .isEcoFriendly(), determina se <span>Eco Friendly</span> é exibido.

Mais informações sobre data-sly-test e outras instruções em bloco HTL podem ser encontradas em A Especificação do HTL.

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

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

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

Pesquise por MyProductTeaserImpl e você deverá ver uma linha como a seguinte:

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

Essa linha indica que o modelo Sling foi corretamente implantado e mapeado para o componente correto.

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

Se o produto tiver o atributo eco_friendly definido como Sim, você deverá ver o texto "Eco Friendly" na página. Tente alternar para produtos diferentes para ver a mudança de comportamento.

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

Pesquise nos logs do AEM para ver as instruções de log adicionadas no Modelo 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**
...

Baixe o arquivo eco_friendly.svg. Este arquivo é usado como o selo Eco Friendly.

Retorne ao IDE e navegue até a pasta ui.frontend.

Adicionar o arquivo eco_friendly.svg à pasta ui.frontend/src/main/resources/images:

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

Adicionar as seguintes regras Sass dentro da classe .productteaser:

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

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

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

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