Caso de uso completo do administrador de vitrine e catálogo

Interface do usuário do Adobe Commerce Optimizer - Configure exibições e políticas de catálogo para gerenciar a complexa configuração operacional de catálogo para o caso de uso Carvelo.

Commerce Storefront - renderize a loja usando os dados de catálogo de exemplo carregados em sua instância Adobe Commerce Optimizer e os arquivos de configuração da Commerce Storefront, fstab.yaml e config.json.

Crie uma nova política chamada Categorias de peças do Celport para o Celport vender somente peças de freio e suspensão.

Crie uma nova visualização de catálogo para a loja Celport.

Esta exibição de catálogo usa sua política recém-criada Categorias de partes do Celport e as Marcas da East Coast Inc existentes para garantir que o Celport possa vender somente as marcas Bolt e Cruz como parte do contrato com a East Coast Inc. A exibição de catálogo do Celport usa o catálogo de preços east_coast_inc para dar suporte a cronogramas de preços de produtos que se alinham aos contratos de licenciamento de marca.

Atualize a configuração da loja de comércio para usar os dados da visualização do catálogo do Celport que você criou.

No painel à esquerda, expanda a seção Configuração de armazenamento e clique em Policies.

Clique em Create Policy.

Uma nova página é exibida para adicionar os detalhes da política.

Adicione os detalhes necessários:

Nome = Categorias De Partes Celport

Clique em Add Filter.

Uma caixa de diálogo é exibida para adicionar detalhes do filtro.

Adicione os detalhes do filtro:

• Atributo = parte_categoria
• Operador = EM
• Source de Valor = ESTÁTICO
• Valor = freios
• Valor = suspensão

Para saber mais sobre a diferença entre uma origem de valor STATIC e TRIGGER, consulte tipos de origem de valor.

Na caixa de diálogo Filter details, clique em Save.

Para habilitar o filtro recém-criado, clique nos pontos de ação (…) e selecione Habilitar.

Clique em Save.

Volte para a lista de políticas clicando na seta para trás.

Sua nova política de Categorias de parte do Celport aparece na lista.

No painel à esquerda, expanda a seção Configuração de armazenamento e clique em Catalog views.

Observe as exibições existentes do catálogo: Arkbridge, Kingsbluff e Global.

Clique em Add catalog view.

Preencha os detalhes de exibição do catálogo:

• Nome = Celport
• Fontes do catálogo = en-US
• Políticas (use a lista suspensa) = Marcas da East Coast Inc; Categorias de partes do Celport; Marca; Modelo

Clique em Add para criar a exibição do catálogo.

A página Exibições de catálogo é atualizada para exibir a nova exibição de catálogo.

Obtenha a ID de visualização do catálogo do Celport.

Clique no ícone de informações da exibição do catálogo do Celport na página Exibições do catálogo.

Copie e salve a ID de exibição do catálogo. Você precisa dessa ID ao atualizar a configuração da loja para entregar dados ao seu novo catálogo do Celport.

Para verificar se esta etapa foi concluída corretamente:

• O nome da exibição do catálogo é "Celport"
• A visualização do catálogo mostra quatro políticas associadas
• A ID de exibição do catálogo é exibida e pode ser copiada
• A origem do catálogo mostra "en-US"

No ambiente de desenvolvimento local, abra a pasta onde você clonou o repositório GitHub com os arquivos de configuração padrão da loja.

No diretório raiz da pasta, abra o arquivo config.json.

{
 "public": {
   "default": {
   "commerce-core-endpoint": "https://www.aemshop.net/graphql",
   "commerce-endpoint": "https://na1-sandbox.api.commerce.adobe.com/Fwus6kdpvYCmeEdcCX7PZg/graphql",
   "headers": {
      "cs": {
         "ac-view-id": "9ced53d7-35a6-40c5-830e-8288c00985ad",
         "ac-price-book-id": "west_coast_inc",
         "ac-source-locale": "en-US"
        }
      },
      "analytics": {
         "base-currency-code": "USD",
         "environment": "Production",
         "store-id": 1,
         "store-name": "ACO Demo",
         "store-url": "https://www.aemshop.net",
         "store-view-id": 1,
         "store-view-name": "Default Store View",
         "website-id": 1,
         "website-name": "Main Website"
       }
    }
   }
}

No valor commerce-endpoint, substitua a ID do locatário na URL pela URL da instância Adobe Commerce Optimizer.

Você pode encontrar a ID do locatário no URL da interface do usuário do Commerce Optimizer. Por exemplo, na URL a seguir, a ID do locatário é XDevkG9W6UbwgQmPn995r3.

https://experience.adobe.com/#/@commerceprojectbeacon/in:XDevkG9W6UbwgQmPn995r3/commerce-optimizer-studio/catalog

Substitua o valor ac-view-id pela ID de exibição de catálogo do Celport copiada anteriormente.

Substitua o valor ac-price-book-id por "east_coast_inc".

Depois que você fizer essas alterações, o arquivo config.json deverá ter a seguinte aparência, com os espaços reservados ACO-tenant-id e celport-catalog-view-id substituídos por seus valores:

{
  "public": {
     "default": {
     "commerce-core-endpoint": "https://www.aemshop.net/graphql",
     "commerce-endpoint": "https://na1-sandbox.api.commerce.adobe.com/{{ACO-tenant-id}}/graphql",
     "headers": {
         "cs": {
             "ac-view-id": "{{celport-catalog-view-id}}",
             "ac-price-book-id": "east_coast_inc",
             "ac-source-locale": "en-US"
           }
         },
         "analytics": {
             "base-currency-code": "USD",
             "environment": "Production",
             "store-id": 1,
             "store-name": "ACO Demo",
             "store-url": "https://www.aemshop.net",
             "store-view-id": 1,
             "store-view-name": "Default Store View",
             "website-id": 1,
             "website-name": "Main Website"
          }
      }
  }
}

Salve o arquivo.

Ao salvar as alterações, atualize a configuração do catálogo para usar a visualização do catálogo Carvelo que foi configurada para vender somente peças de freio e suspensão.

Inicie a loja para visualizar a experiência de catálogo específica do Celport criada pela configuração da loja.

1. Na janela do terminal no IDE, inicie a visualização da vitrine local.

   code language-shell
   npm start

   O navegador abre para a visualização de desenvolvimento local em http://localhost:3000.

   Se o comando falhar ou o navegador não abrir, revise as instruções para desenvolvimento local no tópico de configuração Loja.

No navegador, procure por brakes e pressione Enter.

A loja atualiza para exibir a página da lista de produtos mostrando as peças de freio.

Clique em uma imagem de peça de freio para visualizar os detalhes do produto com informações de preço e anotar as informações de preço do produto.

Procure por tires, que é outra categoria de parte disponível nos dados de caso de uso na sua instância Adobe Commerce Optimizer.

Observe que nenhum resultado é retornado. Isso ocorre porque a visualização do catálogo Celport foi configurada para vender somente peças de freio e suspensão.

Experimente atualizar o arquivo de configuração da loja (config.json).

1. Altere os valores de ac-view-id e ac-price-book.

Por exemplo, você pode alterar a ID de exibição do catálogo para a exibição do catálogo Kingsbluff e a ID do catálogo de preços para east_coast_inc. Você pode ver as categorias de partes disponíveis para Kingsbluff revisando a política categorias de partes Kingsbluff.

1. Salve o arquivo.

   Ao salvar o arquivo, a visualização da vitrine local é atualizada automaticamente.

2. Pré-visualize as alterações no navegador usando o recurso Pesquisar para localizar as partes do pneu.

   Observe os diferentes tipos de peças disponíveis e observe os preços atribuídos à visualização do catálogo Kingsbluff.

Esses experimentos demonstram a flexibilidade do Adobe Commerce Optimizer — você pode alternar rapidamente entre diferentes exibições de catálogo e catálogos de preços para criar experiências de compra personalizadas para públicos diferentes sem duplicar os dados do catálogo.