[Somente SaaS]{class="badge positive" title="Aplicável somente a projetos do Adobe Commerce as a Cloud Service e do Adobe Commerce Optimizer (infraestrutura SaaS gerenciada pela Adobe)."}

Casos de uso

Os casos de uso a seguir demonstram funcionalidade principal e cenários de negócios com suporte do Adobe Commerce as a Cloud Service. Eles permitem acelerar o desenvolvimento e iniciar experiências de alto impacto.

Se encontrar algum problema, consulte a seção Solução de problemas para obter orientação.

Pré-requisitos

Antes de tentar qualquer um desses casos de uso, conclua os seguintes pré-requisitos:

  1. Crie sua instância do Cloud Service usando estas opções:

    1. Selecione Sandbox na lista suspensa Ambiente.
    2. Selecione Adobe Store na lista suspensa Dados de teste.
  2. Faça logon em sua Adobe Experience Cloud conta

  3. Configure sua vitrine do Cloud Service usando estas opções:

    1. Selecione adobe-commerce/adobe-demo-store para o modelo.
    2. Selecione Escolher uma instância disponível (Mesh -> SaaS) para o método de conexão.

Fluxo de trabalho de check-out

Esse fluxo de trabalho demonstra o processo de finalização para um cliente que compra um produto na loja e como você, como administrador, pode confirmar o pedido.

Habilitar serviços de pagamento

  1. No Administrador do Commerce, navegue até Lojas > Settings > Configuração > Métodos de pagamento.

  2. Na seção Configuração Geral, digite os Payment Services Sandbox ID e Payment Services Sandbox Key. Você pode obter essas IDs seguindo as etapas descritas em Integração da sandbox

  3. Defina a lista suspensa Habilitar para Sim.

  4. Clique em Salvar configuração.

Comprar um produto

  1. Vá para a loja criada nos pré-requisitos.

  2. Localize e selecione um produto. Faça as seleções de personalização necessárias. Depois clique em Adicionar ao carrinho.

    Interface de pesquisa e seleção de produtos da Storefront {width="600" modal="regular"}

  3. Selecione o ícone do carrinho para visualizar seu carrinho.

    Carrinho de compras com produtos adicionados e opções de check-out {width="600" modal="regular"}

  4. Clique em Check-out.

    Botão Check-out na página do carrinho {width="600" modal="regular"}

  5. Insira os detalhes de contato e as informações de entrega necessários. Você pode usar informações fictícias para este pedido.

  6. Para fazer check-out, selecione Cheque/Ordem de Pagamento. Se quiser usar um cartão de crédito, use um dos cartões de teste fornecidos pelo Paypal. Você pode usá-los com qualquer data de expiração futura e qualquer CVC.

    Formulário de check-out com campos de informações de contato e remessa {width="600" modal="regular"} Formulário de pagamento de cartão de crédito no check-out {width="600" modal="regular"}

  7. Clique em Fazer pedido.

Confirmar o pedido

  1. Abra o Administrador do Commerce: <your store URL>/admin.

  2. Faça logon usando sua Adobe ID.

  3. Navegue até Vendas > Pedidos.

    Grade de pedidos no Commerce Admin mostrando pedidos recentes {width="600" modal="regular"}

  4. Procure o pedido feito e confirme os detalhes.

    Página de detalhes do pedido com informações do cliente e do produto {width="600" modal="regular"}

Atualizar conteúdo da loja

Crie, edite e publique conteúdo diretamente na loja.

  1. Abra a vitrine que você criou nos pré-requisitos.

  2. Abra o Construtor de vitrines. Navegando até https://da.live/#/<GitHub User Name>/<Repository Name>/main/da/index.md.

  3. Abra a página Índice.

  4. Abaixo do bloco Carrossel, insira um novo título editando a linha "Bem-vindo à demonstração da Adobe Store".

  5. Clique no ícone de envio e clique em Visualizar.

  6. Revise a página de visualização e clique em Publicar.

  7. Atualize a página da loja e confirme se suas alterações estão online agora.

Experimentação contextual

O recurso de experimentação contextual do Adobe Commerce permite que você crie e gerencie experimentos em sua loja para testar diferentes conteúdos e configurações.

Pré-requisitos

  1. No Storefront Builder, selecione a página de índice e clique em Copiar.

  2. Crie uma pasta experimentos na pasta principal, clicando no botão Novo e selecionando Pasta.

  3. Crie uma pasta chamada 1234 na pasta experiment.

  4. Cole as duas cópias da página de índice na pasta 1234.

  5. Abra cada página e renomeie-as como "homev1" e "homev2". Estes são seus desafiantes.

  6. Modifique cada página para incluir conteúdo diferente. Por exemplo, altere a imagem herói ou o texto. Você precisa identificar as diferenças entre cada página.

  7. Publique cada uma de suas páginas desafiantes.

  8. Abra a página de controle, a página de índice original.

  9. Adicione um novo bloco com o título metadata.

  10. Adicione as seguintes informações às linhas do bloco de metadados

    • Título - Adobe Commerce

    • Descrição - Uma loja da Web

    • Experimento - 1234

    • Variantes de experimento

      • https://<your-site>.aem.live/experiments/1234/indexv1
      • https://<your-site>.aem.live/experiments/1234/indexv2

    Configuração de bloco de metadados para experimentação contextual {width="600" modal="regular"}

  11. Abra uma janela de navegação incógnita ou privada e navegue até a página principal.

  12. Feche a janela de navegação privada e repita a etapa anterior. Cada vez que abrir a página, você verá uma variante aleatória criada.

Aprimorar conteúdo da loja

Com o AEM Assets, Adobe Express e Firefly, você pode fazer rapidamente alterações em imagens que aparecem na sua vitrine eletrônica com um fluxo de trabalho simples e autodirigido.

Pré-requisitos

  • Requer acesso a AEM Assets, Adobe Express e Adobe Firefly.

Personalizar o plano de fundo de uma imagem

Considere um cenário em que você deseja modificar rapidamente o plano de fundo de uma imagem de produto. A combinação de Adobe Commerce, AEM Assets e Adobe Express permite concluir essa alteração em algumas etapas simples.

  1. Abra a loja criada nos pré-requisitos e navegue até um item que você deseja alterar. Anote o SKU ou o Código do produto.

  2. Abra AEM Assets, selecionando-o na Adobe Experience Cloud.

    Seletor AEM Assets mostrando a interface Adobe Experience Cloud {width="600" modal="regular"}

  3. Clique em Assets.

    Opção de navegação do Assets na interface AEM Assets {width="600" modal="regular"}

  4. Procure o item por SKU ou Código do Produto.

  5. Selecione o item que deseja editar e clique em Abrir no Adobe Express.

    Opção Abrir no Adobe Express para edição de ativos {width="600" modal="regular"}

  6. No painel Imagem, selecione Inserir objeto.

    Opção Inserir objeto no painel Imagem do Adobe Express {width="600" modal="regular"}

  7. Na caixa de texto, descreva a imagem que deseja adicionar. Por exemplo, "pinheiros nevados".

    Caixa de texto para descrever a imagem a ser gerada com IA {width="600" modal="regular"}

  8. Ajuste o Brush size e desenhe onde deseja adicionar a imagem gerada. Para este exemplo, desenhe ao redor do objeto existente para selecionar o plano de fundo.

  9. Clique em Gerar para exibir os resultados.

  10. Escolha entre os diferentes resultados, selecionando a opção desejada e clicando em Manter.

  11. Clique em Suas Coisas para retornar ao editor de imagens.

  12. Clique em Salvar para especificar o tipo de imagem.

  13. Clique em Salvar novamente para salvar as alterações.

  14. Na caixa de diálogo Salvar ativo, selecione a pasta de Destino do Commerce.

    Caixa de diálogo Salvar ativo com a pasta de destino do Commerce selecionada {width="600" modal="regular"}

  15. Clique em Salvar como novo ativo para salvar a imagem.

Adicionar a imagem a Commerce AEM Assets

  1. No Painel de Navegação de AEM as a Cloud Service, selecione Assets > Arquivos > Commerce e clique no ativo criado na seção anterior.

    Pasta do Commerce em AEM Assets com imagens do produto {width="600" modal="regular"}

  2. Clique em Propriedades.

    Botão Propriedades na barra de ferramentas AEM Assets {width="600" modal="regular"}

  3. Selecione a guia Commerce.

    guia Commerce no painel de propriedades do ativo {width="600" modal="regular"}

  4. Verifique se Ele existe no Adobe Commerce?O campo está definido como Sim.

  5. Clique em Adicionar e insira o SKU do produto ao qual você deseja adicionar o ativo.

    Adicionar SKU para vincular ativo ao produto {width="600" modal="regular"}

  6. Selecione a posição do ativo e o tipo de ativo.

  7. Selecione a guia Básico e altere a guia Status da Revisão para Aprovado.

    Lista suspensa Status da Revisão definida como Aprovado na guia Básico {width="600" modal="regular"}

  8. Clique em Salvar e fechar.

Confirmar a imagem no Commerce

  1. No Administrador do Adobe Commerce, navegue até Catálogo > Produtos.

  2. Selecione o produto ao qual você adicionou a imagem na seção anterior.

  3. Expanda a seção Imagens e Vídeos.

    Seção Imagens e Vídeos expandida na edição do produto {width="600" modal="regular"}

  4. Confirme se sua imagem agora está disponível na lista de imagens.

  5. Retorne à loja e navegue até a página do produto modificado.

  6. Confirme se a nova imagem aparece.

    Página do produto na loja mostrando a nova imagem gerada {width="600" modal="regular"}

Gerar variações

A função Gerar variações de Adobe Commerce aproveita a IA gerativa para automatizar a geração de conteúdo de alta qualidade, ajustar mensagens e publicar ativos na sua loja com facilidade.

Gerar texto

  1. Abra o site da loja usando o Editor Universal.

  2. Selecione o bloco de texto que deseja editar.

  3. No painel Propriedades, clique em Gerar Variações.

  4. Clique no botão Gerar.

  5. Selecione ou personalize o texto gerado.

  6. Clique em Publicar para atualizar sua vitrine eletrônica.

Gerar conteúdo e imagens

  1. Abrir Generate Variations

  2. Selecione o modelo Banner principal.

  3. Na caixa de texto Explicar interação do usuário, digite: "Experiência para funcionários e parceiros da Adobe comprarem equipamentos da marca Adobe!".

  4. Na URL do conhecimento de domínio, digite www.adobestore.com.

  5. Clique em Gerar.

  6. Selecione uma variação de conteúdo e clique em Gerar imagem.

  7. Na lista suspensa Tamanho da imagem, selecione Widescreen (16:9).

  8. Na lista suspensa Tipo de conteúdo, selecione Foto.

  9. Para a imagem de referência Style, selecione o banner de armazenamento do Adobe existente.

  10. Selecione a imagem gerada que você deseja usar e clique em Salvar.

  11. Repita esse processo com outras imagens de referência para gerar mais variações.

Solução de problemas

Use as sugestões a seguir para resolver qualquer problema ao tentar utilizar esses tutoriais.

  • Se você precisar de orientação sobre comandos ou sinalizadores:

    1. Execute aio --help para ver todos os comandos e sinalizadores disponíveis.

    2. Para comandos específicos, use o sinalizador --help. Por exemplo:

      • aio console --help
      • aio commerce --help
  • Se você encontrar problemas de login inválidos:

    1. Executar aio config clear.
    2. Executar aio auth login --force.
    3. Faça logon no navegador.
    4. Selecione seu perfil.
    5. Volte para o terminal para continuar.
  • Se o comando init falhar:

    1. Executar aio api-mesh delete.
    2. Execute aio commerce init novamente.
  • Se você selecionou a organização, o projeto ou o espaço de trabalho errado antes de executar o comando init:

    1. Executar aio console org select.
    2. Executar aio console project select.
    3. Executar aio console workspace select.
  • Se você tiver uma seleção de locatário inválida:

    1. Cancele a execução atual da CLI pressionando Ctrl-C.
    2. Executar aio commerce init.
  • Se você encontrar uma instalação inválida do API Mesh:

    • Executar aio api-mesh update mesh-config.json.
recommendation-more-help
0519caf3-99f4-44ba-8e03-411a5b7764c8