Imagens Interativas

Você pode fazer imagens estáticas ricas e atraentes para os clientes arrastando e liberando pontos interativos “de vendas” em uma imagem. Hotspots de vendas combinam informações adicionais sobre um produto ou serviço com um ponto direto e ponto de venda “Adicionar ao carrinho” ou “comprar”. Os clientes podem pressionar essas áreas interativas que estão diretamente ligadas ao produto ou serviço, adicionam-as a um carrinho de compras ou vinculadas a uma página da Web. Experiências diretas, como aumentar a participação de clientes e conversões no site.

O seguinte é um banner de vendas com uma janela pop-up de exibição rápida. Um usuário permite a visualização rápida tocando o círculo ou a “área interativa” do modelo.

ver Imagens interativas em ação no site exibido acima.

Veja como as bandeiras de imagem interativas são criadas

Olhe para um tutorial de 10 minutos e 33 segundos sobre como os sinais são criados interativos imagem. Você também vai aprender como visualizar, editar e distribuir banners de imagem interativos.

Início rápido: imagens interativas

A descrição a seguir Passo passo a passo do fluxo de trabalho é projetado para ajudá-lo a iniciar Imagens interativas rapidamente em ativos do AEM.

Encontre o cabeçalho de exemplo dentro de algumas das tarefas rápidas. Ele contém um breve tutorial com base em um exemplo de uma página da Web que não tem imagens interativas adicionadas a ele.

O tutorial ajuda a ilustrar as etapas para integrar imagens interativas em seu próprio site.

Etapas de imagem interativas:

1. (opcional) identificação de variáveis de ponto interativas. Se você usar o Adobe Experience Manager e os recursos dinâmicos de mídia independente, identificar as variáveis dinâmicas que você usa na implementação existente de visualização rápida. Desta forma, é garantido que você pode inserir dados de pontos interativos ao criar a imagem interativa. Veja (opcional) identificação de variáveis de ponto interativo.
   No entanto, se você usar sites do AEM, AEM Ecommerce, ou ambos, esta etapa não é necessária.

2. (opcional) Criação de uma configuração de visualizador de imagem interativa pré-estabelecida. Personalize a imagem gráfica que é usada para representar áreas interativas. Não é necessário criar seu próprio visualizador de imagem interativo pré-estabelecido, se você quiser usar a configuração de visualizador de imagem interativa predefinida, denominada Selecione (opcional) Criando um Configuração de visualizador de imagem interativa pré-estabelecida.

3. carregando um banner de imagem. Carregar banners de imagem que você deseja tornar interativo. Veja carregando um banner de imagem.

4. Adicionando zonas interativas a um suporte de imagem. Adicione uma ou mais áreas interativas a um banner de imagem. Associe cada um deles a uma ação como hiperlink, uma visão rápida ou um fragmento de experiência. Depois de adicionar zonas interativas, esta tarefa acabará publicando a imagem interativa.
   Consulte Adicionando zonas interativas a um suporte de imagem. Veja a visualização das imagens interativas – opcional. Se desejar, você pode ver uma representação do banner de vendas e testar sua interatividade. Veja a publicação de recursos para obter mais informações sobre como publicar recursos de imagem interativos.

5. Adicione uma imagem interativa ao site ou site no gerenciador de experiência. Se você usar sites, e-commerce ou ambos, poderá adicionar imagens interativas diretamente a uma página da Web no gerenciador de experiência. Arraste o componente de mídia interativo para a página. Consulte Adicionando Recursos Dinâmicos de Mídia às páginas.
   Se você usar ativos do gerenciador de experiência e mídia dinâmica de forma independente, copie o código criptografado no site. Em seguida, inclua-o com a visualização rápida existente. Consulte Integrado uma imagem interativa com o seu site.
   Se você usar um WCM de terceiros (Web Content Manager), integre o novo vídeo interativo com a visualização rápida existente que é usada no site. Consulte Integrado uma imagem interativa com uma visualização rápida existente.

(opcional) Identificação de variáveis de ponto interativo

Iniciar identificando as variáveis dinâmicas que usam a implementação de visualização rápida existente, para que você possa inserir dados de ponto interativo para criar a imagem interativa.

Quando adicionar áreas interativas Para uma imagem do suporte em ativos do gerenciador de experiência, atribua um SKU (unidade de manutenção de estoque). O SKU é um identificador exclusivo para cada produto ou serviço diferente que oferece. E, adicione qualquer variável opcional adicional a cada área interativa. Essas variáveis de pontos interativos são usadas mais tarde para combinar pontos interativos com o conteúdo da visualização rápida.

É importante identificar corretamente o número e o tipo de variáveis que serão associadas aos dados de pontos interativos. Cada zona interativa adicionada a uma imagem de banner deve conter informações suficientes para identificar o produto inequivocamente no sistema de back-end existente.

Existem diferentes maneiras de identificar um conjunto de variáveis que serão usadas para dados de Pontos.

Às vezes é suficiente para consultar especialistas em TI responsáveis pela implementação de visão rápida existente. É provável que essas pessoas saibam qual é necessário o conjunto mínimo de dados para identificar a visualização rápida no sistema. No entanto, também é possível simplesmente analisar o comportamento existente do código front-end.

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

• o usuário ativar Um elemento de interface do usuário no site. Por exemplo, clicando no botão “Visualização rápida”.
• O site envia um aplicativo AJAX para o servidor 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 em conteúdo como preparação para renderização na página da Web.
• Finalmente, o código front-end processa visualmente o conteúdo da tela.

O método é então visitando diferentes áreas do site existente onde a função de visualização rápida é implementada. Em seguida, ative a visualização rápida e capture o URL do AJAX que envia a página da Web para carregar os dados ou o conteúdo da visualização rápida.

Normalmente não é necessário usar qualquer ferramenta especializada de depuração. Navegadores da Web modernos têm inspetores da Web que realizam trabalho adequado. Abaixo 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 para abrir o painel Ferramentas do desenvolvedor e, uma continue, clique em A guia Rede.
  em um Mac, pressione Command + Option + i para abrir o painel Ferramentas do desenvolvedor e, em seguida, clique na guia Rede.

• no firefox, você pode ativar o snap-in do Firebug e usando sua guia de rede. Ou você pode usar a ferramenta Inspetor Integrado e sua guia de rede.
  em um Mac, pressione Command + Option + i O painel Ferramentas de desenvolvedores e, em seguida, clique no painel Ferramentas de desenvolvedores e, em seguida, clique no inspetor Tab.

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

Agora, procure o URL Ajax de Visualização Rápida no registro de rede e copie o URL registrado para análise futura. Normalmente, quando a visualização rápida é ativada, há muitas solicitações enviadas para o servidor. Normalmente, o URL AJAX de Visualização Rápida é um dos primeiros na lista. Tem uma rota ou parte de uma cadeia de consulta complexa e seu tipo MIME de resposta é text/html, text/xml ou text/javascript.

Durante este processo, é importante visitar diferentes áreas do site, com diferentes tipos e categorias de produtos. A razão é que as URLs de vista rápida podem ter peças comuns para uma determinada categoria de site. No entanto, eles só mudam se você visitar uma área diferente do site.

No caso mais simples, a única parte variável da URL da visualização rápida é a SKU do produto. Nesse caso, o valor da SKU é o único pedaço de dados que você precisa para adicionar zonas interativas à imagem do banner.

No entanto, em casos complexos, o URL de visualização rápida tem elementos diferentes, além do SKU. Por exemplo, os diferentes elementos podem incluir o ID da categoria, o código de cor e o código de tamanho.Nestes casos, cada elemento é uma variável independente na definição de dados de pontos interativos da função imagem ATIVO vendas Experience Manager

Vamos ver os seguintes exemplos de rápido URL vista e as variáveis de resultado pontos interativos.:

SKU único, que está na cadeia de consulta.	Registered rápidos Veja URLs 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 da variável na URL é o valor do Query Chain Parameter Produto = e é claramente um valor de SKU. Portanto, as áreas interativas só precisam de campos de SKU preenchidos com valores, como 866558, 1196184, 1081492, 1898294.
SKU único, que está no caminho URL.	Registered rápidos Veja URLs incluem o seguinte: https://server/product/6422350843 https://server/product/1607745002 https://server/product/0086724882 a parte variável é encontrado na última parte da rota e se torna o valor SKU das zonas interactivas: 6422350843, 1607745002, 0086724882.
SKU e categoria de ID na . query cadeia	Registered rápidos Veja URLs 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 Neste caso, há duas partes diferentes no URL. O SKU é armazenado no parâmetro prodId e o ID da categoria é armazenado no parâmetro category= Como tal, as definições de pontos interativos são pares. Ou seja, um valor de SKU e uma variável adicional chamada categoryId. Os pares resultantes são os seguintes: O SKU é 305466 e categoryId é 1100004 o sku é 310181 e categoryId é 1100004. O SKU é 308706 e categoryId é 1740148

Exemplo

Você pode aplicar a mesma abordagem usada nos três exemplos anteriores da página de demonstração web.

A página da Web de demonstração tem várias miniaturas de produtos, cada uma com um botão de visualização rápida rotulado como “veja mais”. Com a ferramenta de depuração do Web Explorer ainda ativada, clique em cada botão e anote os URLs registrados de visualização rápida. Depois de ativar o produto de quatro rápida vistas disponíveis na página, ele tem a lista de pedidos de visualização rápida seguinte executados no servidor:

• /datafeed/Men-Windbreaker.json
• /datafeed/Men-CamoPullover.json
• /datafeed/Women-QuiltedDownJacket.json

Ao examinar as chamadas para o servidor, você pode ver que as informações específicas do produto só estão presentes no caminho do aplicativo. Também observa que a cadeia de consulta não é usada e que existem dois tipos diferentes de fragmentos de dados envolvidos:

• O primeiro tipo é homens ou mulheres. Você pode chamar isso de “categoria de produto”.
• O segundo tipo é o nome do produto, como Camopulover, que é provavelmente o SKU do produto.

Perante esta informação, toda a URL vista rápida tem o seguinte padrão:

/datafeed/$categoryId$-$SKU$.json

dependendo dessa análise, seria usar categoryId e SKU para zonas interactivas.

já está pronto para carregar um suporte de imagem e adicionar zonas interactivas através da função de image vendas interativa em Ativos AEM.

(Opcional) Criando uma imagem interativa pré-indicado espectador

Você pode optar por usar o padrão predefinido e pronto para usar a imagem telespectador interativo chamado Shoppable_Banner Incluído com ativos AEM. Ou você pode criar sua própria predefinição de exibição personalizada para usá-lo com imagens interativas.

Ao criar uma configuração pré-ajustada personalizada do visor interativo da imagem, você pode determinar a aparência das zonas interativas na bandeira da imagem .Como parte da criação da configuração de visualização pré-estabelecida, você pode optar por usar um gráfico de zona interativa de uma galeria de imagem predefinida.

Após salvar a configuração do visualizador predefinido, ele é ativado automaticamente (ativado) A página da lista configurações de visualizador pré-estabelecidas em ativos AEM. Essa funcionalidade significa que é visível no componente de mídia interativa e sempre que um recurso é visto. No entanto, para entregar um banner interativo com este ajuste predefinido, publique também a configuração do visualizador pré-estabelecida. Esta regra é verdadeira para configurações pré-definidas personalizadas ou predeterminadas.

Para criar uma configuração de visualizador de imagem interativa

1. no canal esquerdo, pressione Ferramentas > Activos > Visual configurações predefinidas.

2. Perto do canto superior direito da página, clique em Criar .

3. Na caixa de diálogo Novo visualizador predefinição, digite um nome para descrever a configuração de exibição de banner interativa pré-estabelecida.

   Este título aparece no VisualFinder Preset configurações da lista de configurações Depois de salvá-lo.

4. No menu suspenso Enriquecido Tipo de Mídia, selecione Imagem Interativa.

5. Toque em Criar.

6. Na página Editar configuração do Visualizer Predefinir, pressione a guia Aspect.

7. siga um dos seguintes :

   • Para carregar sua própria imagem de zona interativa que você deseja usar em imagens, pressione o ícone do seletor de recursos. Na página Selecionar conteúdo, vá para a imagem de zona interativa que você deseja usar e selecioná-lo. Pressione o ícone da marca de seleção no canto superior direito.
   • Para selecionar uma imagem de zona interativa predefinida, pressione o ícone da galeria de pontos interativos. Na Paleta de Galeria de Pontos Interativos, pressione a imagem da zona interativa que você deseja usar.

8. perto do canto superior direito da página, pressione Salvar.

   Certifique-se de publicar a nova configuração do visualizador pré-definido.

   Consulte as configurações de visualização de publicação personalizada.

   Você está pronto para carregar um suporte de imagem.

Carregando um suporte de imagem

Se você já carregou as imagens que deseja usar, avance para a próxima etapa, adicione zonas interativas a um suporte de imagem.

Para carregar um suporte de imagem

1. Banners de imagem de carga que você deseja tornar interativo.

   Veja o intervalo de recursos.

   já está pronto para adicionar zonas interativas ao titular da imagem; Consulte a seguinte tarefa abaixo.

Adicionando zonas interativas a um suporte de imagem

Você pode adicionar zonas interativas a um banner de imagem usando o editor da interativa Página de gerenciamento de pontos.

Ao adicionar zonas interativas, você pode defini-los como uma visualização pop-up da visualização rápida, como um hiperlink ou um fragmento de experiência.

Veja fragmentos de experiências .

Opções Desfazer e refazer, perto do canto superior direito da página, são compatíveis durante a sessão de Criação / edição atual.

Quando você terminar de criar a imagem interativa, você pode usar a visualização para ver uma representação de como a imagem interativa aparece para os clientes.

ver (opcional) vista anterior de imagens interativas.

para adicionar zonas interativas a um suporte de imagem

1. Na visualização Recursos, vá até o banner de imagem que você deseja converter para interativo.

2. faça uma das seguintes ações:

   • Passe o mouse sobre a imagem e, em seguida, pressione Selecionar (ícone de marca de seleção). Na barra de ferramentas, pressione Editar.

   • Passe o mouse sobre a imagem e, em seguida, clique em Mais ações (ícone de três pontos) Editar.

   • Para abri-lo na página de exibição de detalhes, pressione a imagem. Na barra de ferramentas, pressione Editar.

3. Perto do canto superior esquerdo da página, clique em Adicionar área interativa (ícone com o dedo) para abrir a página de gerenciamento de pontos interativos.

4. Perto do canto superior esquerdo da página, pressione a zona interativa.

   1. nas proximidades do canto superior esquerdo de A página de gerenciamento de pontos interativos, pressione zona interativa.
   2. na imagem, clique em um local onde você deseja que o ponto interativo apareça. Se necessário, arraste a área interativa para ajustar sua localização. Ou, use as teclas de seta no teclado para controlar a posição de um ponto interativo selecionado.
   3. Adicione mais áreas interativas conforme necessário, repetindo as etapas A e b.
   4. (opcional) para Exclua uma zona interativa, selecione-a na imagem e pressione Excluir (ícone de lixo) no cabeçalho da zona interativa.

5. no campo do nome do texto, Digite o nome da área interativa. Este nome também aparece na lista suspensa Zona interativa selecionada.

6. siga um destes procedimentos:

   • pressione Visualização rápida .

     • Se você for sites AEM ou cliente de comércio eletrônico, toque ou clique no ícone do seletor de produto (LUPA) para abrir a página Selecionar produto. Pressione o produto que você deseja usar e, em seguida, pressione Selecionar no canto superior direito da página. Ele retornará à página de gerenciamento de pontos interativos.

     • Se não for cliente de sites de gerenciador de experiência ou comércio eletrônico

       • veja a identificação de variáveis de pontos interativo; Você deve definir essas variáveis.
       • Em seguida, insira manualmente o valor da SKU. No campo de texto Valor SKU, escreva o produto SKU. O valor do SKU inserido preenche automaticamente a parte variável do modelo de visualização rápida. Garante que o sistema marítimo associe a área interativa utilizada com a visão rápida de um SKU específico.
       • (opcional) se houver outras variáveis dentro da visualização rápida que são usadas para identificar um produto, pressione Adicionar variável genérica . No campo Texto, especifique uma variável adicional. Por exemplo, category=Mens é uma variável agregada.

   • tocar hiperlink.

     • Se você é cliente de sites do gerenciador de experiência, pressione o ícone do seletor de site (pasta). Vá a um URL. O método de links baseado em URL não é possível se o conteúdo interativo tiver links com URLs relativos, especialmente links para páginas de sites de gerenciador de experiência.
     • Se for cliente independente, no campo de texto href especificar o URL completo Rota para uma página da Web vinculada.

   Certifique-se de especificar se deseja abrir o link em uma nova guia do navegador (a opção padrão recomendada) ou no Mesma guia.

   Consulte os seletores para mais informações.

   • Pressione o fragmento de experiências.

     • Se você Sites de clientes AEM, toque ou clique no ícone de pesquisa (lupa) para abrir o fragmento da página de experiências. Toque no fragmento da experiência que você deseja usar. Em seguida, pressione Selecionar no canto superior direito da página. Ele retornará à página de administração de pontos interativos. Veja fragmentos de experiências.

     • Especifique a largura e a altura do fragmento da experiência como você deseja aparecer no banner.

       Nota

       As ferramentas de compartilhamento de mídia social na imagem interativa não são compatíveis quando o visor é incorporado em um fragmento de experiência. Em vez disso, use ou crie ajustes predefinidos do Visualizer que não possuem ferramentas de compartilhamento de mídia social.Essas configurações de visualizador predefinidas permitem incorpor-las corretamente em fragmentos de experiência.

7. Toque em Salvar para salvar o trabalho e retornar à página de navegação.

8. Publique a imagem interativa. A publicação fornece o banner através da nuvem e também gera código incorporado que permite integrar um site de terceiros.

   Consulte os recursos de publicação.

   Após adicionar zonas interativas e publicar o Imagem interativa, você está pronto para adicioná-lo ao site existente.

   Veja a integração de uma imagem interativa com o seu site.

   Note

   Se você editar imagens interativas com zonas interativas e cortar a imagem, as zonas interativas serão excluídas.

(opcional) anterior de Imagens interativas

Você pode visualizar uma representação da aparência que terá a imagem interativa para os clientes. A pré-visualização também permite testar as zonas interativas da imagem para se certificar de que eles se comportam da maneira esperada.

Quando estiver satisfeito com a imagem interativa, você pode publicá-lo. Verifique a imagem Visualizador ou vídeos em uma página da Web.
Consulte o link URL para o aplicativo da Web. O método de ligação baseado em URL não é possível se o conteúdo interativo tiver links com URLs relativos, especialmente links para páginas de sites do AEM. Veja a adição de recursos dinâmicos de mídia às páginas.

para visualizar imagens interativas

1. na visualização Recursos, vá até a imagem interativa existente que você criou e pressione para abri-lo na visualização.
2. perto do canto superior esquerdo da página de visualização, na queda de conteúdo lista, toque em listas.
3. na lista Visualizers, pressione ShopPable_banner ou o nome da configuração pré-estabelecida da exibição de imagem interativa que você criou.
4. para testar o Ações das áreas interativas, pressione as zonas interativas da imagem.

Publicação de recursos de imagem interativos

Consulte os recursos de publicação para obter mais informações sobre como publicar os recursos de imagem Interacti você.

Integração de uma imagem interativa com o seu site

após carregar uma imagem de banner, adicionando zonas interativas a ele e publique a imagem interativa, você está pronto para adicioná-lo ao Page do site.

Se você é sites do cliente AEM, poderá adicionar a imagem interativa arrastando o componente de mídia interativo para sua página. Consulte Adicionando Recursos Dinâmicos de Mídia às páginas.

Se você é um cliente independente dos ativos do AEM, você pode adicionar manualmente a imagem interativa ao seu site, conforme descrito nesta seção.

1. Copie o código incorporado da imagem interativa publicada. Verifique se a imagem ou vídeos é exibida em uma página da Web.

2. Adicione o código incorporado Copiando no desejo Localização dentro da página da Web. O código incorporado copiado é configurado para um ambiente interativo, de modo que ele seja automaticamente definido para a área atribuída.

Exemplo

com o site de show como exemplo, observe que a imagem das três pessoas é uma etiqueta estática IMG

<img class="img-responsive" width="100%" title="Hero Image 2" alt="Hero Image 2" src="images/shoppable-banner.jpg">

Integração é tão simples quanto excluir o rótulo IMG e substitua-o pelo código incorporado copiado dos ativos do AEM. Você pode ver que o resultado mostra a imagem de vendas interativa na página com três pontos círculos interativos.

Para aplicar um “Trim” a uma imagem de vendas interativa para um ambiente interativo, inclua o atributo de configuração de imagem interativa ZoomView.iscommand para a rota. Nesse caso, é chamado de componente e iscommand é o comando “colheita” do servidor que é aplicado.

Consulte o atributo Configuration Zoomview.iscommand.

Consulte o comando do servidor de imagem de corte.

já está pronto para integrar a imagem interativa com uma visualização rápida em seu site.

Integração de uma imagem interativa com uma visualização rápida existente

A última etapa deste processo é integrar a imagem interativa com uma implementação de visualização rápida existente no site.Não há solução para integração que funcione em todos os casos. Cada implementação de visualização rápida é única e uma abordagem específica é necessária. Como tal, a participação de uma pessoa de TI front-end é útil.

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

OL>

Um usuário ativa um item na interface do usuário do site.

O código front-end recebe um URL de visualização rápida com base no item da interface do usuário que foi ativado na etapa 1.

O código front-end envia uma solicitação AJAX usando o URL obtido na etapa 2.

A lógica de back-end retorna os dados ou o conteúdo de visualização rápida correspondente ao código front-end.

O código front-end carrega os dados ou o conteúdo da visualização rápida.

Opcionalmente, o código frontal End converte dados de visualização rápida carregado em uma representação HTML.

O código front-end exibe uma caixa de diálogo modal ou painel e representa o conteúdo HTML na tela para o O usuário final.

Estas chamadas não representam necessariamente as chamadas de API públicas independentes para as quais a lógica do site chama de uma etapa arbitrária. Em vez disso, é uma chamada acorrentada na qual cada próxima etapa está oculta na última fase (chamada de retorno) da etapa anterior.

Quando a imagem interativa da tabela de vendas substitui a etapa 1 e, em parte , Para o passo 2, um usuário toca uma área interativa dentro da imagem da mesa de compras. O espectador gerencia essa interação do usuário. O visor retorna um evento para o site que contém todos os dados de ponto interativo adicionados anteriormente aos ativos do AEM.

Em um controlador de eventos deste tipo, o código front-end faz o seguinte:

• Ouça um evento emitido pela imagem de vendas interativas.
• Crie um URL de visualização rápida com base nos dados da zona interativa.
• Ativa o processo para carregar a visualização rápida de O servidor e processá-lo na tela para exibição.

O código incorporado retornado por Ativos do Gerenciador de Experiência possui um driver de evento pronto para ser discutido, como VE na próxima fonte de código realçada:

 var s7interactiveimageviewer = new s7viewers.InteractiveImage({ "containerId" : "s7interactiveimage_div", "params" : { "serverurl" : "https://aodmarketingna.assetsadobe.com/is/image", "contenturl" : "https://aodmarketingna.assetsadobe.com/", "config" : "/etc/dam/presets/viewer/Shoppable_Media", "asset" : "/content/dam/mac/aodmarketingna/shoppable-banner/shoppable-banner.jpg" } }) /* // Example of interactive image event for Quickview. s7interactiveimageviewer.setHandlers({ "quickViewActivate": function(inData) { var sku=inData.sku; //SKU for product ID //To pass other parameter from the hotspot, you will need to add custom parameter during the hotspot setup as parameterName=value loadQuickView(sku); //Replace this call with your Quickview plugin //Please refer to your Quickviewer plugin for the Quickview call }, }); */ s7interactiveimageviewer.init();

Portanto, é necessário decomentar o código e substituir o corpo do controlador fictício pelo código específico do site em particular.

O processo de construção da URL de vista rápida é oposto ao processo usado para identificar o s Variáveis de pontos interativos que foram previamente cobertos.

Veja a identificação de variáveis de ponto interativo.

Nos exemplos anteriores de URL de visualização rápida, você pode ver nos exemplos a seguir como é construído O URL de Visualização Rápida em cada caso:

single sku, encontrado em a cadeia de consulta	s7interactiveimageviewer.setHandlers({ "quickViewActivate": function(inData) { var quickViewUrl = "https://server/json?productId=" + inData.sku + "&source=100"; }, });
single sku, que está ligado a rota de URL	s7interactiveimageviewer.setHandlers({ "quickViewActivate": function(inData) { var quickViewUrl = "https://server/product/" + inData.sku; }, });
SKU E ID da categoria na consulta Cadeia	s7interactiveimageviewer.setHandlers({ "quickViewActivate": function(inData) { var quickViewUrl = "https://server/quickView/product/?category=" + inData.categoryId + "&prodId=" + inData.sku; }, });

A última etapa para ativar o URL de visualização rápida e ativar o painel de visualização rápida requer a assistência de uma pessoa frontal da sua empresa. Eles têm conhecimento para saber melhor como ativar com precisão a implementação da visualização rápida da etapa apropriada, tendo uma URL de exibição rápida pronta para uso.

Você pode ver como essas etapas se aplicam ao site de demonstração para completamente Integre uma imagem de vendas interativa com o código de visualização rápida. Anteriormente, a estrutura da URL de visualização rápida foi identificada como a seguinte:

/datafeed/$categoryId$-$SKU$.json

para reconstruir este URL dentro do controlador quickViewActivate, você pode usar os campos categoryId e SKU. Esses campos estão disponíveis no objeto inData que o código do visualizador passa para o controlador:

var sku=inData.sku;var categoryId=inData.categoryId;var quickViewUrl = "datafeed/" + categoryId + "-" + sku + ".json";

a demonstração do site Ativa a caixa de diálogo Visão rápida usando uma chamada de função simples loadQuickView(). Esta função leva apenas um argumento, que é o URL de dados de visualização rápida. Como tal, o último passo para integrar a imagem de vendas interativa é adicionar a seguinte linha de código ao controlador quickViewActivate

loadQuickView(quickViewUrl);

O seguinte é o código-fonte completo:

 var s7interactiveimageviewer = new s7viewers.InteractiveImage({ "containerId" : "s7interactiveimage_div", "params" : { "serverurl" : "https://aodmarketingna.assetsadobe.com/is/image", "contenturl" : "https://aodmarketingna.assetsadobe.com/", "config" : "/etc/dam/presets/viewer/Shoppable_Media", "asset" : "/content/dam/mac/aodmarketingna/shoppable-banner/shoppable-banner.jpg" } }) s7interactiveimageviewer.setHandlers({ "quickViewActivate": function(inData) { var sku=inData.sku; var categoryId=inData.categoryId; var quickViewUrl = "datafeed/" + categoryId + "-" + sku + ".json"; loadQuickView(quickViewUrl); }, }); s7interactiveimageviewer.init();

O site de demonstração final com a imagem interativa interativa.

Usando vistas rápidas para criar janelas pop-up personalizadas

Consulte Usar visualizações rápidas para criar janelas pop-up personalizadas.