Blogger Store: Slider en IE, gastos en carro, productos desaparecidos y otros flecos

Slider vacío en Internet Explorer

En Internet Explorer -al menos en la versión 8- el slider que muestra los productos en formato de carrousel aparece vacío de contenido. El problema está en el propio script y en la interpretación de código que hace este bonito y simpático navegador, que le asigna un alto de valor cero al contenedor de imágenes. Por eso no se ven.

Para no andar trasteando el código, la solución más rápida y fácil que he encontrado ha sido forzar un alto desde la parte CSS. De esta manera, añadiendo lo siguiente antes del cierre del SKIN, el problema parece que se soluciona:

.caroufredsel_wrapper {height:144px !important;}

Mostrar importe gastos de envío en el carro

Por defecto no vienen los gastos de envío en ninguna plantilla, pero aprovechando que nosotros hemos explicado cómo incorporarlos, vamos a ver también cómo hacer que se vean en el carro junto al importe total de la compra. Esto servirá para que el cliente los vea antes de hacer el pedido en firme y que no se lleve una desagradable sorpresa al final por no haber contado con ellos.

Para ello sólo hay que utilizar una caja vacía con una clase determinada que el script ya rellena con la cifra. La clase es simpleCart_shippingCost y hay que insertarla de la manera que se ve a continuación usando como referencia las líneas en gris:

<div class='menu-cart'>
<a class='mycart' href='#'>En el carro : <span class='simpleCart_quantity'/> item(s)</a>
Precio total : <span class='simpleCart_total'/>
+ Gastos: <span class='simpleCart_shippingCost'/>
<div class='bag'>
<div class='simpleCart_items'/>

Mejorar formato presentación del carro

Cuando los títulos de las entradas (nombres de productos) son de distinta longitud en cuanto caracteres, en el carro se descuadra el conjunto artículo - miniatura - cantidad - coste.

Los más cortos generan un hueco en la parte inferior que hemos marcado en azul en la siguiente captura:

De nuevo se puede resolver esto con CSS. Simplemente limitamos en altura la clase que controla estos títulos (.bag .itemname) y añadimos un overflow:hidden; para que en ningún caso se desborde de su caja. En gris una posible referencia para su inserción:

.bag .itemname {
height: 54px;
overflow:hidden;
}
.bag .itemname a {
font:bold 10px Helvetica,Arial,sans-serif;
color:#000;
letter-spacing:-1px;
text-transform:uppercase;
}

Productos que desaparecen cuando se va llenando el carro

Si las pruebas sobre esta plantilla las habéis hecho con pocos productos, posiblemente no os hayáis dado cuenta de esto, pero cuando vas navegando y añadiendo productos, llega un momento en el que de forma aparentemente aleatoria, algunos desaparecen del carro. Es apreciable cuando se cambia de pantalla (de inicio a un producto, de un producto a otro, etc.) Y no es que se caigan, no.

Como decía, no he logrado detectar en qué circunstancias exactas ocurre esto pero intuitivamente imaginé que tendría que ver con las cookies que van guardando lo que se va seleccionando. Paradójicamente no se trata de que el tamaño de la cookie sea demasiado pequeño, sino al contrario. Quede claro que no sé la causa pero con este cambio parece que se soluciona el problema.

Tenemos que editar la versión del script SimpleCart que estemos utilizando y en la línea siguiente, cambiar el tamaño máximo de cookie que viene con el valor 4000, por una cifra inferior. Con 2000 mis pruebas fueron positivas.

me.cookieDuration = 30; // default duration in days
me.storagePrefix = "sc_";
me.MAX_COOKIE_SIZE = 2000;
me.cartHeaders = ['Name','Price','Quantity','Total'];
me.events = {};

Aquí la plantilla Blogger Store y aquí el script SimpleCart actualizados con estas nuevas modificaciones.

¿Encontráis más problemas? Aprovechad que parece que ya voy lanzado... ;)

Nos hemos puesto a fondo con esta plantilla y hemos publicado también los siguientes artículos:

• Plantilla para tienda online: Blogger Store
• Blogger Store: Instalación, ajustes y crear productos
• Blogger Store: Personalización y solución de problemas
• Blogger Store: Buscador, paginación, opción email y otros
• Blogger Store: Configurar gastos de envío e inclusión en pedidos email
• Blogger Store: Slider en IE, gastos en carro, productos desaparecidos y otros flecos
• Blogger Store: Opción página para comprobación y solicitud de pedido con formulario
• Blogger Store: Demo incorporando todas las modificaciones propuestas

Noviembre 2015
Los comentarios de todas estas entradas han sido cerrados por su excesiva extensión y porque en los existentes se ha contestado ya a las dudas más comunes que han ido surgiendo durante más de tres años.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter