Personalizar AEM componentes principais de CIF customize-cif-components
A variável Projeto CIF Venia é uma base de código de referência para o uso de Componentes principais do CIF. Neste tutorial, você estenderá ainda mais a Teaser do produto para exibir um atributo personalizado do Adobe Commerce. Você também aprenderá mais sobre a integração do GraphQL entre AEM e o Adobe Commerce e os ganchos de extensão fornecidos pelos Componentes principais do 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 uma Eco Friendly como parte do Teaser do produto. Um novo atributo personalizado é criado no Adobe Commerce para indicar se um produto usa o Eco amigável material. Esse atributo personalizado é adicionado como parte da consulta do GraphQL e exibido no Teaser do produto de produtos especificados.
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. Para seguir o tutorial completamente, você precisa de permissão para adicionar Atributos a um produto no Adobe Commerce.
Você também precisa de um IDE do GraphQL, como o GraphiQL ou uma extensão navegador para executar as amostras de código e tutoriais. Se você instalar uma extensão de navegador, verifique se ela pode definir cabeçalhos de solicitação. No Google Chrome, Cliente Altair GraphQL O é uma extensão que pode fazer o trabalho.
Clonar o projeto venia clone-venia-project
Clonar o Projeto Venia e, em seguida, substitua os estilos padrão.
-
Execute o seguinte comando git para que você possa 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 -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
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 author-product-teaser
O Teaser do produto é apresentado em todo este tutorial. Como primeira etapa, adicione uma instância do Teaser do produto à página inicial para entender a funcionalidade da linha de base.
-
Acesse a página inicial 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 na lista suspensa do localizador de ativos selecione Produtos. Essa lista deve exibir uma lista de produtos disponíveis de um Adobe Systems Comércio instância conectado. Selecione, arraste e solte um produto no Teaser do produto exibido na página.
note note NOTE Observação: você também pode configurar o produto exibido definindo o componente na caixa de diálogo (clicando na chave inglesa). -
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 Systems Comércio add-custom-attribute
Os produtos e os dados do produto exibidos em AEM são armazenados em Adobe Systems Comércio. Próximo adicionar um atributo para o Eco Friendly como parte do atributo de produto definido usando o Adobe Systems Comércio interface.
-
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.
-
No visualizaçã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)
table 0-row-3 1-row-3 2-row-3 3-row-3 Conjunto de campos Rótulo do campo Valor Propriedades do atributo Rotular do atributo Eco Friendly Propriedades de atributos Tipo de entrada do catálogo Sim/Não Propriedades do Atributo Avançado Código do atributo eco_friendly Clique Salvar Atributo quando terminar.
-
Role até a parte inferior do produto e expanda o cabeçalho Atributos . Você deverá ver o novo campo Eco Friendly . Alterne para Sim.
Salvar as alterações no produto.
note tip TIP Mais detalhes sobre gerenciamento Os atributos do produto podem ser encontrados no guia do usuário do Adobe Commerce. -
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 enviar o tipo de cache para Atualizar
note tip TIP Mais detalhes sobre o Gerenciamento de cache podem ser encontrados no guia de Adobe Systems Comércio usuário.
Usar um IDE do GraphQL para verificar o atributo use-graphql-ide
Antes de entrar no AEM código, é útil explorar a Visão geral🔗 do GraphQL usando um GraphQL IDE. A integração do Adobe Systems Comércio com o AEM é feita principalmente por meio de uma série de queries GraphQL. A compreensão e modificação das consultas GraphQL é uma das principais maneiras pelas quais os Componentes principais de CIF podem ser estendidos.
Em seguida, use um GraphQL IDE para verificar se o eco_friendly
O atributo foi adicionado ao conjunto de atributos do produto. As capturas de tela deste tutorial estão usando o Cliente Altair GraphQL Extensão do Google Chrome.
-
Abra o GraphQL IDE e digite a URL
http://<commerce-server>/graphql
na barra de URL do IDE ou da extensão. -
Adicione os seguintes produtos query onde
YOUR_SKU
está a SKU do produto usado no exercício anterior:code language-json { products( filter: { sku: { eq: "YOUR_SKU" } } ) { items { name sku eco_friendly } } }
-
Execute a query e receberá uma resposta curtir:
code language-json { "data": { "products": { "items": [ { "name": "Valeria Two-Layer Tank", "sku": "VT11", "eco_friendly": 1 } ] } } }
O valor de Sim é um número inteiro de 1. Esse valor é útil ao escrever a consulta do GraphQL em Java™.
note tip TIP Leia a documentação mais detalhada sobre Adobe Commerce GraphQL aqui.
Atualizar o Modelo do Sling para o Teaser do produto updating-sling-model-product-teaser
Em seguida, estenda a lógica de negócios do Teaser do produto implementando um Modelo do Sling. Modelos Sling são objetos POJO (Plain Old Java™ Objects) orientados por anotações que implementam a lógica de negócios exigida pelo componente. Os Modelos do Sling são usados com os scripts HTL como parte do componente. Siga as padrão de delegação para Modelos do Sling para que você possa estender partes do modelo existente do Teaser do produto.
Os Modelos do Sling são implementados como Java™ e podem ser encontrados no core módulo do projeto gerado.
Uso o IDE de sua escolha para importar o projeto Venia. As capturas de tela usadas são do IDE do Visual Studio Code.
-
No IDE, navegue sob o core módulo para:
core/src/main/java/com/venia/core/models/commerce/MyProductTeaser.java
.MyProductTeaser.java
é uma interface do Java™ que estende a interface do CIF ProductTeaser .Já foi adicionado um novo método chamado
isShowBadge()
para exibir um selo se o produto for considerado "Novo". -
Adicionar
isEcoFriendly()
à interface:code language-java @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 novo método é introduzido para encapsular a lógica para indicar se o produto tem a função
eco_friendly
atributo definido como Sim ou Não. -
Em seguida, inspecione o
MyProductTeaserImpl.java
emcore/src/main/java/com/venia/core/models/commerce/MyProductTeaserImpl.java
.A variável padrão de delegação para Modelos do Sling permite
MyProductTeaserImpl
para referênciaProductTeaser
por meio dasling:resourceSuperType
propriedade:code language-java @Self @Via(type = ResourceSuperType.class) private ProductTeaser productTeaser;
Para os métodos que não deseja substituir ou alterar, você pode retornar o valor que retorna
ProductTeaser
. Por exemplo:code language-java @Override public String getImage() { return productTeaser.getImage(); }
Esse método minimiza a quantidade de código Java™ que um implementação deve gravar.
-
Um dos pontos de extensão extras fornecidos AEM Componentes principais de CIF é o
AbstractProductRetriever
que fornece acesso a atributos específicos do produto. Inspect oinitModel()
método:code language-java 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()); } } ...
O
@PostConstruct
anotação garante que esse método seja chamado quando o Modelo de Sling é inicializado.Observe que a consulta do GraphQL do produto já foi estendida usando o
extendProductQueryWith
método para recuperar o adicionalcreated_at
atributo. Esse atributo é usado posteriormente como parte da variávelisShowBadge()
método. -
Atualize a consulta do GraphQL para incluir a
eco_friendly
atributo na consulta parcial:code language-java //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
extendProductQueryWith
Esse método é uma maneira avançada 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ável
addCustomSimpleField
é usado para recuperar oeco_friendly
atributo. Este atributo ilustra como é possível query para quaisquer atributos personalizados que fazem parte da Adobe Systems Comércio schema.note note NOTE O createdAt()
método foi implementado como parte da interface🔗 do produto. A maioria dos atributos de esquema encontrados com frequência foram implementados, portanto, useaddCustomSimpleField
somente para atributos verdadeiramente personalizados. -
Adicione um logger para que você possa depurar o código Java™:
code language-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
isEcoFriendly()
método:code language-java @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
é usado para buscar o produto e a variávelgetAsInteger()
é usado para obter o valor doeco_friendly
atributo. Com base nas consultas do GraphQL executadas anteriormente, você sabe que o valor esperado quando a variáveleco_friendly
atributo está definido como "Sim" é na verdade um número inteiro de 1.Agora que o Modelo Sling foi atualizado, a marcação do Componente deve ser atualizada para realmente exibir um indicador de Eco Friendly com base no Modelo Sling.
Personalização da marcação do teaser do produto customize-markup-product-teaser
Uma extensão comum de componentes do AEM é modificar a marcação gerada pelo componente. Essa edição é feita substituindo o script HTL que o componente usa para renderizar sua marcação. O Idioma de modelo HTML (HTL) é uma linguagem de modelagem leve que AEM componentes usam para renderizar dinamicamente a marcação com base na conteúdo criada, permitindo que os componentes sejam reutilizados. O Teaser do produto, por exemplo, pode ser reutilizado várias vezes para exibir produtos diferentes.
Nesse caso, você deseja renderizar uma banner sobre a teaser para indicar que o produto é "Eco Friendly" com base em um atributo personalizado. O padrão de design para personalizar a marcação de um componente é padrão para todos os componentes AEM, não apenas para os componentes principais AEM CIF.
cif.shell.picker
para as caixas de diálogo do componente. Consulte Uso do produto CIF e categoria seletor para obter detalhes.-
No IDE, navegue e expanda a janela
ui.apps
e expandir a hierarquia de pastas para:ui.apps/src/main/content/jcr_root/apps/venia/components/commerce/productteaser
e inspecionar o.content.xml
arquivo.code language-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. AEM Em vez de copiar e colar os scripts HTL do Teaser do produto dos Componentes principais do CIF, você pode usar osling:resourceSuperType
para herdar toda a funcionalidade. -
Abra o arquivo
productteaser.html
. Este arquivo é uma cópia doproductteaser.html
arquivo do Teaser do produto CIF.code language-html <!--/* 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
é usada e atribuída àproduct
variável. -
Modificar
productteaser.html
para que você possa chamar oisEcoFriendly
método aplicado no exercício anterior:code language-html ... <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 variável
get
eis
parte do método é descartada e a primeira letra é em minúsculas. EntãoisShowBadge()
torna-se.showBadge
eisEcoFriendly
torna-se.ecoFriendly
. Com base no valor booleano retornado de.isEcoFriendly()
determina se a variável<span>Eco Friendly</span>
é exibido.Mais informações sobre
data-sly-test
e outras declarações de blocos HTL podem ser encontradas aqui. -
Salvar as mudanças e implantar as atualizações para AEM usando suas habilidades maven, a partir de um terminal de linha de comando:
code language-shell $ cd aem-cif-guides-venia/ $ mvn clean install -PautoInstallSinglePackage,cloud
-
Abra uma nova janela do navegador e navegue até a AEM e no console osGi> Status > Modelos Sling: http://localhost:4502/system/console/status-slingmodels
-
Search e
MyProductTeaserImpl
você verá uma linha curtir o seguinte:code language-plain com.venia.core.models.commerce.MyProductTeaserImpl - venia/components/commerce/productteaser
Essa linha indica que o Modelo de Sling foi implantado e mapeado corretamente para o componente correto.
-
Atualize para o 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
eco_friendly
atributo definido como Sim, você verá o texto "Eco Friendly" no página. Tente alternar para produtos diferentes para ver a mudança de comportamento. -
Próximo abra o AEM
error.log
para ver as declarações de log adicionadas. Oerror.log
está em<AEM SDK Install Location>/crx-quickstart/logs/error.log
.Search os logs do AEM para ver as declarações de log adicionadas no Modelo do Sling:
code language-plain 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** ...
note caution CAUTION Você também pode ver alguns rastreamentos de pilha se o produto usado no teaser não tiver o eco_friendly
atributo como parte de seu conjunto de atributos.
Adicione estilos para o selo ecológico add-styles
Nesse ponto, a lógica de quando exibir a variável Eco Friendly o símbolo está funcionando, no entanto, o texto sem formatação pode usar alguns estilos. Em seguida, adicione um ícone e estilos à ui.frontend
módulo para concluir a implementação.
-
Baixe o eco_friendly.svg arquivo. Esse arquivo é usado como o Eco Friendly selo.
-
Retorne ao IDE e navegue até o
ui.frontend
pasta. -
Adicione o
eco_friendly.svg
arquivo para oui.frontend/src/main/resources/images
pasta: -
Abra o arquivo
productteaser.scss
emui.frontend/src/main/styles/commerce/_productteaser.scss
. -
Adicione as seguintes regras Sass dentro do
.productteaser
classe:code language-scss .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'); } } ... }
note note NOTE Confira Estilização dos Componentes principais do CIF para obter mais detalhes sobre fluxos de trabalho de front-end. -
Salvar as mudanças e implantar as atualizações para AEM usando suas habilidades maven, a partir de um terminal de linha de comando:
code language-shell $ cd aem-cif-guides-venia/ $ mvn clean install -PautoInstallSinglePackage,cloud
-
Atualize para o Página inicial Venia em http://localhost:4502/editor.html/content/venia/us/en.html onde o Teaser do produto foi adicionado.
Parabéns congratulations
AEM Você personalizou seu primeiro componente CIF! Baixe o arquivos de solução concluídos aqui.
Desafio bônus bonus-challenge
Revise a funcionalidade do selo Novo que já foi implementado na Teaser do produto. Tente adicionar uma caixa de seleção extra para que os autores controlem quando o selo Eco Friendly deve ser exibido. Atualize a caixa de diálogo do componente em ui.apps/src/main/content/jcr_root/apps/venia/components/commerce/productteaser/_cq_dialog/.content.xml
.