Console.log en Magento

El viernes pasado empecé una maquetación de la ficha de producto de una tienda online que estamos creando en Magento. Es una ficha un tanto complicada, ya que tiene multitud de efectos con javascript: cloud zoom, tooltips, sliders, etc…

Como ya conozco jQuery nunca me he querido meter a aprender Prototype que es el framework javascript que utiliza Magento.

El caso es que para comprobar si selecciono bien los objetos y hacer un poco de debug en el navegador hace tiempo que uso Google Chrome usando la consola. Así que voy insertando llamadas a console.log para sacar información del estado de los scripts.

Cuando ya llevaba un rato programando me encontré con un error, del que ya hablaré otro día. Para hacer debug e intentar solucionarlo, empecé a poner llamadas a console.log en todo el código. Cuál fue mi sorpresa cuando vi que no se mostraba nada en la consola de Chrome.

Después de un largo rato y cuando ya estaba pensando en volver a los antiguos alerts se me ocurrió que el problema podría estar en Magento, y… piensa mal y acertarás.

Encontré una forma de solucionarlo gracias a astorm en gitHubhttps://gist.github.com/992233

Lo que hay que hacer es poner el siguiente código en un archivo .xml de layout, en local.xml por ejemplo:

Con esto y habiendo refrescado la caché ya podemos usar console.log sin ningún tipo de problema. Hasta podemos usarlo en las funciones Prototype sin tener que ensuciarnos mucho las manos.

Algún día hablaré sobre las ventajas de utilizar jQuery en lugar de Prototype, pero eso ya es otra historia.

Actualización: Una vez utilizados los console.log para propósitos de debug es recomendable quitarlos ya que nuestro querido internet explorer explota en su subuniverso cuando se encuentra con una de estas sentencias… kill ie!!

Actualización2: Otra opción es modificar el código que anula los console.logs excepto para Firebug en Firefox. Habría que comentar las siguientes líneas del archivo magento/js/varien/js.js alrededor de la línea 500 en Magento 1.5.2 para luego volverlas a descomentar en servidor de producción:

 

Corrigiendo bug z-index en ie7 con jQuery

Hace poco, terminé de maquetar el boceto de una tienda online que estamos montando en Logocomunica. El boceto requería un mini carrito en el header que se mostrara cuando el usuario pasara por encima el ratón. Todo funciona perfectamente en todos los navegadores, excepto, claro está, en internet explorer 7.

En esta ocasión, este maravilloso software decidió que el carrito debía mostrarse siempre por debajo de las capas con el atributo z-index inferior, saltándose a la torera lo que le indicaba:

Después de unas tres horas creyendo que el problema estaría en mi código CSS y cambiando y volviendo a cambiar positions, z-index y demás atributos, se me ocurrió que el problema podía ser iE7. Y efectivamente iE7 tiene un bug cuando trata los índices de capas asignados mediante z-index. + info iE7 bug z-index

Tras perder tanto tiempo en este problema opté por una solución rápida proporcionada por Vance Lucas en la que recorre todo el dom de arriba a abajo asignando a cada div un z-index, empezando por 1000 y restandole 10 a cada div interno, con lo que los div superiores tendrán un z-index superior a los inferiores.

Solución no ideal, pero efectiva. El carrito ahora queda como en todos los navegadores modernos:

Dios salve a jQuery! Mi consejo, recomienda a todo el mundo que actualice su navegador y que si eso se cambien a un navegador que no me mate por dentro cada día…

nota mental: siempre pensar que el fallo es de iE7 antes de romperme los cuernos

+info: http://www.vancelucas.com/blog/fixing-ie7-z-index-issues-with-jquery/

jScrollPane – scrollbars con jQuery y CSS

Para el próximo proyecto que vamos a hacer en casa vamos a hacer web, evidentemente. Para ello ya estoy diseñando con Photoshop los diferentes elemento que tendrá la web. Buscando por internet inspiración prodigiosa encontré la web de cargo collective, donde tienen un buen porrón de webs chulas.

Una de ellas es Apollo11 que contiene fotos antiguas del proyecto Apollo de la NASA.

En fín, yo a lo que iba es que me gustó mucho el scrollbar que tienen en esa web. Tirando del hilo me encontré con que estaba hecho con un plugin para jQuery, jScrollPane. Ah! Mi querido jQuery, que haría yo sin tí…

Así es que ya tengo esa parte de la web diseñada, ahora habrá que ver si, después de maquetar, me funciona bien en todos los navegadores, pero en principio debería quedar tal que así:

jQuery en Magento

Un ratito he estado dándole vueltas a por qué al intentar añadir un producto al carro desde Magento el enlace no hacía nada. La url del enlace era una llamada a una función javascript con lo que estirando un poco del hilo con la herramienta para desarrolladores de Chrome he detectado que algo pasaba con jQuery.

Por lo visto si usas jQuery con Magento tienes que indicar en el header que no entre en conflicto con otros frameworks. Para esto simplemente hay que poner esto al final del head.phtml:

Hay otras formas pero esa a mí me ha valido.

+info
++info

Supersized

Para la última actualización que hice de la web de MUT Design querían que una imagen ocupara completamente la pantalla. Para esto me puse a buscar por internet algún plugin para jQuery dando con Supersized, un sencillo plugin que permite hacer precisamente esto.

Puse un div después de cada una de las imágenes para que, poniéndole un postion:absolute este quedara por encima de la imagen y pudiera ahí poner texto o lo que hiciera falta.

Una de las cosas que me llevó un poco de cabeza fue como saber si la pantalla con la que se estaba viendo la página era cuadrada o rectangular, ya que entonces la imagen debería de cambiar ya que su ratio también cambiaba. Para ello hice dos copias de las imágenes, unas con ratio 1280×960 y otras con ratio 1280×645. Luego mediante jQuery detecto el ratio a aplicar de acuerdo a la pantalla con la que se está visualizando la web, cargando unas imágenes u otras.

El código utilizado para realizar el cambio de las imágenes es este:

En este código lo que hago es cambiar el atributo src de las imágenes haciendo que apunte a una imagen en un subdirectorio donde están las imágenes iniciales, con lo que dependiendo del ratio se cargan unas u otras.

jQuery Novice to Ninja

Hace unos tres meses, cuando España estaba jugando la semifinal de la copa del mundo, la gente de Sitepoint hizo una oferta en la que cada equipo estaba asociado a un libro en pdf y cuantas más fases pasaba el equipo, más barato era el libro, hasta que el equipo que ganaba el campeonato hacía que su libro fuera gratuito durante un dia.

El libro asociado a la selección española fue jQuery Novice to Ninja y yo me lo compré cuando España estaba en semifinales, con lo que pagué por el libro unos 8€. Al final resultó que me lo podía haber sacado gratis pero por 8€ valía la pena y realmente lo necesitaba y resultó ser una gran compra ya que es mi punto de referencia en cuanto a jQuery se refiere.

Ayer estaba haciendo una cosa con la web de Rethink Marketing y me puse a buscar por internet. Di con una página que es el libro en pdf tal cual. Te lo puedes bajar si tienes cuenta en scribd.com. No se si será legal ni cuanto tiempo durará pero merece la pena hacerse una cuenta. Además te ahorras los 29.95$ que cuesta en pdf…

http://www.scribd.com/doc/38198961/2010-jQuery-novice-to-Ninja-1

Un pedazo de libro de jQuery online y gratuito. Que más se puede pedir…

Ordenación de imágenes con jQuery

En el proyecto que estoy haciendo para la empresa de estudios de georadar he hecho un apartado de administración en el que he incluído un par de secciones, entre ellas una de imágenes. En ella doy la posibilidad de subir imágenes para que sean mostradas en el frontEnd.

Como se que esta gente me lo acabará pidiendo he hecho que las imágenes puedan ser ordenadas. Y que mejor forma para ordenar una lista de imágenes que utilizar un drag&drop con jQuery.

Buscando por internet he encontrado que la jQuery UI tiene implementada una función que hace esto en una lista desordenada (<ul>), el método sortable(). He buscado un poco más y he encontrado esta página http://jsbin.com/oqani/10 donde se muestra de forma clara como utilizar dicho método.

Al hacer esto, y siguiendo los pasos de la página, se crea un array con los identificadores ordenados (identificadores que previamente he puesto en cada uno de los elementos de la lista). Con lo que simplemente hay que pasarle a php la lista de identificadores y actualizar la base de datos.

Esto último lo he hecho via AJAX ya que me parecía el método más cómodo y limpio de ordenar los identificadores de cada una de las imágenes.

Funciona genial. Si alguien tiene dudas de como implementar todo el sistema ya sabeis.

Act: No lo voy a dar por terminado todavía. Voy a intentar crear un placeholder cuando hago el drag, a ver si me sale.

Act2: No ha sido dificil el tema del placeholder, y queda bastante mejor

Fancybox

Hasta ahora el mejor, más rápido y mejor diseñado lightbox like plugin que he usado. Con multitud de opciones de inicialización como poder poner las transiciones tanto de muestra como de ocultación de fotos, el formato del título, la posición de este y el estilo.

La agrupación de las fotografías en grupos no es nada nuevo, de hecho todo plugin de estas características que se precie debe tener agrupación para poder ir de foto en foto. Lo bueno que tiene este plugin es que combina con el plugin jquery.mousewheel para poder acceder a las diferentes fotos mediante la rueda del ratón. Además, si utilizas el modo elastic para las transiciones, si le das a cerrar la imágen hace el elastic-out (por llamarlo de alguna forma) a la imágen que estás viendo. Una chulada si usas un navegador como dios manda (en IE se ve a saltos, que raro).

Definitivamente lo voy a usar para mi próximo proyecto.

Un aplauso para los creadores de Fancybox.

Act: Le echaré un vistazo también a Facybox (notese que le falta una n) que parece ser que está basado en Fancybox y con el que es posible hacer lo mismo pero con cualquier elemento (div,li,etc…)