Estructura del template

Los templates se componen de 3 partes:

1. Los estilos css con sus imágenes (carpeta Skin)

2. Los xml que cargan bloques en la estructura de la pagina (carpeta Layout)

3. Los templates phtml que son bloques o la pagina misma (carpeta Templates)

Los estilos deben tener los nombres de clases que utiliza magento, ya que hay
muchos elementos que se generan dinámicamente y no se pueden editar fácil.
Conviene adaptar nuestros estilos a magento.

Los xml definen que divs son la estructura del sitio, y llama a bloques que se cargan
dentro de cada uno de estos divs. Dentro de la estructura podemos:

- Colocar un php que cargue un modulo, en el html de un bloque o de la pagina

- Hacer que este módulo se cargue desde el xml. Esta opción es la más limpia
aparentemente, pero ocurre que desde varios xml diferentes puedo estar
cargando bloques al header. Por ejemplo, en la columna derecha tenemos el
carrito que se carga desde checkout.xml, la suscripción al newsletter que se
carga desde newsletter.xml y modulo de publicidad que se llama desde
callout.xml.

Los bloques pueden estar, como templates en una carpeta, o ser bloques cms
cargados en el administrador, traté de usar mas que nada esta última opción para
que después se puedan editar desde el admin. Tanto uno como otro pueden ser
llamados mediante el xml.

Configurar el tema

Al colocar un tema, lo primero que tenemos que hacer es que magento lea nuestro
tema. Desde el admin en Sistema > Configuracion > Diseño, vamos a dejar como

Billinghurst 1193 7° B - Capital Federal (C1174ABU)

Tel: 4961-9249 y rotativas
http://www.ids.net.ar
carpeta de templates la default, pero en templates, layouts y skins, vamos a colocar el
nombre de la carpeta de nuestro tema.

Si solo tocamos los skins, en las demás opciones dejaremos los defaults.

-----------

Magento tiene además una caché, que incluye a los css, templates, productos, etc.
Recomiendo deshabilitarla para no pasar horas delirando porque no se ven los
cambios, se encuentra en Sistema > Gestor de la cache.

Así también, para los productos y categorías, tiene Indices (Sistema > Index
Managment) que hay que regenerarlos para que muestre los productos.

Agregar o encontrar un bloque

Los ficheros XML que se encuentran dentro de la carpeta “layout” hacen refencia a
diferentes secciones del diseño , por ejemplo el fichero catalog.xml hace referencia a
todas las secciones de tipo catálogo.

Si analizamos el fichero encontraremos todas las páginas que forman parte del diseño
del catálogo: <catalog_product_compare_index>, <catalog_product_view>… y el más
importante <default>

Si queremos definir un bloque para toda la estructura general lo incluiremos dentro de

<default>, si queremos que nuestro bloque sólo se muestre dentro de la vista del
producto lo incluiremos dentro de <catalog_product_view>.

Para cambiar la posición del bloque nos fijamos en la etiqueta <reference> a la que
tiene que pertenecer el bloque. En esa etiqueta encontraremos un atributo name que
puede contener diferentes valores: left, right, header, footer, content… que como su
nombre indica hace referencia a una zona

Es posible que al cambiar los bloques de columna estos no aparezcan donde nos
interesa. Modificar el orden de los bloques de una zona se realiza indicando uno de los
atributos “before” o “after” o los dos a la vez.

Billinghurst 1193 7° B - Capital Federal (C1174ABU)

Tel: 4961-9249 y rotativas
http://www.ids.net.ar
Para mostrar el bloque como el primero de todos: before=”-”.

Para mostrar el bloque como el último: after=”-”.

Para mostrar el bloque antes de otro bloque: before=”nombre-del-bloque”.

Para mostrar el bloque después de otro bloque: after=”nombre-del-bloque”.

Remover bloques y jerarquias

Al quitar bloques en los xml que no queremos mostrar, nos encontramos con que a
veces se siguen mostrando.

Esto ocurre porque hay una jerarquía de temas que utiliza magento: Cuando no
encuentra algo en nuestro tema, lo busca en default, y si no está ahí, lo busca en base.
Es decir, que si borramos algo, y eso sigue estando en el base, va a seguir
apareciendo.

Es decir, lo que borras de un xml, si está en base, igual se muestra. Lo que borras de
un template, no se muestra.

Para quitar un bloque, o incluso una columna entera, se coloca en un xml: <remove
name=”nombre-del-bloque”/>, aunque a mi no me funcionó, no me quedó otra que
buscar el .phtml y comentar el código…

Como para quitar o agregar bloques, hay que buscarlos en cada xml del
template, es una gran ayuda, desde el administrador en: Sistema >
Configuracion > Main Website > Desarrollador > Depurar > Ayuda de rutas de
la plantilla, elegir Si, que activa una opción que nos muestra en el frontend,
desde donde está siendo llamado cada módulo, incluyendo la ruta del
template para saber si es del nuestro o el default.

Estructuras base

En nuestro tema, en templates > pages, nos encontramos archivos phtml que son la
estructura de nuestro sitio, estos se llaman, por ejemplo, 3columns.phtml.

Billinghurst 1193 7° B - Capital Federal (C1174ABU)

Tel: 4961-9249 y rotativas
http://www.ids.net.ar
Acá están los divs principales, dentro de los cuales se cargaran luego los bloques, cada
uno de estos archivos es la estructura del sitio, y pueden ser varios. 3columns es un
ejemplo de la versión de 3 columnas del sitio, podemos crear para algunas paginas,
una versión de 2 columnas o de una sola, y desde el administrador, al editar las
paginas cms, o las categorías, podemos elegir con que template se verán. Así también
podemos asignar un tema o una estructura en particular, a una pagina o una categoría,
o incluso a un producto.

En templates > pages, nos encontramos también con una carpeta html, donde están el
header, footer y otras partes esenciales del sitio. En estos templates podemos agregar
bloques, o texto estático, pero además, los archivos xml del sitio pueden estar
cargando bloques en estos templates.

Modulos cms

Magento permite tener no solo páginas editables desde el administrador, sino también
modulos que podemos cargar como bloques en el sitio. Esta es la opción más útil que
encontré para manejar publicidades, asignando un modulo a una columna, y cargando
una imagen o flash con link en este módulo.

También lo utilicé para banners propios del sitio, links en el footer del sitio, o el menú
principal, que lleva tanto a páginas duras como a categorías.

Listado de subcategorias

Es una extensión de magento: http://www.magentocommerce.com/magento-

connect/Rico+Neitzel/extension/763/vertical-navigation-with-css-classes

Búsqueda avanzada

La gente de Inchoo desarrolló para magento un template de búsqueda avanzada. Está

incluido con el template de bara. Esta búsqueda avanzada, lee los atributos que hay

Billinghurst 1193 7° B - Capital Federal (C1174ABU)

Tel: 4961-9249 y rotativas
http://www.ids.net.ar
cargados para los productos, y que están marcados para ser utilizados en la búqueda
rápida.

Agregar productos

Al agregar un producto, asegurarse de marcarlo como habilitado, asociarlo a una

categoría, y en inventario, poner una cantidad de productos disponibles, y marcarlo
como En existencia. Luego, ir a Sistema > index managment, y reindexar los
productos. Sino no aparece en el sitio, lo descubri después de horas…

Crear tiendas con idioma propio

Al agregar un producto, asegurarse de marcarlo como habilitado, asociarlo a una

categoría, y en inventario, poner una cantidad de productos disponibles, y marcarlo
como En existencia. Luego, ir a Sistema > index managment, y reindexar los
productos. Sino no aparece en el sitio, lo descubri después de horas…

Editar atributos del sistema

- Ir a phpmyadmin
- Vaya a su base de datos de instalación de Magento
- Ir a la tabla de eav_attribute
- Browse table with attribute_code 'YOUR_ATTRIBUTE_CODE' OR browse the table with
the attribute_id of your attribute ('your attribute' means the attribute which you want
to remove as system attribute
- Edit the table row of your attribute
- Find the field 'is_user_defined'
- Set it to 1

Agregar recaptcha a formularios

Billinghurst 1193 7° B - Capital Federal (C1174ABU)

Tel: 4961-9249 y rotativas
http://www.ids.net.ar
http://www.e-commercewebdesign.co.uk/blog/magento-tutorials/magento-add-captcha-
to-contact-form.php

Agregar campos a contacto:

http://www.magentocommerce.com/wiki/how_to/add_fields_to_contact_form

Blogs en español con mucha info:

http://www.aromman.com.ar/category/magento-trucos/

http://www.dowhiletrue.net/blog/index.php/magento/user-guide-resumen/?paged=2

http://onestic.com/?s=magento&x=0&y=0

http://www.magentocommerce.com/wiki/como_crear_un_listado_de_las_categorias_con
_imagenes

http://www.damianculotta.com.ar/category/magento/mis-extensiones/ (extensiones
para argentina)

http://www.magento.com.es/

http://css-tricks.com/using-jquery-in-magneto/

http://magentoexpert.blogspot.com/

http://www.webmasterbulletin.net/2009/02/magento-cms-2-methods-for-static-
blocks/657

http://visionwidget.com/inspiration/web/374-free-magento-extensions.html

Billinghurst 1193 7° B - Capital Federal (C1174ABU)

Tel: 4961-9249 y rotativas
http://www.ids.net.ar