La vista rápida predeterminada se utiliza en las experiencias de comercio electrónico, donde se muestra una ventana emergente con información del producto para impulsar una compra. Sin embargo, puede almacenar en déclencheur el contenido personalizado para que se muestre en los elementos emergentes. En función del visor, esta funcionalidad permite a los usuarios seleccionar un punto interactivo, una imagen en miniatura o un mapa de imagen para ver información o contenido relacionado.
Quickview es compatible con los siguientes visores en Dynamic Media:
Aunque la funcionalidad de cada visualizador es diferente, el proceso de creación de una vista rápida es el mismo en los tres visualizadores admitidos.
Para crear ventanas emergentes personalizadas con la vista rápida:
Crear una vista rápida para un recurso cargado.
Normalmente, crea una vista rápida el mismo tiempo que edita un recurso para utilizarlo con el visor que está utilizando.
Visor que está utilizando | Complete estos pasos si desea crear la vista rápida |
Imágenes interactivas | Adición de puntos interactivos a un titular de imagen. |
Vídeos interactivos | Añadir interactividad al vídeo. |
Banner de carrusel | Adición de puntos interactivos o mapas de imagen a un titular. |
Obtenga el código incrustado del visualizador para integrar el visualizador en el sitio web.
Visor que está utilizando |
Complete estos pasos si desea integrar el visor con su 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. |
Titular de carrusel | Adición de un titular de carrusel a la página del sitio web. |
El visor que utilice ahora debe saber cómo utilizar la vista rápida.
El visor utiliza un controlador llamado QuickViewActive
.
Ejemplo
Supongamos que utiliza el siguiente código incrustado de muestra en la página web para una imagen interactiva:
El controlador se carga en el visor mediante setHandlers
:
*viewerInstance*.setHandlers({ *handler 1*, *handler 2*}, ...
En el ejemplo de código incrustado de muestra anterior, se muestra 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()
método en lo siguiente:
Ahora debe configurar la variable quickViewActivate
controlador.
El quickViewActivate
controla la vista rápida en el visor. El controlador contiene la lista de variables y las llamadas a funciones para su uso con la vista rápida. El código incrustado proporciona una asignación para la variable SKU establecida en la vista rápida y un ejemplo loadQuickView
llamada de función.
Asignación de variables
Asigne variables para su uso en la página web al valor SKU y a 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 variables adicionales desde la vista rápida a, como en los siguientes casos:
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 la vista rápida. La página host supone que puede acceder a la función. El código incrustado proporciona una llamada a una función de ejemplo:
loadQuickView(sku)
La llamada a la función de ejemplo asume la función loadQuickView()
existe y es accesible.
Más información sobre quickViewActivate
método en lo siguiente:
Haga lo siguiente:
Elimine los comentarios de la sección setHandlers del código incrustado.
Asigne cualquier variable adicional contenida en la vista rápida.
loadQuickView(sku,*var1*,*var2*)
llame a si agrega variables adicionales.Cree un loadQuickView
() 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 pruebas en un servidor web y ábrala.
Con las variables de la vista rápida asignadas y la llamada a la función configurada, 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 siguiente ejemplo utiliza un DIV
para ver una ventana emergente.
Aplicar estilo a la ventana emergente DIV
de la siguiente manera. Añada su propio estilo adicional si lo desea.
<style type="text/css">
#quickview_div{
position: absolute;
z-index: 99999999;
display: none;
}
</style>
Coloque la ventana emergente DIV
en el cuerpo de la página de 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 ocultar de nuevo 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 poder actualizar el valor SKU en la ventana emergente; haga que la ventana emergente sea visible 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 del HTML de pruebas en el servidor web y abra. El visor mostrará 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 visualizador 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 de pantalla estándar y pantalla completa, adjunte la ventana emergente al contenedor del visor. Utilice un segundo método de controlador, initComplete
.
El initComplete
se invoca al controlador después de inicializar el visor.
"initComplete":function() { code block }
Más información sobre init()
método en lo siguiente:
Para adjuntar al visor la ventana emergente descrita en los pasos anteriores, 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, se realizó lo siguiente:
Todo el código de setHandlers aparece de forma similar a la 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 mediante init()
.