Criar pop-ups personalizados usando o Quickview

O Quickview padrão é usado em experiências de comércio eletrônico, nas 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 usado, os clientes podem selecionar 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:

  • Imagens interativas (pontos de acesso selecionáveis)
  • Vídeo interativo (imagens em miniatura selecionáveis durante a reprodução do vídeo)
  • Banners em carrossel (pontos de acesso selecioná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.

    Visualizador que você está usando Para criar a visualização rápida, conclua estas etapas
    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.

  2. Obtenha o código de inserção do visualizador para Integrar o visualizador no seu site.

    Visualizador que você está usando
    		 Para integrar o visualizador ao seu site, conclua estas etapas
    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.

  3. O visualizador usado precisa saber como usar o Quickview.

    O visualizador usa um manipulador chamado QuickViewActive.

    Exemplo
    Suponha que você estava usando o seguinte exemplo de código incorporado na 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, você tem 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 setHandlers() no seguinte endereço:

  4. Agora, 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. Também cria uma amostra loadQuickView 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 outras variáveis da exibição rápida também, como no exemplo 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. 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:

  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 o loadQuickView(sku,*var1*,*var2*) chame se você adicionar mais variáveis.

    • 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:

    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.

      As variáveis do Quickview são mapeadas. A chamada de função está em vigor. E o console do navegador grava o valor da variável no console do navegador. Ele faz isso usando a função de amostra 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. Estilo do pop-up DIV da seguinte forma. Adicione um estilo extra, conforme desejado.

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

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

    <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. Para atualizar o valor do SKU na janela pop-up, adicione uma função. Torne a janela pop-up visível substituindo a função simples criada na etapa 5 pela 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 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 a janela pop-up personalizada 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 a janela pop-up seja exibida nos modos padrão e de tela cheia, anexe a janela pop-up ao contêiner do visualizador. Nesse caso, use um segundo método de manipulador, initComplete.

    A variável initComplete é chamado depois que o visualizador é inicializado.

    "initComplete":function() { code block }

    Saiba mais sobre init() no seguinte endereço:

    • Visualizador de imagem interativo - init
    • Visualizador de vídeo interativo - init

  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, você fez o seguinte:

    • 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 é 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. Após carregar os manipuladores, você inicializa o visualizador:

    *viewerInstance.*init()

    Exemplo
    Este exemplo usa o Visualizador de imagem interativo.

    s7interactiveimageviewer.init()

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

Nesta página