DocumentaçãoCommerceGuia do Adobe Commerce Optimizer

[Somente SaaS]{class="badge positive" title="Aplica-se somente ao Adobe Commerce as a Cloud Service e Adobe Commerce Optimizer projetos (infraestrutura SaaS gerenciada pela Adobe)."}

Configurar a loja

Last update: Mon Oct 13 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

Criado para:

  • Desenvolvedor

Este guia orienta você na configuração de uma loja para sua instância do Adobe Commerce Optimizer usando os Serviços de entrega de borda da Adobe. Sua loja inclui código padronizado, conteúdo de amostra e suporte para páginas de detalhes do produto e descoberta de produtos (pesquisa e filtragem).

Tempo estimado para conclusão: 30-45 minutos

Pré-requisitos

  • Conta do GitHub que pode criar repositórios e está configurada para desenvolvimento local (github.com)
  • Adobe Commerce Optimizerinstância com dados de exemplo e exibições e políticas de catálogo configuradas

Dados de instância necessários

Antes de começar, colete as seguintes informações da instância do Adobe Commerce Optimizer:

NOTE
Os clientes com acesso de avaliação podem encontrar o endpoint do GraphQL no email de boas-vindas recebido quando sua instância foi criada. As instâncias de avaliação vêm pré-configuradas com dados de amostra, visualizações de catálogo e políticas.

Configurar etapas

  1. Criar projeto de vitrine eletrônica-Use a ferramenta do Criador de Sites para criar um novo projeto de vitrine eletrônica com código padronizado, conteúdo de amostra e um arquivo de configuração.

  2. Personalizar a configuração da vitrine eletrônica-Atualize o arquivo config.json no repositório para se conectar à sua instância Adobe Commerce Optimizer.

  3. Verificar configuração (10 minutos)

    • Visualizar o site da loja
    • Testar páginas de detalhes do produto e funcionalidade de pesquisa

Criar projeto da loja

A ferramenta Criador de sites cria um projeto completo da loja com os seguintes componentes:

  • Site: página de aterrissagem de vitrines com conteúdo padrão
  • Código: repositório com arquivos de origem padronizados
  • Conteúdo: ambiente de Autor de Documentos com arquivos de conteúdo do site
  • Configuração do Commerce: arquivo config.json para configuração específica de instância

Etapa 1: gerar o projeto

  1. Abra a ferramenta do Criador de Sites

    Site Creator tool {width="700" modal="regular"}

  2. Selecione Criar Novo Site (Código e Conteúdo).

  3. Conclua a configuração do site:

    • Organização/nome de usuário do GitHub: digite seu nome de usuário ou nome de organização do GitHub
    • Nome do Site: escolha um nome descritivo para sua vitrine eletrônica
    • Ponto de extremidade do Commerce GraphQL (opcional): insira o ponto de extremidade do GraphQL para sua instância Adobe Commerce Optimizer

  4. Clique em Criar Site para criar o repositório GitHub com o código padrão da loja.

    Quando o repositório é criado, o Criador do site atualiza e solicita que você instale o aplicativo Sincronização de código.

Etapa 2: instalar o aplicativo de sincronização de código

  1. Clique em Install AEM Code Sync App para abrir o instalador da Sincronização de Código em uma nova guia.

  2. Configure o aplicativo Sincronização de código:

    • Selecione sua organização do GitHub e clique em Configure.
    • Na interface de Sincronização de Código, clique em Only select repositories.
    • Clique no menu Select repositories e escolha o repositório de código da loja que você criou.
    • Clique em Save para registrar seu repositório.

  3. Retorne à janela do navegador onde o Criador de Sites está aberto e clique em Criar Site.

    O Criador de sites copia o conteúdo do modelo da loja para o ambiente do Autor do documento. Esse processo leva de 1 a 2 minutos.

  1. Na seção Detalhes do site, analise os links do projeto da loja:

    Storefront setup complete {width="700" modal="regular"}

    Use esses links para gerenciar o código, o conteúdo e a configuração da loja.

  2. Copie e salve estes links para referência futura: clique em **Copy.

Configurar a loja

Atualize a configuração da loja para se conectar à instância do Adobe Commerce Optimizer.

  1. Abra o gerenciador de configurações usando o link salvo anteriormente:

    https://da.live/sheet#/<username or org>/<repo name>/config.json

  2. Localize a seção cs (Serviço de Catálogo) na configuração.

  3. Substitua os valores de espaço reservado pelos valores da sua instância. Consulte Pré-requisitos.

    code language-json 
    "cs": {
   "AC-View-ID": "{catalogViewId}",
   "AC-Environment-ID": "{tenantId}",
   "AC-Source-Locale": "en_US"
}

  4. Salve o arquivo de configuração.

NOTE
As alterações na configuração podem levar alguns minutos para se propagarem. Se você não vir os dados imediatamente, aguarde de 2 a 3 minutos antes de solucionar o problema.

Verificar sua configuração

Teste sua loja para garantir que ela esteja conectada corretamente à sua instância do Adobe Commerce Optimizer.

Etapa 1: Exibir a página inicial da loja

  1. Navegue até o URL de visualização ao vivo:

    https://main--{SITE}--{ORG}.aem.live

    Substitua {ORG} e {SITE} pela sua organização do GitHub e pelo nome do site.

  2. Critério de sucesso: você deve ver a página inicial da loja com conteúdo padronizado.

    ACO storefront site with boilerplate {width="700" modal="regular"}

Etapa 2: testar páginas de detalhes do produto

Consulte a página de detalhes do produto padrão para verificar se os dados do produto estão carregando corretamente.

  1. Acesse uma página de produto de exemplo:
    https://main--{SITE}--{ORG}.aem.live/products/placeholder/{sku}

    Use qualquer SKU dos dados de amostra, por exemplo:
    https://main--{SITE}--{ORG}.aem.live/products/placeholder/aur-flu-tir-std-2017

    Para a vitrine padrão, você pode usar o valor placeholder no roteiro para ver o produto. Quando você começa a personalizar a loja, pode personalizar o código da loja para definir o caminho para a página de detalhes do produto com base nas rotas do produto definidas no catálogo.

    note tip
    TIP
    Exibir SKUs disponíveis na página Sincronização de Dados na sua instância Adobe Commerce Optimizer.

  2. Critério de sucesso: a página deve exibir:

    • Nome, descrição e preço do produto
    • Imagens do produto
    • Adicionar à funcionalidade do carrinho
    • Dados recuperados da sua instância Adobe Commerce Optimizer

    Default product detail page showing a product from the sample data {width="700" modal="regular"}

Etapa 3: testar a funcionalidade de pesquisa padrão

Testar os recursos padrão do produto, incluindo pesquisa e filtragem.

  1. Na página inicial da loja, clique no ícone de lupa no cabeçalho.

  2. Digite a sequência de pesquisa tires e pressione Enter.

  3. Critério de sucesso: você deve ver:

    • Página de resultados da pesquisa com produtos para pneus
    • Opções de filtragem na barra lateral
    • Listagens de produtos com imagens e preços

    View search results page {width="675" modal="regular"}

  4. Clique em qualquer produto de pneu para exibir a página de detalhes.

    View product details page {width="675" modal="regular"}

Solução de problemas

Se você encontrar problemas durante a configuração, use o console do Inspetor de páginas da Web para verificar se há erros. Além disso, tente limpar o cache do navegador ou usar um navegador diferente.

Use as orientações a seguir para verificar problemas comuns:

Problemas comuns

Problema
Sintomas
Solução
Falha na instalação da Sincronização de Código
Não é possível concluir a configuração da Sincronização de código
  • Verifique se você tem acesso de administrador à sua organização do GitHub.
  • Tente usar um repositório pessoal em vez de uma organização.
  • Verifique as permissões do GitHub e tente novamente.
Site não carregando
404 ou erros de conexão
  • Verifique o formato da URL do site: https://main--{SITE}--{ORG}.aem.live
  • Verifique se o aplicativo de sincronização de código foi instalado corretamente.
  • Certifique-se de que o repositório seja público ou configurado corretamente.
Nenhum dado de produto exibido
As páginas de produto mostram espaços reservados ou erros
  • Verifique seus valores de configuração em config.json
  • Na instância Adobe Commerce Optimizer, verifique a página Sincronização de Dados para saber se os produtos de exemplo foram carregados. Se nenhum produto estiver disponível, recarregue os dados de amostra ou adicione um produto usando a API de assimilação de dados. Espere alguns minutos para que as alterações de configuração se propaguem.
  • Tente recuperar os detalhes do produto usando a consulta de produtos do Serviço de Merchandising, usando os mesmos cabeçalhos configurados no arquivo config.json. Se você puder recuperar os dados, isso provavelmente será um problema com a configuração de exibição de catálogo ou um erro de índice.
A pesquisa não retorna resultados
Página de resultados de pesquisa vazia
  • Verifique se você pode recuperar os resultados da pesquisa de produtos usando a consulta productSearch dos Serviços de merchandising usando os mesmos cabeçalhos configurados no arquivo config.json. Se você puder recuperar os dados, isso provavelmente será um problema com a configuração de exibição de catálogo ou um erro de índice.
  • Confirme se a ID de exibição de catálogo no arquivo config.json corresponde à ID de exibição de catálogo em Adobe Commerce Optimizer.
  • No Adobe Commerce Optimizer, verifique a configuração das políticas, o local e os catálogos de preços usados na configuração do cabeçalho da loja.
  • Verifique se as configurações de metadados do atributo estão definidas corretamente para pesquisa.

Lista de verificação de validação

Antes de prosseguir para as próximas etapas, verifique se a vitrine eletrônica está funcionando corretamente verificando o seguinte:

Lista de verificação Os valores de configuração correspondem às suas configurações de instância

Lista de verificação Carregamentos de página inicial da Storefront sem erros

Lista de verificação Pelo menos uma página de detalhes do produto exibe informações completas

A funcionalidade de pesquisa Lista de verificação retorna resultados relevantes

Lista de verificação As imagens do produto estão carregando corretamente

Lista de verificação Os valores de configuração correspondem às suas configurações de instância

Obter ajuda

Se os problemas persistirem:

Próximas etapas

Depois de configurar e verificar sua loja, você pode:

  1. Instalar o Sidekick - Extensão do navegador para editar, visualizar e publicar conteúdo diretamente do seu site

  2. Configurar um ambiente de desenvolvimento local - Criar um ambiente local para personalizar o código e o conteúdo da vitrine

Aprender e explorar

Related Articles
Consulte a documentação da Adobe Commerce Storefront para saber mais sobre a atualização do conteúdo do site e a integração com componentes de front-end e dados de back-end do Commerce.
recommendation-more-help
d9be8a90-e85e-4ee7-b6f6-d532559b0812