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.

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

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:

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

• Visualizador de imagens interativo - sethandlers
• Visualizador de Vídeo Interativo - sethandlers

Agora 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 incorporado fornece o mapeamento para a variável SKU definida na visualização rápida. Também faz uma chamada de função de exemplo 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 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 exemplo presume que a função loadQuickView() existe e está acessível.

Saiba mais sobre o método quickViewActivate em:

• Visualizador de imagens interativo - Retornos de chamada de evento
• Visualizador de Vídeo Interativo - Retornos de chamada de evento
• Suporte a dados interativos no visualizador de Vídeo Interativo - Suporte a dados interativos

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 você adicionar mais variáveis.

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

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

• Carregue uma página de teste do HTML 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.

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.

Estilize o pop-up DIV da seguinte maneira. Adicione um estilo extra, conforme desejado.

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

Coloque 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>

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 pop-up
    }
</script>

Carregue uma página de teste do HTML no servidor da Web e abra. O visualizador exibe o pop-up DIV quando um usuário invoca uma Quickview.

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.

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

"initComplete":function() { code block }

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

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

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.

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

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().