Mostrar phtmls y bloques usados en el skin de backend de Magento

Pequeño truco para cuando necesiten detectar algo en el backend.

Existe una funcionalidad en Magento que nos permite mostrar qué archivos phtml e incluso qué bloques son invocados en cada pantalla. El detalle con esto es qué sólo puede configurarse para el frontend.

Por si alguno no se ha dado cuenta, me refiero al template path hints. Vamos a refrescar cómo habilitarlas para el frontend.

Primero, tenemos que ir a Sistema -> Configuración. Ahí tenemos que cambiar el alcance de la configuración.

Selección del alcance de configuraciones en Magento

Recuerden que éstas opciones sólo funcionan a nivel de store view, por lo cual será necesario hacer un pequeño cambio.

Seleccionamos el store view al cual vamos a aplciarle el cambio

Ahora si, buscamos las opciones de desarrollo. (Se encuentran al final de la columna)

Opciones para desarrollo de Magento

Continue reading

Variable media en las plantillas de email de Magento

Uno de los pocos cambios de la nueva versión de la plataforma, consiste en el agregado de la variable “media” para la composición de los templates de email.

Su uso es absolutamente sencillo.

Al igual que cuando invocamos {{skin url=”"}} para imprimir algún contenido de un skin dado, la variable media utiliza el mismo parámetro.

<img src="{{media url="imagen.jpg"}}" alt="Magento" border="0"/></a>

Esto hará que se busque la imagen dentro de la carpeta media. Si usáramos subcarpetas, deberemos escribir el path partiendo siempre desde dicha carpeta.

Si bien puede parecer una pavada la inclusión del template, su uso puede entenderse en el caso de campañas de promoción, en las cuales podríamos utilizar (es sólo un ejemplo para graficar) el mismo banner que tenemos en la home de la tienda, en el cuerpo del mail.

Eligiendo el Skin para las plantillas de Email en Magento

Una de las virtudes de Magento, es que a nivel funcional tiene cubiertos tantos temas que pareciera que uno no necesita nada más.

Una de sus contras, es que al momento de necesitar una mínima personalización, uno puede terminar sintiéndose perseguido por una multitud de líneas de código corriendo en círculos.

Hoy vamos a ver un pequeño truco, detalle, …… (complete la línea punteada con la palabra que mejor le resulte); que sirve para indicarle a la plantilla, de qué skin tomará las imagenes que se mostrarán en el caso de las plantillas html.

Si ya les tocó tener que personalizar esas plantillas, es probable que hayan visto dentro del código que imprime el logotipo, una línea parecida a la siguiente.

<td valign="top"><a href="{{store url=""}}"><img src="{{skin url="images/logo_email.gif" _area='frontend'}}" alt="Magento"  style="margin-bottom:10px;" border="0"/></a></td>

Un repaso rápido de las variables usadas:

  • {{store url=”"}} es el base_url de la tienda. Por ejemplo: http://www.mitienda.com.ar/
  • {{skin url=”…”}} transforma el source de la imagen a http://www.mitienda.com.ar/skin/frontend/default/default/ y le concatena images/logo_email.gif. Nos quedaría la siguiente url: http://www.mitienda.com.ar/skin/frontend/default/default/images/logo_email.gif.
  • {{skin url}} aplica una directiva: _area=’frontend’. Como vimos en el punto anterior, la imagen es tomada desde …/skin/frontend/. Si el valor de _area lo cambiamos por _area=’adminhtml’, el template buscará la imagen dentro del contenido del skin default/default del backend.

Hasta acá tenemos lo que a simple vista se ve y más o menos podíamos suponer.

Continue reading

Balsamiq Mockups

Si bien éste programa no es nuevo, y si bien lo probé hace ya buen tiempo; no fue recién hasta hace poco más de un mes que me decidí a probarlo nuevamente.

Balsamiq Mockups es una aplicación desarrollada con Flex y Adobe Air. La idea de ésta herramienta es facilitarnos el trabajo de armado de prototipos de nuestras páginas web (aunque podría usarse también para aplicaciones de escritorio sin mayor problema).

De más está decir, que para poder correr este programa, es necesario tener instalado el player de Adobe Air.

Lo primero que vamos a ver al ingresar al programa, es una hoja en blanco, con un set de elementos en la barra superior.

Pantalla principal

Si bien la apariencia de ésta herramienta es bastante sencilla, no es condición para la flexibilidad que nos ofrece.

Continue reading

Mostrar los bloques html en el frontend de Magento

La forma en que se aplican las plantillas en Magento puede resultar, en primera instancia, bastante abrumadora. Para aquellos que ya hayan implementado plantillas en algún desarrollo, puede que les resulte bastante más sencillo.

Hasta ahora, ya vimos cómo se organizan los skins dentro de la aplicación. Ya teniendo ese punto en claro, vamos a empezar a modificar y tratar de crear nuestro propio skin.

Dada la cantidad de plantillas que se involucran en cada página, es muy recomendable activar el debug de plantillas para el frontend.

Como se trata de un tema de configuración, vamos a ir a Sistema -> Configuración.

Una vez en el módulo, elegimos la última opción, que apunta a los temas referidos al desarrollo.

Continue reading

Skin Blank para Magento

El 16 de Septimbre, Magento anunció la disponibilidad de un nuevo skin, llamado Blank.

El mismo se encuentra sólo disponible a través de Magento Connect, a diferencia del skin Blue, que viene dentro del paquete de instalación.

En si, este nuevo skin no es un skin propiamente dicho, sino que busca funcionar como modelo para que los diseñadores y entusiastas puedan construir sus propios templates, sin tener tantos inconvenientes.

Así es como se ve luego de una instalación limpia.

Supongo que de ahora en más, deberíamos empezar a ver mejores implementaciones estéticas de las tiendas.