Damián Culotta » diseño

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

Damián — Sat, 11 Jul 2009 03:39:35 +0000

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.

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

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

Vamos a ver las opciones que se nos ofrecen para hacer debug.

Lo que vamos a hacer, es quitar las marcas que indican que se utilicen las preferencias del website (las generales) y vamos a cambiar los valores de los últimos dos dropdown.

Ya guardada la configuración, sólo tenemos que pasar por el frontend de la tienda, y vamos a ver algo como lo siguiente.

Esos nombres que figuran en rojo son: a la izquierda, el nombre del phtml que se está utilizando, a la derecha, el bloque php que generó ese contenido.

Ahora bien, retomando un poco el tema central del post, vamos a ver cómo aplicar ésta funcionalidad al backend.

Dado que desde la interfase que nos proporciona la plataforma no es posible hacerlo, vamos a necesitar entrar a nuestra base de datos.

Como ya teníamos habilitada la funcionalidad para el front, vamos a correr la siguiente consulta.

SELECT * FROM core_config_data WHERE path like 'dev/debug/template_hints%';

Vamos a ver el siguiente resultado.

+-----------+--------+----------+---------------------------------+-------+
| config_id | scope  | scope_id | path                            | value |
+-----------+--------+----------+---------------------------------+-------+
|       128 | stores |        1 | dev/debug/template_hints        | 1     |
|       129 | stores |        1 | dev/debug/template_hints_blocks | 1     |
+-----------+--------+----------+---------------------------------+-------+

Lo que nos va a importar en este caso, es el valor de la columna scope_id. En éste momento dice 1, que es el valor interno que se le asigna al store view por defecto. Lo que no está explicado en ningún lugar, es que el backend también es un store view, y su valor interno es 0.

Sabiendo esto, vamos a modificar a qué store view se aplican las ayudas de template.

Para lograrlo, ahora corremos el siguiente comando.

UPDATE core_config_data SET scope_id = 0 WHERE path like 'dev/debug/template_hints%';

Ahora si, pasemos por nuestro backend y vamos a ver las ayudas disponibles.

Una vez que hayas terminado de detectar lo que sea que estuviéramos buscando, sólo debemos borrar de la tabla, los dos valores que habilitan la funcionalidad.

Para poder deshabilitar éstas ayudas, sólo debemos ejecutar la siguiente consulta en nuestra base de datos.

SELECT * FROM core_config_data WHERE path like 'dev/debug/template_hints%';

A lo mejor te interese leer

Variable media en las plantillas de email de Magento

Damián — Fri, 22 May 2009 03:01:45 +0000

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.

A lo mejor te interese leer

Eligiendo el Skin para las plantillas de Email en Magento

Damián — Thu, 21 May 2009 03:05:13 +0000

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.

Para la variable {{skin url}} tenemos dos directivas adicionales, no documentadas, que nos dan un poco más de flexibilidad. Un ejemplo podría ser:

<img src="{{skin url="images/logo_email.gif" _area='frontend' _package='paquete' _theme='tema'}}" alt="Magento"  style="margin-bottom:10px;" border="0"/>

Las dos “nuevas” directivas funcionan de la siguiente manera.

_package=’paquete’ determina de que paquete del skin se está hablando. Recuerden que los skins pueden estar conformados por múltiples paquetes con múltiples temas cada uno. Si usáramos como skin default/blue, default sería el paquete y blue el tema.
_theme=’tema’ hace exactamente lo mismo pero, obviedad mediante, a nivel tema.

De ésta forma, podríamos estar usando un skin determinado para nuestra tienda, y podríamos usar imagenes de otro skin en nuestros templates. En realidad, podríamos hacer tantas combinaciones y configuraciones como complicaciones o requerimientos nos lleguen.

A lo mejor te interese leer

Balsamiq Mockups

Damián — Tue, 17 Feb 2009 03:52:02 +0000

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.

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

Además de funciones comunes como copiar, pegar, recortar, etc; contamos con una barra con la categorización de los distintos elementos que podemos usar en nuestros bosquejos.

A continuación, unos muy básicos y sencillos ejemplos de lo que puede lograrse.

En nuestras composiciones, podemos recurrir a los elementos más comunes o a los íconos de la web 2.0.

También podemos trabajar con texto, e incluso dejar notas que nos sirvan como recordatorios (ya sea que verdaderamente busquemos anotar algo o que sólo intentemos un golpe de efecto en el prototipo).

Si bien el último ejemplo muestra un muy básico formulario, la cantidad de opciones con las que contamos no son pocas. (Si miran el screencast de la página del producto, se va a entender mejor a lo que me refiero).

Para cada elemento que vayamos agregando, vamos a tener un menú contextual que va a extender las posibilidades del objeto con el cual estemos trabajando.

Como ven, es una herramienta sencilla y de bastante utilidad para tratar de plasmar esas ideas que tenemos dando vueltas, o para comunicar un diseño en etapa embrionaria.

Ahora bien, si quiero la aplicación, ¿puedo usarla?. La respuesta es NI.

Desde la página oficial puede accederse a una versión de prueba, la cual tiene algunos objetos y funciones deshabilitadas. El software es comercial, y su licencia tiene un valor de u$s 79. Aunque el tema no termina ahí.

Debajo del instalador de Balsamiq Mockups, pueden ver un título que dice: “Get Mockups For Desktop For Free”. A continuación, hay una serie de condiciones que, en caso de cumplir alguna, nos permite acceder a una licencia de forma gratuita.

Lo que yo hice fue escribir un mail contando un poco sobre mis actividades y sobre la participación en proyectos Open Source. A decir verdad, no esperaba tener respuesta, pero fui sorprendido por un mail de Mariah, en el cual me facilitaban una licencia completa.

Una de los pedidos para el caso de quienes posean un blog, es escribir un artículo (y como aclaran, honesto) sobre la herramienta. Por supuesto, parte de éste post cumple con ese propósito; aunque también, después de varias semanas de estar usando éste programa, pasa a convertirse en una recomendación.

A lo mejor te interese leer

Mostrar los bloques html en el frontend de Magento

Damián — Sat, 27 Sep 2008 18:38:41 +0000

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.

Dentro de ésta sección, nos vamos a encontrar con las siguientes opciones.

La opción que nos interesa cambiar es la segunda: Debug. Al desplegarla veremos lo siguiente.

Hasta acá no hay nada que nos sirva para lograr que en el frontend se puedan ver los distintos templates utilizados en cada pantalla.

Una de las particularidades con las que nos vamos a encontrar en el backend, es que en muchos casos, las opciones que se nos muestran varían según el contexto en el cual nos encontremos.

En este caso, para modificar el contexto (o alcance) de las opciones de debug, vamos a cambiar el “Current Configuration Scope”, que se encuentra en la configuración por defecto.

Y la cambiamos a Vista por defecto.

Una vez hecho ese cambio, vamos a ver cómo cambia nuestra opción de Debug.

La segunda opción es la que nos interesa, que es la que permite mostrar los distintos archivos involucrados en un skin. Para eso, debemos cambiarlo a la siguiente opción.

Como siempre, grabamos nuestras opciones, y vamos a ver cómo el frontend dejó de verse normalmente, y pasamos a tener las siguientes indicaciones en todas las pantallas.

Seguramente les va a resultar bastante más fácil ponerse a cambiar no sólo estilos e imágenes, sino que ya pueden alterar código php en la plantilla que realmente necesitan.

En los próximos posts sobre Magento, vamos a empezar a ver cómo cargar productos y algunas particularidades que permiten comenzar a entender por qué la plataforma ha tenido tan buena aceptación.

A lo mejor te interese leer

Skin Blank para Magento

Damián — Fri, 19 Sep 2008 14:17:21 +0000

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.