DocumentaçãoAEM as a Cloud ServiceGuia do usuário

Atributos personalizados para o Carrossel de produtos do CIF product-carousel

Last update: Tue Aug 19 2025 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Aplica-se a:
  • Experience Manager as a Cloud Service

Criado para:

  • Administrador
  • Desenvolvedor

Saiba como estender o componente Carrossel de produtos do AEM CIF atualizando o Modelo do Sling e personalizando a marcação.

Introdução intro

O componente Carrossel de produtos é estendido por todo este tutorial. Como primeira etapa, adicione uma instância do Carrossel do produto à página inicial para entender a funcionalidade da linha de base:

  1. Navegue até a Página Inicial do site, por exemplo http://localhost:4502/editor.html/content/acme/us/en.html

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

    Componente do carrossel do produto

  3. Expanda o painel lateral (se ainda não estiver sendo exibido) e na lista suspensa do localizador de ativos selecione Produtos.

    Produtos do carrossel

  4. Isso deve exibir uma lista de produtos disponíveis em uma instância conectada do Adobe Commerce.

    Instância Conectada

  5. Os produtos serão exibidos abaixo com as propriedades padrão:

    Produto exibido com as propriedades

Atualizar o modelo do Sling update-sling-model

É possível estender a lógica de negócios do Carrossel de produtos implementando um Modelo do Sling:

  1. No IDE, navegue no módulo principal até core/src/main/java/com/venia/core/models/commerce e crie uma interface CustomCarousel que estenda a interface ProductCarousel do CIF:

    code language-text 
    package com.venia.core.models.commerce;
import com.adobe.cq.commerce.core.components.models.productcarousel.ProductCarousel;
public interface CustomCarousel extends ProductCarousel {
}

  2. Em seguida, crie uma classe de implementação CustomCarouselImpl.java em core/src/main/java/com/venia/core/models/commerce/CustomCarouselImpl.java.

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

    code language-text 
    @Self
@Via(type = ResourceSuperType.class)
private ProductCarousel productCarousel;

  3. A anotação @PostConstruct garante que esse método seja chamado quando o Modelo Sling for inicializado. A consulta do GraphQL do produto já foi estendida usando o método extendProductQueryWith para recuperar atributos. Atualize a consulta do GraphQL para incluir o atributo na consulta parcial:

    code language-javascript 
    @PostConstruct
private void initModel() {
productsRetriever = productCarousel.getProductsRetriever();

if(productCarousel.getProductsRetriever() != null)
productCarousel.getProductsRetriever().extendProductQueryWith(p -> p
.createdAt()
.addCustomSimpleField("accessory_gemstone_addon")
);
}

    No código acima, o addCustomSimpleField é usado para recuperar o atributo accessory_gemstone_addon.

Personalização da marcação customize-markup

Para personalizar ainda mais a marcação:

  1. Crie uma cópia de productcard.html de /apps/core/cif/components/commerce/productcarousel/v1/productcarousel (o caminho crxde do componente principal) para o módulo ui.apps ui.apps/src/main/content/jcr_root/apps/venia/components/commerce/productcarousel/productcard.html.

  2. Edite productcard.html para chamar o atributo personalizado, que é mencionado na classe de implementação:

    code language-xml 
    ..
<div
    data-product-sku="${product.commerceIdentifier.value}"
    data-product-base-sku="${product.combinedSku.baseSku}"
    id="${product.id}"
    data-cmp-data-layer="${product.data.json}"
    class="card product__card">
    <span>${product.product.responseData['accessory_gemstone_addon']}</span>
    <a href="${product.URL}"
        target="${productCarousel.linkTarget}"
..

  3. Salve as alterações e implante as atualizações no AEM usando o comando Maven, em um terminal de linha de comando. Você poderá ver o valor do atributo personalizado accessory_gemstone_addon para os produtos selecionados na página.

recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab