1.4.2 Implementar o Brand Concierge em seu site

1.4.2.1 Configure seu site para mostrar o Brand Concierge - AEM Author

Para que o Brand Concierge apareça em seu site, é necessário criar um novo bloco personalizado que precise ser adicionado a uma nova página, e garantir que sua nova página seja adicionada à navegação do site.

Agora é necessário configurar as seguintes coisas nesta ordem:

Criar novo bloco personalizado

Para criar o novo bloco personalizado, navegue até o repositório GitHub que está vinculado ao seu site.

component-definition.json

Role para baixo até ver o arquivo component-definition.json e abri-lo

Clique no ícone pencl para começar a editar o arquivo.

Role para baixo até ver os Blocos. Coloque o cursor abaixo do colchete do componente Cartões

Cole esse código e insira uma vírgula , após o bloco de código:

{
  "title": "BrandConcierge",
  "id": "brandconcierge",
  "plugins": {
    "xwalk": {
      "page": {
        "resourceType": "core/franklin/components/block/v1/block",
        "template": {
          "name": "BrandConcierge",
          "model": "brandconcierge"
        }
      }
    }
  }
},

Clique em Confirmar alterações….

Clique em Confirmar alterações.

component-models.json

Role para baixo até ver o arquivo component-models.json e clique no ícone lápis para começar a editar o arquivo.

Role para baixo até ver o último item. Coloque o cursor próximo ao colchete do último componente.

Insira uma vírgula ,, e, por push, insira e, na próxima linha, cole este código:

{
  "id": "brandconcierge",
  "fields": []
}

Clique em Confirmar alterações….

Clique em Confirmar alterações.

component-filters.json

Role para baixo até ver o arquivo component-filters.json e clique no ícone lápis para começar a editar o arquivo.

Você deverá ver isso.

Em seção, insira uma vírgula , e cole a identificação do componente "brandconcierge" após a última linha atual.

Clique em Confirmar alterações….

Clique em Confirmar alterações.

brandconcierge.css

Ao criar um bloco, é prática recomendada criar um arquivo para o estilo do bloco e ele deve ter o mesmo nome do bloco. agora você deve criar o arquivo, que deixaremos vazio por enquanto.

Vá para a pasta blocos. Em seguida, clique em Adicionar arquivo e selecione Criar novo arquivo.

Na caixa de texto, digite brandconcierge/brandconcierge.css. O arquivo pode permanecer vazio por enquanto. Clique em Confirmar alterações….

Clique em Confirmar alterações.

brandconcierge.js

Ao criar um bloco, é prática recomendada criar um arquivo para o javascript relacionado ao bloco e ele deve ter o mesmo nome do bloco.

Clique em Adicionar arquivo e selecione Criar novo arquivo.

Na caixa de texto, digite brandconcierge.js. O arquivo pode permanecer vazio por enquanto. Clique em Confirmar alterações….

export default function decorate(block) {
  block.setAttribute('id', 'brand-concierge-mount');
}

Clique em Confirmar alterações.

Criar nova página e vincular novo bloco personalizado

Ir para https://my.cloudmanager.adobe.com. Clique no Programa para abri-lo.

Em seguida, clique nos 3 pontos … na guia Ambientes e clique em Exibir Detalhes.

Você verá os detalhes do ambiente. Clique na URL do seu ambiente Author.

Em seguida, você deverá ver seu ambiente de autor do AEM. Ir para Sites.

Vá para CitiSignal. Clique em Criar e selecione Página.

Selecione Página e clique em Avançar.

Insira os seguintes valores:

Clique em Criar.

Selecione Abrir.

Você deverá ver isso.

Clique na área em branco para selecionar o componente seção. Em seguida, clique no ícone de mais + no menu direito.

Em seguida, você deve ver seu bloco personalizado mostrado na lista de blocos disponíveis. Clique para selecioná-la.

Você deverá ver um bloco vazio sendo adicionado a essa página. Este bloco será carregado dinamicamente usando as bibliotecas javascript que você adicionará na próxima etapa.

Clique em Publicar.

Clique novamente em Publicar.

Sua nova página foi publicada e agora pode ser adicionada ao cabeçalho de navegação na próxima etapa.

Atualizar arquivo de cabeçalho de navegação

Na visão geral do AEM Sites, vá para CitiSignal e marque a caixa de seleção do arquivo Header/nav. Clique em Edit.

Selecione o campo Texto na tela de visualização e clique no campo Texto, no lado direito da tela, para editá-lo.

Crie uma nova opção de menu no menu de navegação com o texto Brand Concierge. Em seguida, selecione o texto Brand Concierge e clique no ícone link.

Digite isto para o campo Caminho ou URL /content/CitiSignal/brandconcierge.html e digite Brand Concierge para o campo Título. Clique em Salvar.

Você deveria ficar com isso. Clique em Concluído.

Você deveria ficar com isso. Clique em Publicar.

Clique novamente em Publicar.

A nova página agora é adicionada ao menu.

1.4.2.2 Configure seu site para exibir o Brand Concierge - GitHub

Depois de atualizar o conteúdo usando o ambiente do AEM Author, agora é necessário atualizar parte do código no repositório do GitHub usado para o seu site.

Bibliotecas Javascript

As seguintes bibliotecas são necessárias para implementar o Brand Concierge em seu site em execução no AEM CS/EDS:

Baixe todos os 3 arquivos no desktop.

Vá para o projeto GitHub do site do AEM CS/EDS. Ir para scripts.

Clique em Adicionar arquivo e selecione Carregar arquivos.

Clique em Escolher seus arquivos.

Selecione todos os 3 arquivos styleConfigurations.js, alloy.js e brandconciergemain.js da sua área de trabalho e clique em Abrir.

Clique em Confirmar alterações.

Atualizar head.html

Na etapa anterior, você carregou 3 novas bibliotecas. Essas bibliotecas agora precisam ser carregadas quando seu site for carregado e a maneira de fazer isso é adicionar referências a esses arquivos no arquivo head.html.

Além disso, você também precisa fornecer instruções no arquivo head.html para garantir que as bibliotecas sejam carregadas na ordem correta e de maneira correta.

Para fazer isso, vá para o projeto GitHub do seu site do AEM CS/EDS clicando em Código.

Role para baixo um pouco. Abra o arquivo head.html.

Clique no ícone de lápis para editar este arquivo.

Você deverá ver isso.

Role para baixo até a linha 43 e cole o seguinte:

Há dois campos no código abaixo que você precisa atualizar:

<script src="/scripts/styleconfigurations.js"></script>

<script>
        !function (n, o) {
      o.forEach(function (o) {
        n[o] || ((n.__alloyNS = n.__alloyNS ||
          []).push(o), n[o] = function () {
            var u = arguments; return new Promise(
              function (i, l) { n[o].q.push([i, l, u]) })
          }, n[o].q = [])
      })
    }
      (window, ["alloy"]);
    </script>


<script src="/scripts/alloy.js"></script>

<script>
    alloy("configure", {
        defaultConsent: "in",
        edgeDomain: "edge.adobedc.net",
        edgeBasePath: "ee",
        datastreamId: "XXXXX", // replace datastreamId
        orgId: "--aepImsOrgId--", // replace ims org Id
        debugEnabled: true,
        idMigrationEnabled: false,
        thirdPartyCookiesEnabled: false,
        prehidingStyle: ".personalization-container { opacity: 0 !important }",
    });

window["alloy"]("sendEvent", {
    conversation: {
        fetchConversationalExperience: true
    }
}).then(result => {
    console.log("Conversation experience fetched", result);
    window["alloy"]("bootstrapConversationalExperience", {
        selector: "#brand-concierge-mount",
        src: "/scripts/brandconciergemain.js",
        stylingConfigurations: window.styleConfiguration,
        stickySession: true // create a sticky session cookie with expiration
    })
});
</script>

Clique em Confirmar alteração….

Clique em Confirmar alteração.

Agora você atualizou o código necessário para carregar as bibliotecas do em seu site.

1.4.2.3 Testar sua configuração

Você poderá testar suas alterações no site indo até main--citisignal-aem-accs--XXX.aem.page 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.

Pode levar algum tempo até que todos os ativos sejam exibidos corretamente, pois precisam ser publicados primeiro.

Você deverá ver isso. Clique em Brand Concierge.

Você deverá ver essa Brand Concierge onde é possível inserir seu prompt.

Voltar para Brand Concierge

Voltar para Todos os Módulos