Estendendo o painel Detalhes do Produto

Você pode personalizar o painel de detalhes do produto que é exibido em qualquer uma das visualizações no Sterling Store Engagement.

Customizando os itens sanfonados

É possível incluir um novo item sanfona ou substituir um item sanfona pronto para uso existente no painel Detalhes do produto ..

O arquivo de configuração que deve ser atualizado para substituir os itens sanfonados prontos para uso no painel Detalhes do Produto na visualização Atendimento ao Cliente é customer-view-details.config.ts e para as outras visualizações é fulfillment-view-details.config.ts.

Use o seguinte procedimento para customizar o painel Detalhes do Produto :

Crie a seguinte estrutura de pastas em store-extensions-src, se ainda não estiver presente: store-extensions-src/app/app-common/product-details-modal
Copie app-common-extension.module.ts de WORKSPACE/store-frontend/src/app/app-common para WORKSPACE/store-frontend/store-extensions-src/app/app-common.
Nota: Se app-common-extension.module.ts já estiver presente, não copie o arquivo. Componentes e provedores customizados são declarados neste arquivo.
Para personalizar os itens do acordeão no painel Product details (Detalhes do produto ) na exibição Customer service (Atendimento ao cliente ), copie o arquivo customer-view-details.config.ts de WORKSPACE/store-frontend/src/app/app-common/product-details-modal para WORKSPACE/store-frontend/store-extensions-src/app/app-common/product-details-modal.
Para personalizar os itens do acordeão no painel Product details (Detalhes do produto ) nas exibições Order fulfillment (Atendimento de pedidos ), Inventory management (Gerenciamento de estoque ) ou Configuration (Configuração ), copie o arquivo fulfillment-view-details.config.ts de WORKSPACE/store-frontend/src/app/app-common/product-details-modal para WORKSPACE/store-frontend/store-extensions-src/app/app-common/product-details-modal.

Customizando a área de janela de detalhes do produto primário

É possível customizar a área de janela de detalhes do produto primário no painel Detalhes do produto .. O componente que você precisa customizar para substituir os detalhes do produto primário pronto para uso na visualização Atendimento ao cliente é customer-view-primary-detail.ts e para as outras visualizações é fulfillment-view-primary-detail.ts.

A tabela a seguir lista as propriedades nos arquivos fulfillment-view-details.config.ts e customer-view-details.config.ts

Tabela 1. Propriedades em arquivos de configuração
Propriedade	Tipo	Descrição
`primaryDetail`	objeto	Usado para definir a seção de detalhes do produto primário da página Essa propriedade pode ter os seguintes valores: `tid`. Para teste. `component`. Referência de componente...
`accordionItems`	matriz<object>	Usado para definir os painéis sanfonados como objetos individuais. Essa propriedade pode ter os seguintes valores: `id`. ID exclusivo para o item, que pode ser usado para expandir a área de janela sanfonada com base em uma condição ou para manipular a lógica do emissor de dados no contêiner pai usando o caso de comutador `tid`. Usado para o teste `component`. Referência de componente... `displayBundleKey`. Título para o painel sanfonado. `lazyLoad`. Opcional. Indica se o componente sanfona deve ser carregado inicialmente ou após a expansão do componente

Esses componentes são carregados dinamicamente e as entradas a seguir são transmitidas para esses componentes:

Entradas para o componente de detalhes do produto primário

primaryData. Resposta da API getCompleteItemList .
parentComponentId. ID do componente e o tid na configuração.
activatedRoute Referência deste ActivatedRoute do componente

Entradas para o componente do item sanfona

config. A configuração mencionada para este painel no arquivo add-product-page.config.ts
primaryData. A mesma entrada mencionada para o componente de detalhe primário.
activatedRoute. Referência de activatedRoute para este componente..