Uso de vistas rápidas para crear ventanas emergentes personalizadas

La vista rápida predeterminada se utiliza en las experiencias de comercio electrónico, en las que se muestra una ventana emergente con información del producto para dirigir una compra. Sin embargo, puede almacenar en déclencheur contenido personalizado para que se muestre en las ventanas emergentes. Según el visor que utilice, los clientes pueden tocar una zona interactiva, una imagen en miniatura o un mapa de imagen 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 del vídeo)
  • Banners 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 visualizadores 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 visualizador que se está utilizando.

    Visor que utiliza Para crear la vista rápida, complete estos pasos
    Imágenes interactivas Adición de zonas interactivas a un titular de imagen.
    Vídeos interactivos Añadir interactividad al vídeo.
    Banner de carrusel Adición de zonas interactivas o mapas de imagen a un banner.
  2. Obtenga el código incrustado del visor para integrar el visor en el sitio web.

    Visor que utiliza
    Para integrar el visor con el sitio web, complete estos pasos
    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.
    Banner de carrusel Adición de un banner de carrusel a la página de su sitio web.
  3. El visualizador que utilice debe saber cómo utilizar la vista rápida.

    El visor utiliza un controlador denominado QuickViewActive.


    Supongamos que utilizaba el siguiente código incrustado de ejemplo 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*}, ...

    Con el ejemplo de código incrustado de ejemplo de arriba, tiene 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 el método setHandlers() en lo siguiente:

  4. A continuación, configure el controlador quickViewActivate.

    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 la vista rápida. También realiza una llamada de función loadQuickView de ejemplo.

    Variables
    mappingMap para usar en la página web con el valor SKU y las variables genéricas contenidas 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 otras variables 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>
    

    Función
    callEl controlador también requiere una llamada a la función para que funcione la vista rápida. 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 supone que la función loadQuickView() existe y es accesible.

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

  5. Haga lo siguiente:

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

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

      • Actualice la llamada loadQuickView(sku,*var1*,*var2*) si agrega más variables.
    • Cree una función loadQuickView () simple en la página, fuera del visor.

      Por ejemplo, a continuación se 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.

      Las variables de la vista rápida están asignadas. La llamada a la función está en su lugar. Y la consola del explorador escribe el valor de la variable en la consola del explorador. Lo hace utilizando la función de ejemplo proporcionada.

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

  7. Establezca el estilo de la ventana emergente DIV de la siguiente manera. Agregue 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 configura con un ID que se actualiza con el 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>
    
  9. Para actualizar el valor SKU en la ventana emergente, agregue una función . Haga visible la ventana emergente reemplazando la función simple creada en el paso 5 por la 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 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 ventana emergente se muestre en los modos estándar y de pantalla completa, conecte la ventana emergente al contenedor del visor. En este caso, utilice un segundo método de controlador, initComplete.

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

    "initComplete":function() { code block }
    

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

    • Visor de imágenes interactivo: init
    • Visor de vídeo interactivo: init
  12. 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, ha hecho lo siguiente:

    • Se ha identificado 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. Todo el código de setHandlers es similar al siguiente (se utilizó 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);
        }
    });
    
  14. Una vez cargados los controladores, se inicializa el visor:

    *viewerInstance.*init()


    EjemploEste 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 se crea la instancia del visor. Además, asegúrese de que los controladores se cargan antes de que se invoque el visor con init().

En esta página

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now