DocumentaçãoAEM 6.5Guia do usuário

Criar pop-ups personalizados usando o Quickview using-quickviews-to-create-custom-pop-ups

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Tópicos:

Criado para:

  • Usuário
  • Administrador

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:

  1. 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 Adicionando hotspots a um banner de imagem.
    Vídeos interativos Adicionando interatividade ao seu vídeo.
    Banners em carrossel Adicionando pontos de acesso ou mapas de imagem a um banner.

  2. 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 Integrando uma imagem interativa com seu site.
    Vídeo interativo Integrando um vídeo interativo ao seu site.
    Banner do carrossel Adicionando um banner de carrossel à página do seu site.

  3. 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:

    chlimage_1-291

    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 o método setHandlers() em:

  4. Configure o manipulador quickViewActivate.

    O manipulador quickViewActivate 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 de inserção fornece o mapeamento para a variável SKU definida na Quickview e uma chamada de função de amostra loadQuickView.

    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 exemplo presume que a função loadQuickView() existe e está acessível.

    Saiba mais sobre o método quickViewActivate em:

  5. 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 a chamada loadQuickView(sku,*var1*,*var2*) se estiver adicionando variáveis adicionais.

    • Crie uma função simples 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.

  6. 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.

  7. Estilize o pop-up DIV da seguinte maneira. 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>

  8. Coloque o pop-up DIV no corpo da página de 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>

  9. 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>

  10. 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.

  11. 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.

    O manipulador initComplete é chamado depois que o visualizador é inicializado.

    code language-xml 
    "initComplete":function() { code block }

    Saiba mais sobre o método init() em:

  12. 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.

  13. 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);
    }
});

  14. 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 à 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 o init().

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2