Maquetar success.phtml en Magento 1.8.1.0

magento_logo

Maquetar la thankyou page puede ser un engorro importante si cada vez que tenemos que probar los cambios tenemos que hacer un pedido. Lo mejor es que impidamos el limpiado de la sesión para que cuando refresquemos nos siga mostrando la información del pedido.

Para hacer esto nos vamos al archivo:

/app/code/core/Mage/Checkout/controllers/OnepageController.php

y comentamos temporalmente la línea 291 donde pone:

la función es successAction por si en próximas versiones cambiara el número de línea.

Info extraída de: http://www.impulsis.com/nc/blog/blog-post/how-to-style-success-page-in-magento/comment/1/30.html

Twitter Bootstrap responsive a 16 columnas

bootstrap

Para el próximo template responsive que voy a crear para Magento me pasaron un diseño en PSD basado en un grid de 16 columnas. Decidí usar el framework Bootstrap de Twitter, pero me di cuenta de que por defecto está basado en 12 columnas en lugar de 16.

En la página de Twitter Bootstrap, que actualmente está en la versión 2.3.0, hay una herramienta de configuración donde es posible bajar un Bootstrap custom diciéndole que es lo que quieres y que no. En la parte inferior están los parámetros del gridsystem donde puedes decirle al generador qué valores quieres tener para número columnas, ancho de cada una de ellas y separación. Estos serían los valores que habría que ponerle para un layout de 16 columnas.

bootstrap-grid

Pero cual es mi sorpresa cuando al descomprimir el archivo .zip que te genera, los archivos bootstrap.responsive.css y bootstrap.responsive.min.css brillan por su ausencia. ARRRGG!!

Después de darle muchas vueltas decido que la mejor opción es bajarme los ficheros less (disponibles en la carpeta less del proyecto Twitter Bootstrap en github) y compilar el fichero yo mismo.

Para usuarios de Mac puede ser relativamente fácil hacer esto ya que existen heramientas muy chulas (como Crunch por ejemplo) que van a las mil maravillas. Pero si trabajas con Windows o Ubuntu puede ser un poco más complicado.

Lo intenté con Simpless en Windows XP pero no me funcionó, ya que por lo visto han dejado un poco de lado el proyecto y al compilar los ficheros me daban errores (luego me enteré de que la librería Less.js la tienen desactualizada y la actualicé pero ni así). También lo intenté con WinLess pero la aplicación cascaba estrepitosamente al intentar abrir el directorio que contiene los archivos .less.

Así que me decidí por hacerlo por terminal en Ubuntu (no hay, o al menos no he encontrado, compiladores gráficos de Less para Ubuntu). Para usar Less en Ubuntu lo mejor es instalar Node.js y luego con Node Package Manager instalar Less. En esta guía David Sadler explica de lujo la instalación de Node.js en Ubuntu, aunque yo me salté el paso que hace el cambio de rama a la 0.6.17, más que nada porque en estos momentos están por la 0.9.9. Así que yo os recomiendo que os saltéis esta línea también

Una vez instalado Node.js hay que instalar less con NPM. La línea que hay que ejecutar en el terminal es la siguiente:

Vale, ahora ya tenemos las herramientas para compilar el archivo responsive.less, pero antes nos tocará cambiar los valores del archivo variables.less alrededor de la linea 272, por los que queremos para soportar responsive a 16 columnas:

Grabamos el archivo variables.less y a continuación compilamos el archivo responsive.less con la siguiente orden:

Con lo que ya tendremos el archivo bootstrap-responsive.css con soporte para 16 columnas que es lo que andábamos buscando. Os dejo a vosotros el tema de la minificación, que hay mil herramientas por ahí.

Act: Gracias a este twitt de @jorgecasar me doy cuenta de que falta una cosa más. En el archivo bootstrap-responsive.css generado, alrededor de la línea 1016 sigue estando .span12 al 100%. Por lo visto esa parte está sin parametrizar en el .less. Habría que cambiar ese código por este otro:

Act2: Me pide James Vergara en los comentarios el archivo bootstrap-responsive.css con soporte para 16 columnas. Aquí lo tenéis:

bootstrap-responsive.css con soporte para 16 columnas

+Info:
http://twitter.github.com/bootstrap
https://coderwall.com/p/vusddq
http://lesscss.org
http://toutpt.makina-corpus.org/en/articles/twitters-bootstrap-for-responsive-web-design-with-16-columns

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/

Correos transaccionales para diferentes idiomas en Magento 1.5.0.1

Tenemos un cliente en Logocomunica que tiene la web traducida a cuatro idiomas. Al ser una tienda online hecha en Magento, existe la posibilidad de crear los correos transaccionales de cada acción en la que hace falta informar a los clientes de la tienda en cada uno de los 4 idiomas. Una vez creados estos correos se configura en los diferentes idiomas para que, según en que idioma se esté visualizando la página, te mande los correos en el idioma correspondiente.

El caso es que nos dimos cuenta de que los correos enviados a usuarios al registrarse en español se mostraban en inglés. Al ver que estaban bien configurados nos pusimos a buscar por internet hasta encontrar que era un bug de la versión 1.5.0.1 de Magento.

En el archivo app\code\core\Mage\Customer\Model\Customer.php se encuentra este trozo de código en la función sendNewAccountEmail (alrededor de la línea 517):

Este código por lo visto no devuelve correctamente el id de la vista de la tienda.

También nos dimos cuenta de que también estaba esta otra línea (569) que hacía algo parecido, en la función sendPasswordReminderEmail:

Para resolver esto, copiamos el archivo Customer.php a app\code\local\Mage\Customer\Model\Customer.php y hay que volver hacia atrás unas cuantas releases y copiar el código del mismo fichero en la versión 1.4.1.1. donde si funcionaba correctamente. Con lo que para el primer trozo de código nos quedaría así:

y para el código de la línea 569 quedaría algo así:

Y con esto ya nos llegarán los correos de registro y de recordatorio de contraseña en el idioma correcto.

+info: http://www.magentocommerce.com/boards/viewthread/77826/#t333947

Slider en cabecera para tema twentyeleven en WordPress

Muchas veces he utilizado como tema base para crear un template para WordPress, el tema twentyeleven, que viene por defecto en la instalación de la última versión.

Siempre había querido hacer un slider con las imágenes que se muestran en la cabecera y que son configurables desde Apariencia / Cabecera. El caso es que el otro día tuve que hacerlo para un cliente y, antes de ponerme a hacerlo desde cero, busqué un poco por si alguien lo había hecho ya, no es cuestión de ir reinventando la rueda porque sí.

El caso es que encontré un plugin que añade una opción más a la ventana de configuración de la cabecera para que esta se muestre como un slider, utilizando para ello el plugin para jQuery Nivo Slider (qué casualidad, porque yo iba a poner ese).

El caso es que después de instalar el plugin y de realizar un par de ajustes ya me aparecían las imágenes de la cabecera pasando de una a otra.

Ahora solo me hacía falta configurar mis imágenes para que salieran estas en lugar de las que vienen por defecto en twentyeleven.

Abrimos el archivo functions.php y al final del todo lo que haremos será:

  1. Deshabilitar las imágenes de la cabecera que vienen por defecto y…
  2. Habilitar nuestras imágenes habiendo subido previamente las nuevas al servidor via ftp

Para esto lo que habrá que hacer, como ya he dicho, es escribir el siguiente código al final de functions.php:

Con esto lo que hacemos es borrar las antiguas imágenes y poner cinco nuevas.

Mucha gente utiliza los child themes, o temas basados en otros, para crear modificaciones de estos. Yo no lo hago pero más que nada porque no me he puesto nunca. Simplemente me gusta enredarme con el código y crear un nuevo tema a partir del original, aunque igual lo de hacer un child theme sea mejor opción.

Espero que le sirva a alguien 😀

Act: Suelo dejar para el final el tema de hacerlo todo compatible a versiones antiguas de IE. En este caso IE7 no carga las imágenes. Por lo visto el utilizar la opción auto insert del plugin no le gusta mucho al dichoso IE y no carga bien. La solución es cambiar el código de carga de las imágenes directamente en el archivo header.php. Donde pone esto:

Por esta línea:

Con esto ya cargará bien las imágenes en IE7 y nos podremos olvidar del tema…

+ info: http://wordpress.org/extend/plugins/header-image-slider/
http://wpti.ps/functions/replace-remove-header-image-twenty-eleven-theme/

Launch Effect por BarrelNY

Estaba esperando a escribir este post a que la gente de BarrelNY sacara la nueva versión de Launch Effect, y ya está aquí, la versión 1.0.3.

Launch Effect es un tema para WordPress que convierte una instalación nueva en una valiosa herramienta para marketing. Se trata de crear un anuncio viral de un evento próximo, una apertura de tienda, un concierto, lo que sea, pero con un diseño y un potencial extremos.

Solo hay que seguir los pasos de instalación indicados y ya podremos empezar a configurar la landing, imagen de fondo con supersized, textos, maquetación, etc… Una vez tenemos la landing a nuestro gusto empieza el tema viral. Corremos una primera voz como podamos.

Cada persona que introduzca el email en la lista recibirá una url para poder compartir con los amigos, cosa que puede hacerse mediante los botones adjuntos para publicar en redes sociales. Cuantos más amigos utilicen esa url más puntos tendrá, haciendo así que se pueda premiar al usuario que más corra la voz.

Después podremos ver todos los resultados y descargar un CSV con todas las direcciones de correo.

Una pasada de tema, tanto por la parte de código como por la parte visual, que va a dar mucho que hablar y le van a salir competidores por todos lados porque la idea es simplemente genial, aunque ser pionero tiene un grado.

Yo sin duda pagaría por un tema como este pero sin pensarlo un segundo.

PS: La página de la aplicación una maravilla en cuanto a diseño y programación. Inspiration First Class.

+info:
http://launcheffectapp.com/
Explicación de Launch Effect por la gente de Barrel

Rotación mediante CSS3 / Webkit

Hace un tiempo estuve viendo el proyecto Stampaxx, una buena colección de sellos para indicar de que va tu proyecto. Me pareció una idea genial, un diseño super cuidado y encima gratis. Me gustó tanto que decidí echar un vistazo a los autores: Thomas y Mike

La web de Thomas un sencillo carrousel con sus proyectos, sencilla y atractiva, genial. Pero lo que me llamó la atención fue algo que ví en la web de Mike. Yo navego siempre con Chrome y me impactó un montón cuando, al pasar el ratón por el logo de acceso a twitter, este giraba 180 grados. Me puse a investigar y vi que lo hacía mediante CSS, así que intenté hacerlo con mi logo…

Primero lo que hay que hacer es cargar el logo con un background en lugar de cargar la imagen desde html:

y luego indicarle a los navegadores webkit la rotación que tienen que hacer y cuando la tienen que hacer:

Esto funciona en mi caso teniendo el logo de esta forma en mi código html

Esto, evidentemente va contra todos mis principios de validación de código ya que esto solo vale para navegadores webkit, pero es que queda tan chulo…

Generador @font-face por fontSquirrel

Creo que ya he hablado de la magnífica fontSquirrel alguna vez, el servicio gratuito de tipografías online que compite directamente con Google Fonts y además, hinchando pecho, David contra Goliat. Pero lo que encontré hace unas semanas le da una vuelta de tuerca al servicio de los de la ardilla.

FontSquirrel tiene un generador de fuentes para web gratuíto que hace que se lleve el gato al agua. No se si Google Fonts u otros como DaFont lo tienen, pero sin lugar a dudas este se lleva la palma.

Sólo tienes que introducir tu tipografía y darle a generar, en unos segundos tendrás tu fuente lista para web, con todos los estilos y ejemplos posibles.

Creeeeeema.

http://www.fontsquirrel.com/fontface/generator

Deshabilitar Fooman Speedster en Magento… TERROR!

Fooman Speedster es un módulo para Magento que permite acelarar la carga de la web en un tanto por ciento bastante considerable. Para ello minimiza archivos, optimiza el código e implanta metas entre las etiquetas <head> y </head>.

Todo funciona de maravilla si tienes la web terminada y no la piensas tocar. Pero entonces surge el día en el que tienes que cambiar el css por alguna razón y te das cuenta de que los ficheros los ha minimizado permanentemente. Bueno, como tienes copia de seguridad no pasa nada, restauras la copia y deshabilitas el módulo…

ARG!!!! HORROR!!!! El módulo sigue en funcionamiento pero no pone nada entre las etiquetas <head> y </head>. Pero lo peor no es eso, lo peor es que hace lo mismo tanto en el frontend como en el backend!! Ahora como deshabilitas el módulo?????

Que no cunda el pánico. Resulta que Magento da prioridad a la configuración de los módulos por xml con lo que sólo hay que ir a la configuración del módulo, /app/etc/modules/Fooman_Speedster.xml y poner el campo:

a

Después de esto, si tienes la caché activada igual sería buena idea hacer un buen flush.

Hace poco tuvimos un momento de pánico en la empresa por este tema y lo solucionamos rápido porque nos pusimos a buscar la solución como locos y la encontramos, pero por si acaso alguien no dispone de mucha gente para operar…

+ info en este thread: http://www.magentocommerce.com/boards/viewthread/48669/

Cambiar entre tiendas en Magento

Tenemos un cliente en Logocomunica que tiene dos tiendas en la misma instalación de Magento. Quería que hubiese una forma de pasar de una a otra tienda mediante un switcher o algo por el estilo.

Buscando por internet he encontrado un snippet que saca un combo para cambiar de una tienda a otra.

Snippet for switching between websites por la gente de Inchoo

Lo que he hecho ha sido coger ese snippet, meterlo en una carpeta llamada selectarea dentro de la carpeta template de mi tema y luego en el archivo de layout page.xml, dentro del bloque header he incluído esta línea justo encima de la línea que indica el bloque del buscador (se puede incluir en el sitio que queramos de todas formas):

Luego tuve que cambiar el nombre del los websites para que pusiera lo que yo quería, pero eso es tema aparte.