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

Crie uma Exibição rápida para um ativo carregado.

Geralmente, você cria um Quickview ao mesmo tempo em que edita um ativo para uso com o visualizador que está usando.

Obtenha o código incorporado do visualizador para Integrar o visualizador em seu site.

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ê estava usando o seguinte código incorporado de exemplo na 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 amostra 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 setHandlers() método no seguinte:

• Visualizador de Imagem Interativa: setHandlers
• Visualizador de vídeo interativo: setHandlers

Agora é necessário configurar o quickViewActivate manipulador.

O manipulador quickViewActivate controla as visualizaçõ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 função loadQuickView de amostra.

Mapeamento de variável
Mapeie 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 em:

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. A função é considerada 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 assume a função loadQuickView() existe e está acessível.

Saiba mais sobre o método quickViewActivate no link a seguir:

• Visualizador de Imagem Interativa - Retornos de chamada do evento
• Visualizador de vídeo interativo - Retornos de chamada do evento
• Suporte a dados interativos no visualizador de Vídeo interativo - Suporte a dados interativos

Faça o seguinte:

• Exclua a seção setHandlers do código incorporado.

• Mapeie quaisquer variáveis adicionais contidas no Quickview.

  • Atualize o loadQuickView(sku,*var1*,*var2*) chame se 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);
}

• Faça o upload de uma HTML de teste para um servidor da 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.

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.

Estilo da 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>

Inserir o pop-up DIV no corpo da página do HTML.

Um dos elementos é definido com uma ID que é atualizada com valor de sku quando o usuário chama uma Quickview. O exemplo também inclui um botão simples para ocultar a pop-up novamente depois que ela 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>

Adicione uma função para atualizar o valor do sku no pop-up; torne a 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>

Carregue uma página de HTML de teste no seu servidor da Web e abra. O visualizador exibe o pop-up DIV quando um usuário chamar uma exibição rápida.

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 a pop-up conforme descrito nas etapas anteriores faz com que seja exibido atrás do visualizador no modo de tela cheia.

Para exibir o pop-up nos modos de tela cheia e padrão, anexe o pop-up ao contêiner do visualizador. Para fazer isso, você pode usar um segundo método de manipulador, initComplete.

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

"initComplete":function() { code block }

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

• Visualizador de Imagem Interativa - 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, fizemos o seguinte:

• Identificada a pop-up personalizada.
• Removido-o do DOM.
• Identificado o contêiner do visualizador.
• Anexado o pop-up ao contêiner do visualizador.

Todo o código setHandlers 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);
    }
});

Após carregar os manipuladores, inicialize o visualizador:

*viewerInstance.*init()

Exemplo
Este exemplo usa o visualizador de imagens interativas.

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