Banners em carrossel

Os banners de carrossel permitem que os profissionais de marketing conduzam a conversão, criando facilmente conteúdo promocional giratório interativo e o entregando a qualquer tela.

Criar e modificar o conteúdo em destaque em banners promocionais pode ser demorado, limitando sua capacidade de publicar rapidamente novo conteúdo ou torná-lo mais direcionado. Os banners de carrossel permitem que você crie ou modifique rapidamente banners rotativos, adicione interatividade, como links de hotspots para detalhes de produtos ou recursos relacionados, e os entregue a qualquer tela, permitindo que você coloque o novo conteúdo promocional no mercado mais rapidamente.

Os banners de carrossel são designados por um banner com a palavra CAROUSELSET:

chlimage_1-438

Em seu site, um banner de carrossel pode ser exibido da seguinte maneira:

chlimage_1-439

Aqui você pode navegar pelas imagens (clicando nos números). Além disso, os slides são girados automaticamente com base em um intervalo de tempo que você pode personalizar. As imagens adicionadas no banner do carrossel são compatíveis com hotspots e mapas de imagem, onde os usuários podem tocar ou acessar um hiperlink ou uma janela de visualização rápida.

Neste exemplo, um usuário tocou ou clicou em um mapa de imagem e acessou a janela de visualização rápida para obter luvas:

chlimage_1-440

Assista a uma caminhada de 10 minutos e 33 segundos sobre como os banners de carrossel são criados. Você também aprenderá a pré-visualização, edição e entrega de banners de carrossel.

Observação

Usuários não administrativos devem ser adicionados ao grupo de usuários do DAM para que possam criar ou editar banners do carrossel. Se tiver problemas para criar ou editar, consulte o administrador do sistema que pode adicioná-lo ao grupo de usuários do DAM.

Para começar a trabalhar rapidamente:

  1. Identificar as variáveis de hotspot e mapa de imagem (somente para clientes que usam AEM Assets + Dynamic Media)

    Start identificando variáveis dinâmicas usadas pela implementação de visualização rápida existente para que você possa inserir os pontos de conexão e os dados do mapa de imagem corretamente durante o processo de criação do banner do carrossel no AEM Assets.

    Observação

    Se você for um cliente da AEM Sites ou do Ecommerce, poderá usar o recurso integrado para navegar até páginas de produtos e pesquisar os skus existentes no catálogo de produtos. Não é necessário inserir manualmente as variáveis de hotspot ou mapa de imagem. Consulte as informações sobre como configurar o eCommerce.

    Se você for um cliente da AEM Assets e do Dynamic Media, inserirá manualmente os dados para pontos de conexão e mapas de imagem e, em seguida, integrará o URL publicado ou o código Incorporado ao seu sistema de gestão de conteúdo de terceiros.

  2. Opcional: crie uma predefinição do visualizador Conjunto de carrossel, conforme necessário.

    Se você for um administrador, poderá personalizar o comportamento e a aparência do carrossel criando sua própria predefinição do visualizador do carrossel. O principal benefício é que você pode reutilizar essa predefinição de visualizador personalizado para vários carrosséis. No entanto, os usuários também têm a opção de personalizar o comportamento e a aparência do carrossel diretamente durante a criação do carrossel. Essa é a abordagem preferida quando você deseja um design muito específico para um determinado carrossel.

  3. Carregue um bannerde imagem.

    Faça upload de banners de imagem que deseja tornar interativos.

  4. Criar um conjuntode carrossel.

    Em Conjuntos de carrosséis, os usuários navegam por imagens de banner e tocam em pontos de acesso ou mapas de imagem para acessar conteúdo relevante.

    Para criar um Conjunto de carrossel no Assets, toque em Criar e selecione Conjuntos de carrossel. Adicione ativos a slides e toque em Salvar. Além disso, edite a aparência e o comportamento do carrossel diretamente no editor.

  5. Adicione pontos de acesso ou mapas de imagem a um banner de imagem.

    Adicione um ou mais pontos de acesso ou mapas de imagem a um banner de imagem e associe cada um a uma ação, como um link, uma visualização rápida ou um fragmento de experiência. Depois de adicionar pontos de acesso ou mapas de imagem, termine essa tarefa publicando o conjunto de carrossel. A publicação cria o código incorporado que você pode usar para copiar e aplicar à landing page do site.

    Consulte (Opcional) Visualização de banners de carrossel - Opcional. Se desejar, você pode visualização uma representação do conjunto de carrossel e testar sua interatividade.

  6. Publique banners de carrossel.

    Você publica um Conjunto de carrossel como faria com qualquer ativo. Em Ativos, navegue até o Conjunto de carrossel e selecione-o e toque em Publicar. A publicação de um conjunto de carrossel ativa o URL e a string Incorporada.

  7. Faça uma das seguintes opções:

Se precisar editar Conjuntos de carrossel, consulte edição de Conjuntos de carrossel. Além disso, você pode visualização e editar as propriedades do Conjunto decarrossel.

Como identificar as variáveis de hotspot e mapa de imagem

Start identificando variáveis dinâmicas usadas pela implementação de visualização rápida existente para que você possa digitar os pontos de acesso ou os dados do mapa de imagem corretamente durante o processo de criação do conjunto de carrossel no AEM Assets.

Quando você adiciona pontos de acesso ou mapas de imagem a uma imagem de banner no AEM Assets, é necessário atribuir um SKU e variáveis adicionais opcionais a cada ponto de acesso ou mapa de imagem. Essas variáveis são usadas posteriormente para corresponder a pontos de acesso ou mapas de imagem com conteúdo de visualização rápida.

Observação

Se você for um cliente AEM Sites e/ou AEM Ecommerce, pule esta etapa. Não é necessário identificar manualmente as variáveis de hotspot ou mapa de imagem; você pode usar a integração com o Ecommerce para integração de produtos. Consulte as informações sobre como configurar o eCommerce. Além disso, você pode usar o componente Interativo e adicioná-lo à sua página da Web.

Se você for um cliente da AEM Assets ou da Mídia, publique o URL ou o código Incorporado e, em seguida, integre-se ao seu sistema de gestões de conteúdo de terceiros e identifique pontos de conexão e mapas de imagem manualmente.

É importante identificar corretamente o número e o tipo de variáveis a serem associadas aos dados do ponto de acesso ou do mapa de imagens. Cada ponto de conexão ou mapa de imagem adicionado a uma imagem de banner deve ter informações suficientes para identificar inequivocamente o produto no sistema de backend existente. Ao mesmo tempo, cada ponto de conexão ou mapa de imagem não deve incluir mais dados do que o necessário. O motivo é que isso tornaria o processo de entrada de dados excessivamente complexo e o gerenciamento de hotspots ou mapas de imagem mais propenso a erros.

Há diferentes maneiras de identificar um conjunto de variáveis a serem usadas para os dados de ponto de acesso ou mapa de imagem.

Às vezes, pode ser suficiente consultar especialistas de TI responsáveis pela implementação rápida da visualização, já que eles provavelmente saberão qual é o conjunto mínimo de dados necessário para identificar a visualização rápida no sistema. No entanto, na maioria dos casos, é possível simplesmente analisar o comportamento existente do código front-end.

A maioria das implementações de visualização rápida usa o seguinte paradigma:

  • O usuário ativa um elemento da interface do usuário no site. Por exemplo, tocar em um botão Exibição rápida.
  • O site envia uma solicitação do Ajax para o backend para carregar os dados ou o conteúdo da visualização rápida, se necessário.
  • Os dados de visualização rápida são traduzidos para o conteúdo em preparação para renderização na página da Web.
  • Por fim, o código front-end exibe visualmente esse conteúdo na tela.

A abordagem então é visitar diferentes áreas do site existente onde o recurso de visualização rápida é implementado, acionar a visualização rápida e capturar o URL Ajax enviado pela página da Web para carregar os dados ou o conteúdo da visualização rápida.

Normalmente, não é necessário usar nenhuma ferramenta de depuração especializada. Os navegadores da Web modernos dispõem de inspetores da Web que fazem um trabalho adequado. A seguir estão alguns exemplos de navegadores da Web que incluem inspetores da Web:

  • Para ver todas as solicitações HTTP de saída no Google Chrome, pressione F12 (Windows) ou Command-Option-I (Mac) para abrir o painel Ferramentas do desenvolvedor e toque na guia Rede.
  • No Firefox, você pode ativar o plug-in Firebug pressionando F12 (Windows) ou Command-Option-I (Mac) e usar a guia Rede, ou usar a ferramenta Inspetor integrada e a guia Rede.

Quando o monitoramento de rede estiver ativado no navegador, dispare a visualização rápida na página.

Agora, encontre o URL Ajax de visualização rápida no registro de rede e copie o URL gravado para análises futuras. Na maioria dos casos, quando você aciona a visualização rápida, há várias solicitações que são enviadas para o servidor. Normalmente, o URL Ajax de visualização rápida é um dos primeiros na lista. Ele tem uma parte ou um caminho de sequência de query complexo, e seu tipo MIME de resposta é text/html, text/xmlou text/javascript.

Durante esse processo, é importante visitar diferentes áreas do seu site, com diferentes categorias e tipos de produtos. O motivo é que URLs de visualização rápida podem ter partes comuns para uma determinada categoria do site, mas são alteradas somente se você visitar uma área diferente do site.

No caso mais simples, a única parte variável no URL de visualização rápida é o SKU do produto. Nesse caso, o valor SKU é o único dado necessário para adicionar pontos de acesso ou mapas de imagem à imagem do banner.

No entanto, em casos complexos, o URL de visualização rápida tem elementos variáveis diferentes além do SKU, como ID de categoria, código de cor, código de tamanho e assim por diante. Nesses casos, cada elemento é uma variável separada no ponto de conexão ou na definição de dados do mapa de imagem no recurso de banner do carrossel.

Considere os seguintes exemplos de URLs de visualização rápida e suas variáveis de hotspot ou mapa de imagem resultantes:

SKU único, encontrado na string do query.

Os URLs de visualização rápida gravados incluem o seguinte:

  • https://server/json?productId=866558&source=100

  • https://server/json?productId=1196184&source=100

  • https://server/json?productId=1081492&source=100

  • https://server/json?productId=1898294&source=100

A única parte variável no URL é o valor do parâmetro da string de productId= query e é claramente um valor SKU. Portanto, nossos pontos de acesso ou mapas de imagem só precisam de campos SKU preenchidos com valores como 866558, 1196184, 1081492, 1898294.

SKU único, encontrado no caminho do URL.

Os URLs de visualização rápida gravados incluem o seguinte:

  • https://server/product/6422350843

  • https://server/product/1607745002

  • https://server/product/0086724882

A parte variável está na última parte do caminho e se torna o valor SKU dos pontos de acesso/mapas de imagem:6422350843, 1607745002, 0086724882.

SKU e ID da categoria na sequência do query.

Os URLs de visualização rápida gravados incluem o seguinte:

  • https://server/quickView/product/?category=1100004&prodId=305466

  • https://server/quickView/product/?category=1100004&prodId=310181

  • https://server/quickView/product/?category=1740148&prodId=308706

Nesse caso, há duas partes diferentes no URL. O SKU é armazenado no prodId parâmetro e a ID da categoria é armazenada no category=parâmetro.

Dessa forma, as definições de hotspot/mapa de imagem são pares. Ou seja, um valor de SKU e uma variável adicional chamada categoryId. Os pares resultantes são os seguintes:

  • SKU é 305466 e categoryId é 1100004.

  • SKU é 310181 e categoryId é 1100004.

  • SKU é 308706 e categoryId é 1740148.

Carregando banners de imagem

Se você já tiver carregado as imagens que deseja usar, vá para a próxima etapa, Criando conjuntosde carrossel. Observe que as imagens usadas no carrossel devem ser carregadas após o Dynamic Media ter sido ativado.

Para fazer upload de banners de imagem, consulte Fazer upload de ativos.

Observação

Usuários não administrativos devem ser adicionados ao grupo de usuários do DAM para que possam criar ou editar banners do carrossel. Se tiver problemas para criar ou editar, consulte o administrador do sistema que pode adicioná-lo ao grupo de usuários do DAM.

Para criar um conjunto de carrossel

  1. Em Ativos, navegue até a pasta na qual deseja criar o Conjunto de carrossel e toque em Criar > Conjunto de carrossel.

  2. Na página Editor de banner do carrossel, toque em Tocar para abrir o Seletor de ativos para selecionar a imagem para o primeiro slide.

    Na página do Editor de banner do carrossel, execute um dos procedimentos a seguir:

    • Perto do canto superior esquerdo da página, toque no ícone Adicionar slide .

    • Próximo ao meio da página, toque em Tocar para abrir o Seletor de ativos.

    Toque para selecionar os ativos que deseja incluir ao Conjunto de carrossel. Os ativos selecionados têm um ícone de marca de seleção sobre eles. When you are finished, near the upper-right corner of the page, tap Select.

    Com o Seletor de ativos, procure por ativos ao digitar uma palavra-chave e tocar ou clicar em Retornar. Aplique filtros para refinar os resultados da pesquisa. Filtre por caminho, coleção, tipo de arquivo e tag. Selecione o filtro e toque no ícone Filtro, na barra de ferramentas. Altere a exibição ao tocar no ícone Exibir e selecionar Exibição em coluna, Exibição de cartão ou Exibição em lista.

    Consulte Trabalhar com seletores para obter mais informações.

  3. Continue a adicionar slides até que você tenha adicionado todas as imagens pelas quais deseja girar no Conjunto de carrossel.

  4. (Opcional) Execute um dos procedimentos a seguir:

    • Se necessário, arraste o slide para reordenar as imagens na lista do conjunto.

    • Para excluir uma imagem, selecione-a e toque em Excluir slide na barra de ferramentas.

    • Para aplicar uma predefinição, perto do canto superior direito da página, toque na lista suspensa predefinida e selecione uma predefinição para aplicar ao conjunto de uma vez.

    Para excluir um slide, toque ou clique no slide e toque ou clique em Excluir slide na barra de ferramentas. Para mover um slide, toque no ícone de borda e segure e mova-se para o local desejado.

  5. Depois de adicionar as imagens nos slides, adicione um ponto de acesso, um mapa de imagens ou ambos à imagem. Consulte adicionar pontos de acesso ou mapasde imagem.

  6. Você pode alterar o design visual e o comportamento dos conjuntos de carrossel tocando ou clicando nas guias Comportamento e Aparência e fazendo ajustes na aparência do banner do carrossel ou no comportamento dos componentes específicos. Consulte Gerenciamento de predefinições do visualizador para obter mais informações sobre como usar o editor do visualizador.

    Observação

    Para banners de carrossel, as seguintes opções podem ser ajustadas:

    • Duração que uma imagem exibe. Por padrão, cada imagem é exibida por 9 segundos.
    • Animação. Por padrão, cada transição de slide está esmaecida. Você pode mudar isso para uma transição de slide.
    • Estilo dos botões. Os usuários podem girar pelos banners tocando em cada ponto ou número. Você pode alterar o local em que os botões de indicador definidos aparecem (e se eles são numéricos ou de estilo pontilhado) e o tamanho deles.
    • Altere o estilo de realce de um mapa de imagem ou o ícone usado para pontos de acesso.
    • Antes de editar uma predefinição do visualizador, escolha o estilo do qual deseja basear a predefinição. Se você não fizer isso, ao start de editar a predefinição do visualizador, perderá todas as alterações se decidir mudar para uma predefinição diferente.

    Consulte Considerações especiais para banners de carrossel para obter instruções detalhadas e mais informações sobre o editor do visualizador.

    Você também pode pré-visualização como será o banner do carrossel. Consulte (Opcional) Visualização de bannersde carrossel.

  7. Toque em Salvar ao terminar.

Adicionar pontos de conexão ou mapas de imagem a um banner de imagem

Você pode adicionar pontos de acesso ou mapas de imagem a um banner usando o editor Conjunto de carrossel.

Quando você adiciona pontos de acesso ou mapas de imagem, pode defini-los como uma exibição pop-up do Quickview, como um hiperlink ou um Fragmento de experiência.

Consulte Fragmento de experiência.

Observação

Observe que as ferramentas de compartilhamento de mídia social no Carousel Banner não são suportadas quando você incorpora o visualizador em um Fragmento de experiência.

Para contornar isso, você pode usar ou criar predefinições do visualizador que não tenham ferramentas de compartilhamento de mídia social. Essas predefinições do visualizador permitem que você as incorpore com êxito aos Fragmentos de experiência.

À medida que você adiciona pontos de acesso ou mapas de imagem a uma imagem, lembre-se de salvar seu trabalho. As opções Desfazer e Refazer, perto do canto superior direito da página, são suportadas durante a sessão atual de criação/edição.

Quando terminar de criar o banner do carrossel, você pode usar a Pré-visualização como opção para ver uma representação de como o banner do carrossel será exibido aos clientes.

Consulte (Opcional) Visualização de banners de carrossel.

Observação

Quando você adiciona pontos de acesso a uma imagem em uma Imagem interativa ou em um banner de carrossel, as informações do ponto de acesso são armazenadas no mesmo local de metadados, em relação ao local da imagem e ao mdashtag, independentemente de ser uma Imagem interativa ou um banner de carrossel. Essa funcionalidade significa que você pode reutilizar facilmente a mesma imagem, juntamente com seus dados de ponto de conexão definidos, em qualquer um dos visualizadores.
Esteja ciente, no entanto, de que os Carousel Banners oferecem suporte para mapas de imagem em imagens que também podem conter pontos de conexão; uma imagem interativa não. Lembre-se disso se você pretende criar uma imagem interativa ou um banner de carrossel que use a mesma imagem. Você pode criar Imagens interativas e Banners de carrossel usando cópias separadas da mesma imagem.

Observação

Se você estiver editando imagens interativas com pontos de acesso e recortar a imagem, seus pontos de acesso serão removidos.

Consulte também Adição de mapas de imagem.

Para adicionar pontos de acesso ou mapas de imagem a um banner de imagem

  1. Em Ativos, navegue até o conjunto de carrossel que deseja tornar interativo.

  2. Selecione o conjunto de carrossel e toque em Editar. O Editor do visualizador do carrossel é aberto.

  3. Selecione o slide que deseja tornar interativo.

  4. Próximo ao canto superior esquerdo da página, toque em Ponto de acesso ou Mapa de imagem.

  5. Execute um dos procedimentos a seguir:

    • Para pontos de conexão: Na imagem, toque em um local onde deseja que o ponto de acesso apareça.
    • Para mapas de imagem: Na imagem, clique em e arraste da parte superior esquerda para a parte inferior direita para criar a área do mapa de imagem. É possível ajustar o tamanho do mapa de imagem arrastando os cantos.

    Se necessário, arraste o ponto de acesso ou o mapa de imagem para um novo local. Adicione outros pontos de acesso ou mapas de imagem, conforme necessário.

    Para excluir um ponto de acesso ou mapa de imagem, toque na guia Ações. No cabeçalho Mapas e pontos de acesso, no menu suspenso Tipo selecionado, selecione o nome do ponto de acesso ou mapa de imagem que deseja remover. Toque no ícone Lixeira, ao lado do menu, e toque em Excluir.

  6. No campo de texto Nome, digite o nome do ponto de acesso ou do mapa de imagem. Esse nome também aparece na lista suspensa Mapas e pontos de conexão . Fornecer um nome facilita a identificação do ponto de conexão ou do mapa de imagem se você decidir fazer alterações no mapa no futuro.

  7. Execute um dos procedimentos a seguir na guia Ações :

    • Toque em Quickview.

      • Se você for um cliente do AEM Sites e do Ecommerce, toque no ícone Seletor de produto (lupa) para abrir a página Selecionar produto. Toque no produto que deseja usar e, em seguida, toque na marca de seleção no canto superior direito da página para retornar ao Editor de banner do carrossel.

      • Se você não for um cliente da AEM Sites ou do Ecommerce

        • Consulte Identificação de variáveis de pontos de acesso, conforme desejado, para definir essas variáveis.

        • Em seguida, insira manualmente o valor SKU. No campo de texto Valor SKU, digite o SKU do produto (Stock Keeping Unit), que é um identificador exclusivo para cada produto ou serviço distinto que você oferta. O valor SKU inserido preenche automaticamente a parte variável do modelo de visualização rápida para que o sistema saiba associar o ponto de acesso tocado a uma visualização rápida do SKU específica.

        • (Opcional) Se houver outras variáveis na visualização rápida que você precisa usar para identificar um produto, toque em Adicionar variável genérica. No campo de texto, especifique uma variável adicional. Por exemplo, categoria=Masculino é uma variável adicionada.

        • Consulte Trabalhar com seletores para obter mais informações.

    • Toque em Hiperlink.

      • Se você for um cliente AEM Sites, toque no ícone Seletor de site (pasta) para navegar até um URL.

        Observação

        O método baseado em URL de vinculação não é possível se o conteúdo interativo tiver links com URLs relativos, principalmente links para páginas do AEM Sites.

      • Se você for um cliente independente, no campo de texto HREF, especifique o caminho do URL completo para uma página da Web vinculada.

    Certifique-se de especificar se deseja abrir o link em uma nova guia do navegador (padrão recomendado) ou na mesma guia.

    Consulte Trabalhar com seletores para obter mais informações.

    • Tap Experience Fragment.

      • Se você for um cliente AEM Sites, toque no ícone Pesquisar (lupa) para abrir a página Fragmento de experiência. Toque ou clique no Fragmento de experiência que você deseja usar e, em seguida, toque em Selecionar no canto superior direito da página para retornar à página de gerenciamento do Hotspot.
        Consulte Fragmentos de experiência.

      • Especifique a largura e a altura do Fragmento de experiência como ele aparecerá no banner.

        Observação

        Observe que as ferramentas de compartilhamento de mídia social no Carousel Banner não são suportadas quando você incorpora o visualizador em um Fragmento de experiência.
        Para contornar isso, você pode usar ou criar predefinições do visualizador que não tenham ferramentas de compartilhamento de mídia social. Essas predefinições do visualizador permitem que você as incorpore com êxito aos Fragmentos de experiência.

    experience_fragment-carouselbanner

    Você também pode pré-visualização como será o banner do carrossel. Consulte (Opcional) Visualização de bannersde carrossel.

  8. Toque em Salvar.

  9. Publique o conjunto de carrossel. A publicação cria o código incorporado ou o URL que você pode usar na página do site. Se você for um cliente da AEM Sites, poderá adicionar o conjunto de carrossel diretamente à sua página da Web.

    Consulte Publicar ativos.

    Consulte Adicionar um conjunto de carrossel à landing page do site

Observação

Usuários não administrativos devem ser adicionados ao grupo de usuários do DAM para que possam criar ou editar banners do carrossel. Se tiver problemas para criar ou editar, consulte o administrador do sistema que pode adicioná-lo ao grupo de usuários do DAM.

É possível executar várias tarefas de edição em Conjuntos de carrossel, como:

  • Adicione slides a um conjunto de carrossel. Consulte também Trabalhar com seletores.
  • Reorganize os slides no Conjunto de carrossel.
  • Exclua ativos no Conjunto de carrossel.
  • Aplicar uma predefinição do visualizador.
  • Exclua o conjunto de carrossel.
  • Adicione ou edite pontos de acesso e mapas de imagem. Consulte também Trabalhar com seletores.

Para editar um conjunto de carrossel

  1. Execute um dos procedimentos a seguir:

    • Passe o mouse sobre um ativo do Conjunto de carrossel e toque em Editar (ícone de lápis).

    • Passe o mouse sobre um ativo do Conjunto de carrossel, toque em Selecionar (ícone de marca de seleção) e, em seguida, toque em Editar na barra de ferramentas.

    • Tap on a Carousel Set asset, then in the upper-left corner of the page tap Edit (pencil icon).

  2. Para editar o Conjunto de carrossel, execute um dos procedimentos a seguir:

    • To add a slide, tap the Add Slide icon then navigate to the asset you want to add to that slide and tap or click the checkmark.
    • Para reordenar os slides, arraste um slide para um novo local (selecione o ícone de reordenação para mover os itens).
    • Para adicionar um ponto de acesso ou mapa de imagem, clique nos ícones de ponto de acesso ou mapa de imagem e consulte adicionar pontos de acesso e mapasde imagem.
    • To edit the appearance or behavior of the carousel set, tap the Appearance tab or Behavior tab, then set the options you want.
    • Para editar pontos de acesso ou mapas de imagem, no slide apropriado, selecione um ponto de acesso ou mapa de imagem e faça as alterações necessárias na guia Ações .
    • Para excluir um slide, selecione-o e toque em Excluir slide na barra de ferramentas.
    • To apply a preset, near the upper-right corner of the page, tap the Preset drop-down list, then select a viewer preset.
    • Para excluir um conjunto de carrossel inteiro, navegue até o conjunto de carrossel, selecione-o e toque em Excluir.
    Observação

    Se você estiver editando imagens interativas com pontos de acesso e recortar a imagem, seus pontos de acesso serão removidos.

Você pode usar a Pré-visualização para ver a aparência do seu banner de carrossel para os clientes e testar os pontos de conexão e mapas de imagem dos banners de carrossel para garantir que eles estejam se comportando como esperado.

Quando estiver satisfeito com o banner do carrossel, você poderá publicá-lo.
See Embedding the Video or Image Viewer on a Web Page.
See Linking URLs to your web application. Observe que o método baseado em URL de vinculação não é possível se o conteúdo interativo tiver links com URLs relativos, principalmente links para páginas do AEM Sites.
See Adding Dynamic Media Assets to pages.

Você pode pré-visualização banners de carrossel no Editor de carrossel (método preferencial) ou na lista Visualizadores .

Para pré-visualização de banners de carrossel

  1. Em Ativos, navegue até um banner de carrossel existente que você criou e toque para abri-lo.

  2. Toque em Editar.

  3. No visualizador predefine a lista no canto direito da barra de ferramentas, selecione um visualizador para pré-visualização no banner do carrossel.

    experience_fragment-carouselbanner-viewerlista suspensa

  4. Toque em [Pré-visualização.]

  5. Toque nos pontos de acesso ou mapas de imagem na imagem para testar suas ações associadas.

Para pré-visualização de banners de carrossel da lista Visualizadores

  1. Em Ativos, navegue até um banner de carrossel existente que você criou e toque para abri-lo.
  2. Ao lado do canto superior esquerdo da página de Pré-visualização, clique no ícone Conteúdo.
  3. Na lista Visualizadores no painel no lado esquerdo da página, toque no nome da predefinição do visualizador do banner do carrossel que deseja usar.
  4. Toque nos pontos de acesso ou mapas de imagem na imagem para testar suas ações associadas.

Você precisa publicar o carrossel para usá-lo. A publicação de um conjunto de carrossel ativa o URL e o código incorporado. Ele também publica o carrossel para a nuvem Dynamic Media, que é integrada a uma CDN para delivery escaláveis e de desempenho.

Observação

Se você usar uma imagem interativa existente com pontos de acesso para seu banner de carrossel, deverá publicar a imagem interativa separadamente depois de publicar o banner do carrossel.
Além disso, se você modificar uma imagem interativa publicada pré-existente que esteja usando em um banner de carrossel, deverá publicar a imagem interativa antes que essas alterações sejam refletidas no banner de carrossel.

Consulte Publicação de ativos de mídia dinâmica para obter informações sobre como publicar banners de carrossel.

Depois de fazer upload de imagens de banner para criar um carrossel, adicionar pontos de acesso e/ou mapas de imagem ao banner e publicar o conjunto de carrossel, você estará pronto para adicioná-lo à página existente do site.

Observação

Se você for um cliente da AEM Sites, poderá adicionar o banner do carrossel diretamente à sua página arrastando o componente de Mídia interativa para a página. See Adding Dynamic Media Assets to Pages.

No entanto, se você for um cliente AEM ativos independentes, poderá adicionar manualmente o banner do carrossel à landing page do site, conforme descrito nesta seção.

  1. Copie o código incorporado do conjunto de carrossel publicado.
    See Embedding the Video or Image Viewer on a Web Page.

  2. Adicione o código incorporado que você copiou do AEM Assets à sua página da Web.
    O código incorporado copiado é responsivo, portanto, deve ajustar-se automaticamente à área de incorporação da página.

Observação: esta etapa se aplica somente se você for um cliente independente da AEM Assets.

A última etapa desse processo é integrar o banner do carrossel a uma implementação de visualização rápida existente em seu site. Toda implementação de visualização rápida é única e é necessária uma abordagem específica que provavelmente envolva a assistência de uma pessoa de TI de front-end.

A implementação de visualização rápida existente normalmente representa uma cadeia de ações inter-relacionadas que ocorrem na página da Web na seguinte ordem:

  1. Um usuário aciona um elemento na interface do usuário do seu site.
  2. O código front-end obtém um URL de visualização rápido com base no elemento da interface do usuário que foi acionado na etapa 1.
  3. O código de front-end envia uma solicitação do Ajax usando o URL obtido na etapa 2.
  4. A lógica de backend retorna os dados de visualização rápida correspondentes ou o conteúdo de volta ao código de front-end.
  5. O código front-end carrega os dados ou o conteúdo da visualização rápida.
  6. Como opção, o código front-end converte os dados de visualização rápida carregados em uma representação HTML.
  7. O código front-end exibe uma caixa de diálogo modal ou um painel e renderiza o conteúdo HTML na tela do usuário final.

Essas chamadas podem não representar chamadas de API públicas independentes que podem ser chamadas pela lógica da página da Web de uma etapa arbitrária. Em vez disso, é uma chamada encadeada na qual cada próxima etapa está oculta na última fase (retorno de chamada) da etapa anterior.

Ao mesmo tempo que o banner do carrossel substitui a etapa 1 e parcialmente a etapa 2, quando um usuário clica em um ponto de conexão ou mapa de imagem dentro do banner do carrossel, essa interação do usuário é feita pelo visualizador. O visualizador retorna um evento para a página da Web que contém todos os dados de hotspot ou mapa de imagem adicionados anteriormente.

Nesse manipulador de eventos, o código front-end faz o seguinte:

  • Escuta um evento emitido pelo banner do carrossel.
  • Constrói um URL de visualização rápido com base no ponto de acesso ou nos dados do mapa de imagem.
  • Aciona o processo de carregamento da visualização rápida do backend e renderização na tela para exibição.

O código incorporado retornado pela AEM Assets já tem um manipulador de eventos pronto para uso no lugar que é comentado.

Portanto, é necessário remover as barras de comentário do código e substituir o corpo do manipulador de simulação pelo código específico da página da Web em particular.

O processo de construção do URL de visualização rápida é basicamente o oposto do processo usado para identificar as variáveis de hotspot e mapa de imagem abordadas anteriormente.

Consulte Identificação de variáveisde hotspot e mapa de imagem.

A última etapa para acionar o URL de visualização rápida e ativar o painel de visualização rápida provavelmente requer a assistência de uma pessoa de TI front-end do seu departamento de TI. Eles têm conhecimento para saber melhor como acionar com precisão a implementação rápida da visualização a partir da etapa correta, tendo um URL de visualização rápido pronto para uso.

Uso do Quickviews para criar pop-ups personalizados

See Using Quickviews to create custom pop-ups.

Nesta página