Uso do Quickviews para criar pop-ups personalizados

A exibição rápida padrão é usada em experiências de comércio eletrônico, em que uma janela pop-up é exibida com informações do produto para acionar uma compra. No entanto, é possível acionar a exibição de conteúdo personalizado nos pop-ups. Dependendo do visualizador usado, essa funcionalidade permite que os usuários cliquem em um ponto de acesso ou em uma imagem em miniatura, ou em um mapa de imagem para ver informações ou conteúdo relacionado.

As exibições rápidas são suportadas pelos seguintes visualizadores no Dynamic Media:

  • Imagens interativas (pontos de acesso clicáveis)
  • Vídeo interativo (imagens em miniatura clicáveis durante a reprodução do vídeo)
  • Banners de carrossel (pontos de conexão clicáveis ou mapas de imagem)

Embora a funcionalidade de cada visualizador seja diferente, o processo de criação de uma exibição rápida é o mesmo entre os três visualizadores suportados.

Para usar o Quickviews para criar pop-ups personalizados

  1. Criar uma exibição rápida para um ativo carregado.

    Geralmente, você cria uma exibição rápida ao mesmo tempo que edita um ativo para uso com o visualizador que está usando.

    Visualizador que você está usando Conclua estas etapas para criar o Quickview
    Imagens interativas Adicionar pontos de acesso a um banner de imagem.
    Vídeos interativos Adicionando interatividade ao vídeo.
    Banners em carrossel Adicionar pontos de conexão ou mapas de imagem a um banner.

  2. Obtenha o código incorporado do visualizador para integrar o visualizador dentro do seu site.

    Visualizador que você está usando
    		 Complete estas etapas para integrar o visualizador ao seu site
    Imagem interativa Integração de uma imagem interativa com seu site.
    Vídeo interativo
    		 Integração de um vídeo interativo com seu site.
    Banner do carrossel Adicionar um banner de carrossel à página do site.

  3. O visualizador que você está usando agora precisa saber como usar o Quickview.

    Para fazer isso, o visualizador usa um manipulador chamado QuickViewActive.

    ​
    ExemploSuponha que você esteja usando a seguinte amostra de código incorporado em 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, temos o seguinte código:

    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() no seguinte:

  4. Agora é necessário configurar o manipulador quickViewActivate.

    O manipulador quickViewActivate controla as exibições rápidas no visualizador. O manipulador contém a lista variável e as chamadas de função para uso com o Quickview. O código incorporado fornece mapeamento para a variável SKU definida no Quickview, bem como uma chamada de função loadQuickView de amostra.

    Variável
    mappingMap variáveis para uso em sua página da Web para o valor SKU e variáveis genéricas contidas no Quickview:

    var *variable1*= inData.*quickviewVariable*

    O código incorporado fornecido tem um mapeamento de amostra para a variável SKU:

    var sku=inData.sku

    Mapeie variáveis adicionais do Quickview também, como a seguir:

    var <i>variable2</i>= inData.<i>quickviewVariable2</i>
 var <i>variable3</i>= inData.<i>quickviewVariable3</i>

    Função
    callO manipulador também requer uma chamada de função para que o Quickview funcione. Pressupõe-se que a função seja acessível pela página de host. O código incorporado fornece uma chamada de função de exemplo:

    loadQuickView(sku)

    A chamada de função de exemplo considera que a função loadQuickView() existe e está acessível.

    Saiba mais sobre o método quickViewActivate no seguinte:

  5. Faça o seguinte:

    • Exclua as barras de comentário da seção setHandlers do código incorporado.

    • Mapeie quaisquer variáveis adicionais contidas no Quickview.

      • Atualize a chamada loadQuickView(sku,*var1*,*var2*) se você estiver adicionando variáveis adicionais.

    • Crie uma função loadQuickView () simples na página, fora do visualizador.

      Por exemplo, o seguinte grava o valor de sku no console do navegador:

    function loadQuickView(sku){
    console.log ("quickview sku value is " + sku);
}

    • Carregue uma página HTML de teste em um servidor Web e abra.

      Com as variáveis do Quickview mapeadas e a chamada de função instalada, o console do navegador grava o valor da variável no console do navegador usando a função de amostra fornecida.

  6. Agora você pode usar uma função para invocar um pop-up simples no Quickview. O exemplo a seguir usa um DIV para um pop-up.

  7. Estilo do pop-up DIV da seguinte maneira. Adicione seu próprio estilo adicional, conforme desejado.

    <style type="text/css">
    #quickview_div{
        position: absolute;
        z-index: 99999999;
        display: none;
    }
</style>

  8. Coloque o pop-up DIV no corpo da sua página HTML.

    Um dos elementos é definido com uma ID que é atualizada com valor de sku quando o usuário chama uma exibição rápida. O exemplo também inclui um botão simples para ocultar o pop-up novamente depois que ele se torna visível.

    <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 de sku no pop-up; torne o pop-up visível, substituindo a função simples criada na etapa 5. com o seguinte:

    <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 HTML de teste no seu servidor Web e abra. O visualizador exibe o pop-up DIV quando um usuário chama uma exibição rápida.

  11. Como exibir o pop-up personalizado no modo de tela cheia

    Alguns visualizadores, como o Visualizador de vídeo interativo, suportam a exibição no modo de tela cheia. No entanto, usar o pop-up conforme descrito nas etapas anteriores faz com que ele seja exibido atrás do visualizador no modo de tela cheia.

    Para ter a exibição pop-up nos modos padrão e de tela cheia, anexe a pop-up ao container do visualizador. Para fazer isso, você pode usar um segundo método handler, initComplete.

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

    "initComplete":function() { code block }

    Saiba mais sobre o método init() no seguinte:

  12. Para anexar o pop-up descrito nas etapas anteriores ao visualizador, use o seguinte código:

    "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, fizemos o seguinte:

    • Identificado nosso pop-up personalizado.
    • Removido do DOM.
    • Identificado o container do visualizador.
    • O pop-up foi anexado ao container do visualizador.

  13. O código de setHandlers inteiro agora deve ser semelhante ao seguinte (o visualizador de vídeo interativo foi usado):

    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. Depois que os manipuladores forem carregados, você inicializará o visualizador:

    *viewerInstance.*init()

    ​
    ExemploEste exemplo usa o visualizador de imagem interativo.

    s7interactiveimageviewer.init()

    Depois de incorporar o visualizador à sua página de host, verifique se a instância do visualizador foi criada e se os manipuladores foram carregados antes que o visualizador seja chamado usando init().

Nesta página

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free