Crear ventanas emergentes personalizadas con vistas rápidas using-quickviews-to-create-custom-pop-ups

Cree una vista rápida para un recurso cargado.

Normalmente, se crea una vista rápida al mismo tiempo que se edita un recurso para utilizarlo con el visualizador que se está utilizando.

Obtenga el código incrustado del visor para integrar el visor en el sitio web.

El visor que utiliza ahora necesita saber cómo utilizar la vista rápida.

Para ello, el visor utiliza un controlador denominado QuickViewActive.

Ejemplo
Supongamos que estaba utilizando el siguiente código incrustado de ejemplo en la página web para una imagen interactiva:

El controlador se carga en el visor mediante setHandlers:

*viewerInstance*.setHandlers({ *handler 1*, *handler 2*}, ...

Utilizando el ejemplo de código incrustado de ejemplo de arriba, tenemos el siguiente código:

s7interactiveimageviewer.setHandlers({
    quickViewActivate": function(inData) {
        var sku=inData.sku;
        var genericVariable1=inData.genericVariable1;
        var genericVariable2=inData.genericVariable2;
       loadQuickView(sku,genericVariable1,genericVariable2);
    }
})

Más información sobre setHandlers() en el siguiente método:

• Visor de imágenes interactivo: setHandlers
• Visor de vídeo interactivo: setHandlers

Ahora necesita configurar la variable quickViewActivate controlador.

El controlador quickViewActivate controla las vistas rápidas en el visor. El controlador contiene la lista de variables y las llamadas de función que se utilizan con la vista rápida. El código incrustado proporciona una asignación para la variable de SKU establecida en Quickview, así como una llamada de función loadQuickView de ejemplo.

Asignación de variables
Asigne variables para su uso en la página web al valor de SKU y a las variables genéricas incluidas en la vista rápida:

var *variable1*= inData.*quickviewVariable*

El código incrustado proporcionado tiene una asignación de muestra para la variable SKU:

var sku=inData.sku

Asigne también variables adicionales desde la vista rápida, como se muestra a continuación:

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

Llamada de función
El controlador también requiere una llamada a la función para que funcione Quickview. Se supone que la página host puede acceder a la función. El código incrustado proporciona una llamada de función de ejemplo:

loadQuickView(sku)

La llamada a la función de ejemplo asume la función loadQuickView() existe y es accesible.

Obtenga más información sobre el método quickViewActivate en lo siguiente:

• Visor de imágenes interactivo: Llamadas de retorno de eventos
• Visor de vídeo interactivo: Llamadas de retorno de eventos
• Compatibilidad con datos interactivos en el visualizador de vídeo interactivo: Compatibilidad con datos interactivos

Haga lo siguiente:

• Descomente la sección setHandlers del código incrustado.

• Asigne cualquier variable adicional contenida en la vista rápida.

  • Actualice el loadQuickView(sku,*var1*,*var2*) llamada de si va a añadir variables adicionales.

• Cree una función loadQuickView () sencilla en la página, fuera del visor.

  Por ejemplo, lo siguiente escribe el valor de sku en la consola del explorador:

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

• Cargue una página de HTML de prueba en un servidor web y ábrala.

  Con las variables de la vista rápida asignadas y la llamada a la función establecida, la consola del explorador escribe el valor de la variable en la consola del explorador mediante la función de ejemplo proporcionada.

Ahora puede utilizar una función para invocar una ventana emergente simple en la vista rápida. El ejemplo siguiente utiliza un DIV para ver una ventana emergente.

Estilo de la ventana emergente DIV de la siguiente manera. Añada su propio estilo adicional como desee.

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

Colocar la ventana emergente DIV en el cuerpo de la página HTML.

Uno de los elementos se configura con un ID que se actualiza con un valor sku cuando el usuario invoca una vista rápida. El ejemplo también incluye un botón simple para volver a ocultar la ventana emergente una vez que esté visible.

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

Agregue una función para actualizar el valor sku en la ventana emergente; haga visible la ventana emergente reemplazando la función simple creada en el paso 5. con lo siguiente:

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

Cargue una página de HTML de prueba en el servidor web y ábrala. El visor muestra la ventana emergente DIV cuando un usuario invoca una vista rápida.

Cómo mostrar la ventana emergente personalizada en modo de pantalla completa

Algunos visores, como el de vídeo interactivo, admiten la visualización en modo de pantalla completa. Sin embargo, el uso de la ventana emergente como se describe en los pasos anteriores hace que se muestre detrás del visor mientras está en modo de pantalla completa.

Para que la pantalla emergente se muestre tanto en el modo estándar como en el de pantalla completa, se adjunta la ventana emergente al contenedor del visor. Para lograr esto, puede utilizar un segundo método de controlador, initComplete.

La variable initComplete se invoca el controlador después de inicializar el visor.

"initComplete":function() { code block }

Más información sobre init() en el siguiente método:

• Visor de imágenes interactivo: init
• Visor de vídeo interactivo: init

Para adjuntar el elemento emergente (descrito en los pasos anteriores) al visor, utilice el siguiente 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);
}

En el código anterior, hemos hecho lo siguiente:

• Identificó nuestra ventana emergente personalizada.
• Se ha eliminado del DOM.
• Se ha identificado el contenedor del visor.
• Se adjuntó la ventana emergente al contenedor del visor.

Todo el código de setHandlers debe tener un aspecto similar al siguiente (se ha utilizado el visualizador de vídeo interactivo):

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

Una vez cargados los controladores, se inicializa el visor:

*viewerInstance.*init()

Ejemplo
Este ejemplo utiliza el visualizador de imágenes interactivo.

s7interactiveimageviewer.init()

Después de incrustar el visor en la página host, asegúrese de que la instancia del visor se crea y los controladores se cargan antes de que se invoque el visor con init().