Uso de las vistas rápidas para crear ventanas emergentes personalizadas

La vista rápida predeterminada se utiliza en las experiencias de comercio electrónico, por lo que se muestra una ventana emergente con información del producto para dirigir una compra. Sin embargo, puede activar el contenido personalizado para que se muestre en las ventanas emergentes. Según el visor que utilice, esta funcionalidad permite a los usuarios hacer clic en un punto interactivo, una imagen en miniatura o en un mapa de imágenes para ver información o contenido relacionado.

Los siguientes visores de Dynamic Media admiten las vistas rápidas:

  • Imágenes interactivas (zonas interactivas en las que se puede hacer clic)
  • Vídeo interactivo (imágenes en miniatura en las que se puede hacer clic durante la reproducción de vídeo)
  • Pancartas de carrusel (zonas interactivas o mapas de imágenes en las que se puede hacer clic)

Aunque la funcionalidad de cada visor es diferente, el proceso de creación de una vista rápida es el mismo en los tres visores admitidos.

Para utilizar las vistas rápidas para crear ventanas emergentes personalizadas,

  1. 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 visor que se utiliza.

    Visor que está utilizando Complete estos pasos para crear la vista rápida
    Imágenes interactivas Añadir zonas interactivas en una pancartade imagen.
    Vídeos interactivos Añadir la interactividad en el vídeo.
    Banner de carrusel Añadir puntos interactivos o mapas de imagen en un letrero.
  2. Obtenga el código incrustado del visor para integrar el visor en el sitio web.

    Visor que está utilizando
    Complete estos pasos para integrar el visor con el sitio web
    Imagen interactiva Integración de una imagen interactiva con el sitio web.
    Vídeo interactivo
    Integración de un vídeo interactivo con el sitio web.
    Pancarta de carrusel Añadir una pancarta de carrusel a la páginadel sitio web.
  3. El visor que está utilizando 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 muestra en la página web para una imagen interactiva:

    chlimage_1-291

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

    Obtenga más información sobre setHandlers() los métodos siguientes:

  4. Ahora debe configurar el quickViewActivate controlador.

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

    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 variables adicionales desde la vista rápida también, como se muestra a continuación:

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

    Llamada a función El controlador también requiere una llamada a la función para que funcione la vista rápida. Se da por hecho que la página host tiene acceso a la función. El código incrustado proporciona una llamada de función de muestra:

    loadQuickView(sku)

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

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

    • Visor de imágenes interactivo: rellamadas de Evento
    • Visor de vídeo interactivo: rellamadas de Evento
    • Compatibilidad con datos interactivos en el visor de vídeo interactivo: compatibilidad con datos interactivos
  5. Haga lo siguiente:

    • Quite los comentarios de la sección setHandlers del código incrustado.

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

      • Actualice la loadQuickView(sku,*var1*,*var2*) llamada si va a agregar variables adicionales.
    • Cree una función loadQuickView () simple 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 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.

  6. Ahora puede utilizar una función para abrir una ventana emergente sencilla en la vista rápida. El siguiente ejemplo utiliza un DIV para una ventana emergente.

  7. Ajuste el 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>
    
  8. Coloque la ventana emergente DIV en el cuerpo de la página HTML.

    Uno de los elementos se establece con un ID que se actualiza con un valor de sku cuando el usuario invoca una vista rápida. El ejemplo también incluye un botón sencillo para volver a ocultar la ventana emergente después de 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>
    
  9. Añada una función para actualizar el valor de 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>
    
  10. Cargue una página HTML de prueba en el servidor web y ábrala. El visor muestra la ventana emergente DIV cuando un usuario invoca una vista rápida.

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

    Algunos visores, como el visor 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 se encuentra en modo de pantalla completa.

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

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

    "initComplete":function() { code block }
    

    Obtenga más información sobre init() los métodos siguientes:

    • Visor de imágenes interactivo: inicio
    • Visor de vídeo interactivo: inicio
  12. Para adjuntar la ventana emergente (descrita en los pasos anteriores) al visor, utilice el código siguiente:

    "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ó la ventana emergente personalizada.
    • Se ha eliminado del DOM.
    • Se ha identificado el contenedor del visor.
    • Se adjuntó la ventana emergente al contenedor del visor.
  13. El código setHandlers completo debe tener ahora un aspecto similar al siguiente (se ha utilizado el visor 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);
        }
    });
    
  14. Una vez cargados los controladores, se inicializa el visor:

    *viewerInstance.*init()

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

    s7interactiveimageviewer.init()

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

En esta página