Criar pop-ups personalizados usando o Quickview using-quickviews-to-create-custom-pop-ups
O Quickview padrão é usado em experiências de comércio eletrônico pelas quais um pop-up é exibido com as informações do produto para impulsionar uma compra. No entanto, é possível acionar a exibição do conteúdo personalizado nas janelas pop-up. Dependendo do visualizador, essa funcionalidade permite que os usuários selecionem em um ponto de acesso, uma imagem em miniatura ou um mapa de imagem para ver informações ou conteúdo relacionado.
A exibição rápida é compatível com os seguintes visualizadores no Dynamic Media:
- Imagem interativa (pontos de acesso clicáveis)
- Vídeo interativo (imagens em miniatura clicáveis durante a reprodução do vídeo)
- Banner do carrossel (pontos de acesso clicáveis ou mapas de imagem)
Embora a funcionalidade de cada visualizador seja diferente, o processo de criação de uma Visualização rápida é o mesmo em todos os três visualizadores compatíveis.
Para criar pop-ups personalizados usando o Quickview:
-
Crie uma visualização rápida para um ativo carregado.
Normalmente, você cria uma Visualização rápida ao mesmo tempo em que edita um ativo para uso com o visualizador que está usando.
table 0-row-2 1-row-2 2-row-2 3-row-2 html-authored no-header Visualizador que você está usando Conclua estas etapas se desejar criar a Visão rápida Imagens interativas Adicionar pontos de acesso a um banner de imagem. Vídeos interativos Adicionar interatividade ao vídeo. Banners em carrossel Adicionar pontos de acesso ou mapas de imagem a um banner. -
Obtenha o código de inserção do visualizador para Integrar o visualizador no seu site.
table 0-row-2 1-row-2 2-row-2 3-row-2 html-authored no-header Visualizador que você está usando Conclua essas etapas se desejar integrar o visualizador ao seu site Imagem interativa Integração de uma imagem interativa ao seu site. Vídeo interativo Integração de um vídeo interativo ao seu site. Banner do carrossel Adicionar um banner de carrossel à página do site. -
O visualizador que você está usando deve saber como usar o Quickview.
O visualizador usa um manipulador chamado
QuickViewActive
.Exemplo
Suponha que você use o seguinte exemplo de código incorporado do na sua página da Web para uma imagem interativa:O manipulador é carregado no visualizador usando
setHandlers
:*viewerInstance*.setHandlers({ *handler 1*, *handler 2*}, ...
Usando o exemplo de código incorporado de exemplo acima, há o seguinte código:
code language-xml s7interactiveimageviewer.setHandlers({ quickViewActivate": function(inData) { var sku=inData.sku; var genericVariable1=inData.genericVariable1; var genericVariable2=inData.genericVariable2; loadQuickView(sku,genericVariable1,genericVariable2); } })
Saiba mais sobre
setHandlers()
no seguinte endereço:- Visualizador de imagens interativo: https://experienceleague.adobe.com/docs/dynamic-media-developer-resources/library/viewers-for-aem-assets-only/interactive-images/jsapi-interactive-image/r-html5-aem-int-image-viewer-javascriptapiref-sethandlers.html?lang=pt-BR
- Visualizador de vídeo interativo: https://experienceleague.adobe.com/docs/dynamic-media-developer-resources/library/viewers-for-aem-assets-only/interactive-video/jsapi-interactive-video/r-html5-aem-int-video-javascriptapiref-sethandlers.html?lang=pt-BR
-
Configure o
quickViewActivate
manipulador.A variável
quickViewActivate
O manipulador controla o Quickview no visualizador. O manipulador contém a lista de variáveis e chamadas de função para uso com o Quickview. O código incorporado fornece o mapeamento para a variável SKU definida na Visualização rápida e uma amostraloadQuickView
função.Mapeamento de variáveis
Mapeie as variáveis a serem usadas na página da Web para o valor SKU e as variáveis genéricas contidas na exibição rápida:var *variable1*= inData.*quickviewVariable*
O código incorporado fornecido tem uma amostra de mapeamento para a variável SKU:
var sku=inData.sku
Mapeie as variáveis adicionais do Quickview também, como no exemplo a seguir:
code language-none var <i>variable2</i>= inData.<i>quickviewVariable2</i> var <i>variable3</i>= inData.<i>quickviewVariable3</i>
Chamada de função
O manipulador também requer uma chamada de função para que o Quickview funcione. Supõe-se que a função esteja acessível pela página do host. O código incorporado fornece um exemplo de chamada de função:loadQuickView(sku)
A chamada de função de amostra assume a função
loadQuickView()
existe e está acessível.Saiba mais sobre
quickViewActivate
no seguinte endereço:- Visualizador de imagens interativo: https://experienceleague.adobe.com/docs/dynamic-media-developer-resources/library/viewers-for-aem-assets-only/interactive-images/c-html5-aem-interactive-image-event-callbacks.html?lang=pt-BR
- Visualizador de vídeo interativo: https://experienceleague.adobe.com/docs/dynamic-media-developer-resources/library/viewers-for-aem-assets-only/interactive-video/c-html5-aem-int-video-event-callbacks.html?lang=pt-BR
- Suporte a dados interativos no visualizador de vídeo interativo: https://experienceleague.adobe.com/docs/dynamic-media-developer-resources/library/viewers-for-aem-assets-only/interactive-video/c-html5-aem-int-video-int-data-support.html?lang=pt-BR
-
Faça o seguinte:
-
Remova o comentário da seção setHandlers do código incorporado.
-
Mapeie quaisquer variáveis adicionais contidas na Quickview.
- Atualize o
loadQuickView(sku,*var1*,*var2*)
chame se você estiver adicionando variáveis adicionais.
- Atualize o
-
Criar uma
loadQuickView
() na página, fora do visualizador.Por exemplo, o código a seguir grava o valor do SKU no console do navegador:
code language-xml function loadQuickView(sku){ console.log ("quickview sku value is " + sku); }
-
Carregue uma página de HTML de teste em um servidor da Web e abra.
Com as variáveis do Quickview mapeadas e a chamada de função estabelecida, o console do navegador grava o valor da variável no console do navegador usando a função de exemplo fornecida.
-
-
Agora você pode usar uma função para chamar um pop-up simples no Quickview. O exemplo a seguir usa um
DIV
para um pop-up. -
Estilo do pop-up
DIV
da seguinte forma. Adicione seus próprios estilos adicionais conforme desejado.code language-xml <style type="text/css"> #quickview_div{ position: absolute; z-index: 99999999; display: none; } </style>
-
Inserir o pop-up
DIV
no corpo da página do HTML.Um dos elementos é definido com uma ID que é atualizada com o valor da SKU quando o usuário chama uma Quickview. O exemplo também inclui um botão simples para ocultar o pop-up novamente depois que ele se tornar visível.
code language-xml <div id="quickview_div" > <table> <tr><td><input id="btnClosePopup" type="button" value="Close" onclick='document.getElementById("quickview_div").style.display="none"' /><br /></td></tr> <tr><td>SKU</td><td><input type="text" id="txtSku" name="txtSku"></td></tr> </table> </div>
-
Adicione uma função para atualizar o valor SKU no pop-up; torne o pop-up visível substituindo a função simples criada na etapa 5. com o seguinte:
code language-xml <script type="text/javascript"> function loadQuickView(sku){ document.getElementById("txtSku").setAttribute("value",sku); // write sku value document.getElementById("quickview_div").style.display="block"; // show popup } </script>
-
Carregue uma página de HTML de teste no servidor Web e abra. O visualizador exibe o pop-up
DIV
quando um usuário invoca uma Quickview. -
Como exibir o pop-up personalizado no modo de tela cheia
Alguns visualizadores, como o visualizador de Vídeo interativo, oferecem suporte à exibição no modo de tela cheia. Entretanto, usar o pop-up conforme descrito nas etapas anteriores faz com que ele seja exibido atrás do visualizador enquanto está no modo de tela cheia.
Para que o pop-up seja exibido nos modos padrão e de tela cheia, anexe o pop-up ao contêiner do visualizador. Use um segundo método de manipulador,
initComplete
.A variável
initComplete
é chamado depois que o visualizador é inicializado.code language-xml "initComplete":function() { code block }
Saiba mais sobre
init()
no seguinte endereço:- Visualizador de imagens interativo: https://experienceleague.adobe.com/docs/dynamic-media-developer-resources/library/viewers-for-aem-assets-only/interactive-images/jsapi-interactive-image/r-html5-aem-int-image-viewer-javascriptapiref-init.html?lang=pt-BR
- Visualizador de vídeo interativo: https://experienceleague.adobe.com/docs/dynamic-media-developer-resources/library/viewers-for-aem-assets-only/interactive-video/jsapi-interactive-video/r-html5-aem-int-video-javascriptapiref-init.html?lang=pt-BR
-
Para anexar o pop-up descrito nas etapas anteriores ao visualizador, use o seguinte código:
code language-xml "initComplete":function() { var popup = document.getElementById('quickview_div'); popup.parentNode.removeChild(popup); var sdkContainerId = s7interactivevideoviewer.getComponent("container").getInnerContainerId(); var inner_container = document.getElementById(sdkContainerId); inner_container.appendChild(popup); }
No código acima, o seguinte foi feito:
- Identificada a janela pop-up personalizada.
- Removido do DOM.
- Identificado o contêiner do visualizador.
- Anexado o pop-up ao contêiner do visualizador.
-
Seu código setHandlers inteiro é exibido de forma semelhante ao seguinte (o visualizador de Vídeo interativo foi usado):
code language-xml s7interactivevideoviewer.setHandlers({ "quickViewActivate": function(inData) { var sku=inData.sku; loadQuickView(sku); }, "initComplete":function() { var popup = document.getElementById('quickview_div'); // get custom quick view container popup.parentNode.removeChild(popup); // remove it from current DOM var sdkContainerId = s7interactivevideoviewer.getComponent("container").getInnerContainerId(); var inner_container = document.getElementById(sdkContainerId); inner_container.appendChild(popup); } });
-
Após carregar os manipuladores, você inicializa o visualizador:
*viewerInstance.*init()
Exemplo
Este exemplo usa o visualizador de Imagem interativa.s7interactiveimageviewer.init()
Depois de incorporar o visualizador na página do host, verifique se a instância do visualizador foi criada e se os manipuladores foram carregados antes que o visualizador seja chamado usando
init()
.