Show Menu
TÓPICOS×

Usar o 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 Adicionar interatividade ao vídeo .
    Banners de 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 .
    Exemplo Suponha que você esteja usando a seguinte amostra de código incorporado em 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, 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 setHandlers() método no seguinte:
  4. Agora é necessário configurar o quickViewActivate manipulador.
    O quickViewActivate manipulador controla as exibições rápidas no visualizador. O manipulador contém a lista de variáveis 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 loadQuickView função de amostra.
    Variável mapeando variáveis do mapa para uso na 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>
    
    
    Chamada de função O 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 quickViewActivate método no seguinte:
  5. Faça o seguinte:
    • Exclua o comentário da seção setHandlers do código incorporado.
    • Mapeie quaisquer variáveis adicionais contidas no Quickview.
      • Atualize a loadQuickView(sku,*var1*,*var2*) chamada se você estiver adicionando variáveis adicionais.
    • Crie uma função simples loadQuickView () 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 contêiner do visualizador. Para fazer isso, você pode usar um segundo método handler, initComplete .
    O initComplete hander é chamado depois que o visualizador é inicializado.
    "initComplete":function() { code block }
    
    
    Saiba mais sobre o init() método 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 contêiner do visualizador.
    • O pop-up foi anexado ao contêiner 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()
    Exemplo Este exemplo usa o visualizador de imagem Interativo.
    s7interactiveimageviewer.init()
    Depois de incorporar o visualizador à 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() .