Descuento 20% Diciembre
Plugin Optimización de Imágenes Gratuito para WordPress
Martes, 25 Octubre 2011 23:42

Modificando pantalla de aviso de pedido en VirtueMart

Escrito por 
CMS:  Joomla! |  Versión:  1.5.x |  Nivel de dificultad:  Básico |  Tiempo estimado de lectura:  10 minutos


ico_pantallapedidoEn el siguiente artículo veremos cómo realizar modificaciones a la pantalla de aviso de pedido, esta pantalla usualmente aparece por defecto debido a la configuración de virtuemart, aparece al agregar al carrito de compras algún producto disponible en nuestros sitio web de tienda y desaparece luego de unos segundos.

Revisaremos cómo cambiar el comportamiento, evitando que esta pantalla aparezca, también veremos en el caso de queramos que aparezca aumentar el tiempo que se muestra, y finalmente veremos como realizar modificaciones de estilo a esta pantalla, estas últimas modificaciones se realizarán en el tema actual de virtuemart que estamos usando.

 

1- Cambiando el comportamiento de la pantalla de aviso

Podemos inhabilitar la pantalla de aviso al agregar un producto a la cesta de compra desde la configuración de virtuemart, en el tab sitio y luego en la configuración de la plantilla, tal como se muestra en la siguiente imagen

img2

Al ingresar a la pantalla de configuración de la plantilla veremos la opción de Uso de Ajax, debemos deshabilitar esta opción

img3

 

2- Cambiando la duración de la pantalla de aviso

En caso mantengamos el comportamiento de la pantalla de aviso pero nos gustaría que permanezca visible más tiempo, podemos realizar esta modificación en el siguiente archio: /components/com_virtuemart/themes/(tema usuado)/theme.js , en la línea 50 encontraremos un código como el siguiente, en el cual el número 3000 indica la cantidad de milisegundos que permanecerá visible la pantalla.

setTimeout( 'document.boxB.close()', 3000 );

 

3- Cambiando la apariencia de la pantalla de aviso

Podemos también cambiar la apariencia de la pantalla de aviso modificando el siguiente archivo: /components/com_virtuemart/themes/(tema usuado)/theme.css , para este ejemplo modificaremos la cabecera, el fondo y un margen inferior, agregamos el siguiente código :

.cbHeader {
background-image:none !important;
margin-bottom:10px;
}

4- Resultado Final

Después de realizar las modificaciones de estilos de acuerdo a nuestro ejemplo veremos la pantalla de aviso como se muestra en la siguiente imagen

img1

 

En el siguiente video se explica de manera práctica cada uno de los puntos explicados anteriormente.

 


¿Te ha resultado interesante este artículo?

Suscríbete para recibir consejos exclusivos para WordPress, Joomla y PrestaShop




Plugin Optimización de Imágenes Gratuito para WordPress