1.5.3 Conectar o ACCS ao AEM Assets CS
Após concluir o exercício anterior, você pode ver um produto sendo retornado pelo ACCS para o seu site, mas ele ainda não tinha uma imagem. No final deste exercício, você também deverá ver uma imagem sendo retornada.
1.5.3.1 Atualizar Configuração De Pipeline
Ir para https://my.cloudmanager.adobe.com. A organização que você deve selecionar é --aepImsOrgName--.
Clique para abrir seu Programa Cloud Manager, que deve ser chamado de --aepUserLdap-- - CitiSignal AEM+ACCS.
Role para baixo e clique em Acessar informações do repositório na guia Pipelines.
Você deverá ver isso. Clique em Gerar senha.
Clique novamente em Gerar senha.
Você deverá ter uma senha disponível. Em seguida, clique no ícone copiar ao lado do campo linha de comando Git.
Crie um novo diretório em um local de escolha no seu computador e nomeie-o como GitHub do AEM Pipeline.
Clique com o botão direito do mouse na pasta e selecione Novo Terminal na Pasta.
Você deverá ver isso.
Cole a linha de comando do Git que você copiou anteriormente na janela Terminal.
É necessário inserir um nome de usuário. Copie o nome de usuário do Pipeline de programa do Cloud Manager Acesse as informações do repositório e clique em inserir.
Em seguida, você precisa digitar a senha. Copie a senha do Pipeline de programa do Cloud Manager Acesse as informações do repositório e clique em inserir.
Isso pode levar um minuto. Depois de concluído, você terá uma cópia local do repositório Git vinculada ao pipeline do programa.
Você verá um novo diretório no GitHub do AEM Pipeline. Abra esse diretório.
Selecione todos os arquivos nesse diretório e exclua todos eles.
Verifique se o diretório está vazio.
Ir para https://github.com/ankumalh/assets-commerce. Clique em <> Código e selecione Baixar ZIP. Baixe o arquivo e solte-o na área de trabalho.
Em seguida, copie o arquivo assets-commerce-main.zip na área de trabalho e descompacte-o. Abra a pasta assets-commerce-main.
Copie todos os arquivos do diretório assets-commerce-main para o diretório vazio do diretório do Repositório de Pipelines do Programa.
Em seguida, abra o Microsoft Visual Studio Code e abra a pasta que contém o Repositório de Pipelines do seu Programa no Microsoft Visual Studio Code.
Vá para Pesquisar no menu esquerdo e procure por <my-app>. Você precisa substituir todas as ocorrências de <my-app> por --aepUserLdap--citisignalaemaccs.
Clique no ícone substituir tudo.
Clique em Substituir.
Os novos arquivos agora estão prontos para serem carregados de volta no repositório Git, que está vinculado ao Repositório de pipelines do programa. Para fazer isso, abra a pasta AEM Pipeline GitHub e clique com o botão direito do mouse na pasta que contém os novos arquivos. Selecione Novo Terminal na Pasta.
Você deverá ver isso. Cole o comando git add . e pressione enter.
Você deverá ver isso. Cole o comando git commit -m "add assets integration" e pressione enter.
Você deverá ver isso. Cole o comando git push origin main e pressione enter.
Você deverá ver isso. Suas alterações foram implantadas no repositório Git do pipeline do programa.
Volte para o Cloud Manager e clique em Fechar.
Depois de fazer alterações no repositório Git do Pipeline, é necessário executar o pipeline Implantar no Desenvolvimento novamente. Clique nos 3 pontos … e selecione Executar.
Clique em Executar. A execução de uma implantação de pipeline pode levar de 10 a 15 minutos. Antes de continuar, aguarde até que a implantação do pipeline seja concluída com êxito.
1.5.3.2 Habilitar a integração do AEM Assets no ACCS
Volte para a instância do ACCS. No menu esquerdo, vá para Lojas e selecione Configuração.
Role para baixo no menu até ADOBE SERVICES e abra a Integração com o AEM Assets. Você deverá ver isso.
Preencha as seguintes variáveis:
- ID do Programa AEM Assets: você pode obter a ID do Programa da URL do Autor do AEM CS. Neste exemplo, a ID do programa é
166717.
- ID de Ambiente do AEM Assets: você pode obter a ID de Ambiente da URL do Autor do AEM CS. Neste exemplo, a ID de Ambiente é
1786231.
- ID do Cliente IMS do Seletor de Ativos: definido como
1 - Sincronização habilitada: definida como
Yes - Proprietário da visualização: definido como
AEM Assets - Regra de correspondência de ativos:
Match by product SKU - Corresponder por nome de atributo SKU de produto:
commerce:skus
Clique em Salvar configuração.
Você deverá ver isso.
1.5.3.3 Atualizar config.json
Acesse o repositório GitHub criado ao configurar o ambiente do AEM Sites CS/EDS. Esse repositório foi criado no exercício 1.1.2 Configure seu ambiente do AEM CS e deve ser nomeado como citisignal-aem-accs.
No diretório raiz, role para baixo e clique para abrir o arquivo config.json. Clique no ícone editar para fazer alterações no arquivo.
Adicione o trecho de código abaixo na linha 5 "commerce-endpoint": "https://na1-sandbox.api.commerce.adobe.com/XXX/graphql",:
"commerce-assets-enabled": "true",
Clique em Confirmar alterações….
Clique em Confirmar alterações.
Sua alteração foi salva e será publicada em breve. Pode levar alguns minutos para que a alteração fique visível na loja.
1.5.3.4 Verificar campos do Commerce no AEM Assets CS
Faça logon no ambiente de Autor do AEM CS e vá para Assets.
Vá para Arquivos.
Abra a pasta CitiSignal.
Passe o mouse sobre qualquer ativo e clique no ícone info.
Agora você deve ver uma guia Commerce que contém dois novos atributos de metadados.
Seu ambiente do AEM Assets CS agora oferece suporte à integração com o Commerce. Agora você pode começar a carregar imagens de produtos.
1.5.3.4 Carregar Assets do produto e vincular aos produtos
Baixe as imagens do produto aqui. Após o download, exporte os arquivos para sua área de trabalho.
Clique em Criar e selecione Pasta.
Insira o valor Product_Images para os campos Title e Name. Clique em Criar.
Clique em para abrir a pasta que acabou de criar.
Clique em Criar e selecione Arquivos.
Navegue até a pasta Product_Images na área de trabalho, selecione todos os arquivos e clique em Abrir.
Clique em Carregar.
As imagens serão disponibilizadas na pasta. Passe o mouse sobre o produto iPhone-Air-Light-Gold.png e clique no ícone Propriedades.
Role para baixo e defina o campo Status da revisão como Aprovado. A integração AEM Assets CS - ACCS funciona somente para imagens aprovadas.
Role para cima, vá para a guia Commerce e clique em Adicionar em SKUs do produto.
Adicione os seguintes SKUs para este produto:
iPhone-Air-Light-Gold1thumbnail, image, swatch_image, small_imageiPhone-Air-Light-Gold-256GB1thumbnail, image, swatch_image, small_imageiPhone-Air-Light-Gold-512GB1thumbnail, image, swatch_image, small_imageiPhone-Air-Light-Gold-1TB1thumbnail, image, swatch_image, small_imageVocê deveria ficar com isso. Clique em Salvar e fechar.
Passe o mouse sobre o produto iPhone-Air-Space-Black.png e clique no ícone Propriedades.
Role para baixo e defina o campo Status da revisão como Aprovado. A integração AEM Assets CS - ACCS funciona somente para imagens aprovadas.
Role para cima, vá para a guia Commerce e clique em Adicionar em SKUs do produto.
Adicione os seguintes SKUs para este produto:
iPhone-Air-Space-Black1thumbnail, image, swatch_image, small_imageiPhone-Air-Space-Black-256GB1thumbnail, image, swatch_image, small_imageiPhone-Air-Space-Black-512GB1thumbnail, image, swatch_image, small_imageiPhone-Air-Space-Black-1TB1thumbnail, image, swatch_image, small_imageiPhone-Air1thumbnail, image, swatch_image, small_imageVocê deveria ficar com isso. Clique em Salvar e fechar.
Passe o mouse sobre o produto iPhone-Air-Sky-Blue.png e clique no ícone Propriedades.
Role para baixo e defina o campo Status da revisão como Aprovado. A integração AEM Assets CS - ACCS funciona somente para imagens aprovadas.
Role para cima, vá para a guia Commerce e clique em Adicionar em SKUs do produto.
Adicione os seguintes SKUs para este produto:
iPhone-Air-Sky-Blue1thumbnail, image, swatch_image, small_imageiPhone-Air-Sky-Blue-256GB1thumbnail, image, swatch_image, small_imageiPhone-Air-Sky-Blue-512GB1thumbnail, image, swatch_image, small_imageiPhone-Air-Sky-Blue-1TB1thumbnail, image, swatch_image, small_imageVocê deveria ficar com isso. Clique em Salvar e fechar.
Passe o mouse sobre o produto iPhone-Air-Cloud-White.png e clique no ícone Propriedades.
Role para baixo e defina o campo Status da revisão como Aprovado. A integração AEM Assets CS - ACCS funciona somente para imagens aprovadas.
Role para cima, vá para a guia Commerce e clique em Adicionar em SKUs do produto.
Adicione os seguintes SKUs para este produto:
iPhone-Air-Cloud-White1thumbnail, image, swatch_image, small_imageiPhone-Air-Cloud-White-256GB1thumbnail, image, swatch_image, small_imageiPhone-Air-Cloud-White-512GB1thumbnail, image, swatch_image, small_imageiPhone-Air-Cloud-White-1TB1thumbnail, image, swatch_image, small_imageVocê deveria ficar com isso. Clique em Salvar e fechar.
Cada imagem do iPhone Air agora deve ter miniaturas verdes, indicando que o ativo foi aprovado.
1.5.3.5 Verificar imagens do produto na vitrine do AEM Sites CS/EDS
Para verificar se a integração está funcionando, é necessário abrir o site do CitiSignal.
Para acessar seu site, vá para main--citisignal-aem-accs--XXX.aem.page e/ou main--citisignal-aem-accs--XXX.aem.live, depois de substituir XXX pela sua conta de usuário do GitHub, que neste exemplo é woutervangeluwe.
Neste exemplo, o URL completo torna-se isto:https://main--citisignal-aem-accs--woutervangeluwe.aem.page e/ou https://main--citisignal-aem-accs--woutervangeluwe.aem.live.
Você deverá ver isso. Vá para Telefones.
Você deverá ver uma imagem do produto sendo mostrada para o iPhone Air. Clique em iPhone Air.
Você deverá ver isso. Altere as opções de cor e armazenamento e você verá as imagens alteradas dinamicamente com base nas escolhas feitas.
Este é um exemplo de alteração da cor para Light-Gold e do tamanho do armazenamento para 256GB.
Próxima etapa: Resumo e benefícios
Voltar para o Adobe Commerce as a Cloud Service